vue-charts
vue-charts copied to clipboard
Multiple charts with dynamic data
Good night, i have an issue with your awesome plugin.
<canvas id="pricesChart" count="4"></canvas>
<chartjs-line target="pricesChart" :labels="pricesChart.labels" :data="pricesChart.data.min" :bind="true"></chartjs-line>
<chartjs-line target="pricesChart" :labels="pricesChart.labels" :data="pricesChart.data.max" :bind="true"></chartjs-line>
<chartjs-line target="pricesChart" :labels="pricesChart.labels" :data="pricesChart.data.avg" :bind="true"></chartjs-line>
<chartjs-bar target="pricesChart" :labels="pricesChart.labels" :data="pricesChart.data.count" :bind="true"></chartjs-bar>
data() {
return {
pricesChart: {
labels: [],
data: {
min: [],
max: [],
avg: [],
count: []
}
}
}
},
mounted() {
this.loadData();
},
methods: {
loadData() {
this.$http.post('/api/', {})
.then(response => {
this.pricesChart.labels = _.keys(response.body.prices_chart);
this.pricesChart.data.min = _.map(response.body.prices_chart, 'min_price_per_day');
this.pricesChart.data.max = _.map(response.body.prices_chart, 'max_price_per_day');
this.pricesChart.data.avg = _.map(response.body.prices_chart, 'avg_price_per_day');
this.pricesChart.data.count = _.map(response.body.prices_chart, 'ads_count');
}, error => {
// ...
});
}
}
So, i have 4 charts in one canvas, but this code renders only one of them, do you know why?
Problem solved?
@NirvanaRSX don't know, i am using another package. too many bugs here
sad
Have the same issue, i would guess :bind is loosing the reference since you assign a new array instead of modifying the initially assigned array.
Same issue here (v1.2.8), getting the following error when changing labels or pushing data:
app.a98a367….js:65077 Uncaught TypeError: Cannot read property 'parentNode' of null at Object.helpers.getMaximumWidth (app.a98a367….js:65077) at Chart.Controller.resize (app.a98a367….js:63262) at listener (app.a98a367….js:63730) at app.a98a367….js:69817
We planning on fixing this issue?
@hotrush what package did you go with?
@nhekkens this one https://github.com/apertureless/vue-chartjs