I am using Apexchart's bar chart and noticed that I am not able to change the x-axis's labels, ie the categories. Below is the component:
<template>
<div>
{{magnitudeByFreq}}
{{chartOptions}}
<apex-chart width="500" type="bar" :options="chartOptions" :series="series"></apex-chart>
</div>
</template>
<script>
export default {
props: {
processedMouseData: null,
gradientCountByType: null,
magnitudeByFreq: null,
},
data: function() {
return {
chartOptions: {
chart: {
id: 'vuechart-example'
},
xaxis: {
categories: []//['Positive', 'Neutral', 'Negative']
}
},
series: [{
name: 'series-1',
data: []
}]
}
},
mounted() {
},
watch: {
gradientCountByType: function() {
console.log(this.series.data)
this.gradientCountByType ? this.series[0].data = this.gradientCountByType : console.log("Not working")
this.gradientCountByType ? this.chartOptions.xaxis.categories = ['Positive', 'Neutral', 'Negative'] : console.log("No xaxis")
},
magnitudeByFreq: function() {
this.magnitudeByFreq ? this.series[0].data = Object.values(this.magnitudeByFreq) : console.log("ABX")
this.magnitudeByFreq ? this.chartOptions.xaxis.categories = Object.keys(this.magnitudeByFreq) : console.log("ABA")
}
}
};
</script>
Currently the categories is set to []. This is because I want it to be filled by different data depending on which prop is using it. ie gradientCountByType or magnitudeByFreq.
The two lines below which are supposed to set the category:
this.gradientCountByType ? this.chartOptions.xaxis.categories = ['Positive', 'Neutral', 'Negative'] : console.log("No xaxis")
this.magnitudeByFreq ? this.chartOptions.xaxis.categories = Object.keys(this.magnitudeByFreq) : console.log("ABA")
They don't seem to update the category at all. I should however mention that what gets displayed in the template {{magnitudeByFreq}} and {{chartOptions}}, do reflect there is a change in the category variable:
{{chartOptions}} shows:
{ "chart": { "id": "vuechart-example" }, "xaxis": { "categories": [ "Positive", "Neutral", "Negative" ], "convertedCatToNumeric": false } }
and
{ "chart": { "id": "vuechart-example" }, "xaxis": { "categories": [ "+0", "+100", "+1000", "+2000" ], "convertedCatToNumeric": false } }
Why is the categories attribute not displaying correctly? For whatever reason, the categories are showing numbers.
My guess is by changing the data attribute doesn't actually update the chart.
Instead we should create a reference to the chart:
<apex-chart ref="radar" type="radar" height="350" :options="chartOptions" :series="series"></apex-chart>
Then we can update the data with updateSeries method and update the chartOptions with updateOptions method:
this.$refs.radar.updateSeries([{
name: 'Series 1',
data: [your_new_data_here] //ie [1,2,3,4]
}])
this.$refs.radar.updateOptions({
xaxis: {
categories: [your_new_categories_here] //ie ["a","b","c","d"]
}
})
<apex-chart ref="chart" :options="options" :series="series"/>
Chart component has refresh function. So we can re-render the chart.
this.series[0].data = [yourData];
this.options.xaxis.categories = [yourCategories]
this.$refs.chart.refresh();
Related
I try to fetch stocks data from an API. This data should be used to create a chart.js graph.
how do I access in vue.js data to generate a chart.js line chart from the methods http(axios) call?
Is it possible to access the data directly in the mounted component or should I define a const in the section and create the variables there?
<template>
<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<div>Selected: {{ selected }}</div>
<div>
<canvas id="myChart" height="200" width="650"></canvas>
</div>
<script>
export default {
mounted() {
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: "line",
data: {
labels: [prices[0].date],
datasets: [
{
label: 'Dataset msft',
data: prices[0].price
},
{
label: 'Dataset google',
data: prices[1].price
},
],
},
});
},
data() {
return {
selected: "",
prices: [],
options: [
{ text: "msft", value: "msft" },
{ text: "GOOGL", value: "GOOGL" },
],
};
},
watch: {
selected: function () {
this.getPrice();
},
},
methods: {
getPrice: function () {
var this_ = this;
axios
.get(
"https://site/...."
)
.then((response) => {
// JSON responses are automatically parsed.
this_.prices = response.data;
})
},
},
};
</script>
Yes, you can access variables in data() from mounted().
You need to prepend variables with this. when using the Options API
ex: this.prices[0].price
As you are putting watcher on selected but I did not see any changes in the selected variable in your code. As per my understanding you are making an API call to get the graph data based on the selected option.
If Yes, Instead of generating a chart in mounted you can generate it inside your getPrice() method itself based on the response. It should be :
methods: {
getPrice: function () {
var this_ = this;
axios
.get(
"https://site/...."
)
.then((response) => {
this.generateChart(response.data);
})
},
generateChart(prices) {
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: "line",
data: {
labels: [prices[0].date],
datasets: [
{
label: 'Dataset msft',
data: prices[0].price
},
{
label: 'Dataset google',
data: prices[1].price
}
]
}
});
}
}
Here, a very basic example:
<script>
export default {
async mounted() {
await this.$nextTick();
const ctx = document.getElementById("myChart");
this.chart = new Chart(ctx, {
type: "line",
data: {
labels: [],
datasets: [],
},
});
},
data() {
return {
selected: "",
chart: null,
options: [
{ text: "msft", value: "msft" },
{ text: "GOOGL", value: "GOOGL" },
],
};
},
watch: {
selected: function () {
this.getPrice();
},
},
methods: {
async getPrice() {
let { data } = await axios.get("https://site/....");
this.chart.data.datasets = [{ label: "dummy data" , data: [2, 3, 4]}];
this.chart.data.label = [1, 2, 3];
this.chart.update(); //very important, always update it
},
},
};
</script>
You create a property called chart and save your chart to it.
Then, after you fetch your data, you can access your chart with this.chart and then you set your datasets and labels. Whenever you make an change to the chart, use this.chart.update() to update it on the browser.
If you execute this code, you should see some dummy data in the chart
I am using vue-chartjs to create charts for my application. I am passing the chartData as a prop. My chart doesn't render at first but does when I resize the window. Here is my code. First the chart component:
<script>
import { Doughnut, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
extends: Doughnut,
mixins: [reactiveProp],
mounted() {
this.render();
},
methods: {
render() {
console.log(this.chartData)
let options = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
};
this.renderChart(this.chartData, options);
},
},
};
</script>
Now here is the code from the component where the chart is displayed:
template part
<v-container>
<ProjectDoughnutChart :chart-data="chartData" />
</v-container>
script part
components: {
ProjectDoughnutChart,
},
data() {
return {
chartData: {
labels: [],
datasets: [
{
backgroundColor: [],
hoverBackgroundColor: [],
data: [],
},
],
},
};
},
setChartsTimesheets() {
this.timesheets.forEach((timesheet) => {
let typeTotal = 0;
this.timesheets
.filter((timesheet1) => timesheet1.type==timesheet.type)
.forEach((timesheet1) => {
typeTotal+=timesheet1.billableAmount;
});
if (this.chartData.labels.indexOf(timesheet.type) === -1) {
let colors = this.getTaskColors(timesheet.type);
this.chartData.labels.push(timesheet.type);
this.chartData.datasets[0].data.push(typeTotal);
this.chartData.datasets[0].backgroundColor.push(colors.color);
this.chartData.datasets[0].hoverBackgroundColor.push(colors.hover);
}
});
},
Solved the problem using a similar solution as "Chart with API data" from the documentation.
TL;DR: Adding a v-if on the chart
For people, that have similar problem, but not using vue.js or the official solution doesnt cut it. I had to chart.update() the graph to show values, that were added after the graph was created.
See the example. If you comment the chart.update() line, the graph will not refresh until the window is resized.
let chart = new Chart(document.getElementById("chart"), {
type: "line",
data: {
labels: ["a", "b", "c", "d", "e", "f"],
datasets: [{
label: 'Dataset 1',
data: [1, 5, 12, 8, 2, 3],
borderColor: 'green',
}]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
stacked: false,
responsive: true,
}
});
// adding data to graph after it was created (like data from API or so...)
chart.data.labels.push("new data");
chart.data.datasets[0].data.push(9);
// with chart.update(), the changes are shown right away
// without chart.update(), you need to resize window first
chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>
I am using https://github.com/r3code/vue-vis-network
I am getting error: Cannot read property 'hasChildNodes' of undefined
My component code is:
<template>
<el-container >
<el-main>
<network ref="network" :nodes="nodes" :edges="edges" :options="options"> </network>
<button #click="get_data">GetData</button>
</el-main>
</el-container>
</template>
<script>
export default {
components: { Notification },
data () {
return {
nodes: [],
edges: [],
options: []
}
},
methods:
{
get_data()
{
axios.get(base_url + '/graph')
.then((response) => {
this.nodes = response.data.nodes;
this.edges = response.data.edges;
}).catch((error) => { console.log(error); });
}
},
}
</script>
index.js:
Vue.component('network', new vueVisNetwork.Network);
I suppose that there is problem that it's attempt to access to data placed in #app. How I can say him that he should use data declared in component?
Actual data example:
nodes : [
{id: 1, label: 'Fooo"', group: "company"},
{id: 2, label: 'Baaar', group: "owner"},
],
edges : [
{from: 1, to: 2},
],
possible related issue https://github.com/crubier/react-graph-vis/issues/57
I use the highcharts-vue wrapper (https://github.com/highcharts/highcharts-vue) to display a chart in my project. Now I'm dynamically adding new data to the already existing data.
(Originally I believe the addPoint function is used, but I already switched to pushing it to the series array.)
Now when I add one more element to data the selected/displayed range stays the same, but I wish to set it anchored to the right, so the new pushed data point appears (without having to shift the selected range manually).
In this highcharts example it's very much what I need, except for it not updating automatically at an interval, but on clicking a button.
https://www.highcharts.com/stock/demo/dynamic-update
I thought, I could work around it by using setExtremes on xAxis, but I get an error, that xAxis doesn't exist. Something like in this example.
http://jsfiddle.net/wkBwW/16/
So I think it's because I have to change the values differently or call an update differently because of the wrapped version.
<template>
<div class="chartcard">
<highcharts :constructor-type="'stockChart'" :options="chartOptions" ></highcharts>
<button v-on:click="addPoint" key="nextbutton"> add data </button>
</div>
</template>
<script>
import chartdatajson from "../assets/chart_data.json"
import {Chart} from 'highcharts-vue'
import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'
stockInit(Highcharts);
let groupingUnits = [['week', [1]], ['month', [1]]];
function getOhlcAndVolume(data) {
...
}
let dataOhlcVolume = getOhlcAndVolume(chartdatajson);
export default {
name: 'ChartCard',
props: {
},
components: {
highcharts: Chart
},
methods: {
rescale: function(){
this.chartOptions.rangeSelector.selected = 0;
},
addPoint: function() {
let somedata = this.test_add_data.shift();
let ohls = somedata.slice(0,5);
let volume = [somedata[0], somedata[5]];
this.chartOptions.series[0].data.push(ohls);
this.chartOptions.series[1].data.push(volume);
// this.chartOptions.xAxis.max = somedata[0]
this.chartOptions.xAxis[0].setExtremes(1554048000000 , somedata[0])
},
},
data () {
return {
test_add_data: [[1556812800000,262,265,260.5,265,30200],[1557072000000,260,260,258,259,33688],[1557158400000,259.5,263,259,262.5,25686]],
chartOptions: {
rangeSelector: {
selected: 0
},
title: { text: 'Some Title' },
yAxis: [{...
}],
xAxis: {
},
series:
[{
type: 'candlestick',
name: 'AAPL',
data: dataOhlcVolume.ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: dataOhlcVolume.volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
}
}
}
}
</script>
Check this example with setting extremes in vue app: https://codesandbox.io/s/vue-template-nutgx. As you can see setExtremes() method has to be invoked on chart.xAxis instance.
You can get chart reference following this approach:
data() {
return {
chartOptions: {
chart: {
events: {
load: (function(self) {
return function() {
self.chart = this; // saving chart reference in the component
};
})(this)
}
},
...
}
};
}
This way you can reference xAxis.setExtremes() like that:
methods: {
setNewExtremes: function() {
this.chart.xAxis[0].setExtremes(1525872600000, 1528291800000);
}
}
I'm trying to implement a datatable with mdbootstrap in vue.js.
I would like to update table data on events and when initialized but it does not work.
Template;
<div class="col-md-12">
<mdb-datatable
:data="data"
striped
bordered
/>
</div>
Script;
import { mdbDatatable } from 'mdbvue';
export default {
name: 'userManagement',
components: {
mdbDatatable
},
data() {
return {
className:"",
classList: [],
data: {
columns: [
{
label: 'Name',
field: 'className',
sort: 'asc'
}, {
label: 'ID',
field: 'id',
sort: 'asc'
}
],
rows: [
{
className: 'Tiger Nixon',
id:1
},
{
className: 'Garrett Winters',
id:2
}
]
}
}
},
methods: {
getClassList(){
var _this = this;
this.$axios.get('my_url/admin/classes').then(function (response) {
if (response.status === 200) {
_this.data.rows = [];
response.data.forEach(function (obj) {
let item = {
className: obj.className,
id: obj.id
};
_this.data.rows.push(item);
});
}
}).catch(function (err) {
alert("" + err);
});
}
},
mounted(){
this.getClassList();
},
It always shows default values, I check the data rows from console the value seems to be updated but no change on the datatable.
Any help would be appreciated.
We've found the solution for Your issue.
The new code is available here: https://mdbootstrap.com/docs/vue/tables/datatables/#external-api
Also to make sure the data is reactive it's necessary to add the following code to the Datatable component in our package:
watch: {
data(newVal) {
this.columns = newVal.columns;
},
(...)
}
It will be fixed in the next MDB Vue release.
I installed mdbvue 5.5.0 which includes the change that mikolaj described. This caused the table columns to update when changed but in order to get the rows to update too I had to add to the watch method in Datatable.vue as follows:
watch: {
data(newVal) {
this.columns = newVal.columns;
this.rows = newVal.rows;
},