how to update datas in Multiple Chart?

[si262001]

I tried with two ways: 1、 copy from demo:

<canvas id="mix3" count="2"></canvas>
 <chartjs-line target="mix3" :data="first_data" :bind="true"></chartjs-line>
 <chartjs-line target="mix3" :data="second_data" :labels="mylabels" :bind="true"></chartjs-bar>
 <script>
 Vue.use(VueCharts);
 const app = new Vue({
     el: '#mix3',
     data:{
         first_data : [70, 40, 55, 80, 55],
         second_data : [20, 30, 20, 10, 5],
         mylabels : ['A', 'B', 'C', 'D', 'E'],
     },
 });
 </script>

no display!!!

2、

<canvas id="mix3" count="2"></canvas>
 <chartjs-line id="line1" target="mix3" :data="num" :bind="true"></chartjs-line>
 <chartjs-line id="line2" target="mix3" :data="num" :labels="mylabels" :bind="true" :backgroundcolor="'red'" :bordercolor="'red'"></chartjs-line>
 <script>
 Vue.use(VueCharts);
 const line1 = new Vue({
     el: '#line1',
     data:{
         num : [70, 40, 55, 80, 55]
     },
 });
 const line2 = new Vue({
     el: '#line2',
     data:{
         num : [20, 30, 20, 10, 5],
         mylabels : ['A', 'B', 'C', 'D', 'E'],
     },
 });
 </script>

when I changed line2.num=[10, 10, 10, 10, 10], line1(blue) auto renderd, line2 no change

[GimmyHchs]

1. the reason why no display <chartjs-line target="mix3" :data="second_data" :labels="mylabels" :bind="true"></chartjs-bar> line or bar component?

2. [Bug] when I changed line2.num=[10, 10, 10, 10, 10], line1(blue) auto renderd, line2 no change.

[si262001]

<chartjs-line target="mix3" :data="second_data" :labels="mylabels" :bind="true"></chartjs-line>

line component

[c-agam]

this bug has been fixed?

[NirvanaRSX]

Problem solved?

[meodai]

the :bind="true" worked for me, but it feels strange. Should data binding not be a default? I mean its vue.js everything is super reactive to the date, except for those charts? ;) I would do it the other way around.

[ortizvinicius]

Hello, i am using this library, and i wrote this code for a doughnut chart:

<chartjs-doughnut
  :height="100"
  :scalesdisplay="false"
  :bind="true"
  :labels="['A', 'B', 'C']"
  :datasets="[{
    data: [a.val, b.val, c.val],
    borderWidth: [0, 0, 0],
    backgroundColor: ['#2AA806', '#FF9917', '#FF4D4D']
  }]"
  :option="{
    cutoutPercentage: 75,
    legend: { display: false },
    maintainAspectRatio: false
  }">
</chartjs-doughnut>

But, for eg., when I change the value of a.val, the chart do the render animation, but its values dont change.

[mech01nc01]

same Problem here, i have 2 chartjs-line, both set to bind=true but only the first gets updated

[mech01nc01]

tried aproach from ortizvinicius, could be the solution if only the Graphs would Show up ^^

<chartjs-line :bind="true" :datasets="chartData" :labels="chartLabels"></chartjs-line>

and:

computed:{
        chartLabels:function()
        {
            return this.getChartLabels(this.statistikData,'uid');
        },
        chartData:function()
        {
            return [
                {
                    data:this.getChartData(this.statistikData,'summeauftk'),
                    label:this.lang_abgang,
                },
                {
                    data:this.getChartData(this.statistikData,'tkverkauft'),
                    label:this.lang_zulauf
                }
            ];
        }
    },

if i initialize data with some data, it works, but the data won't be updated if the data has been loaded via Ajax

EDIT: ok, not the best solution, but: <chartjs-line :bind="true" :datasets="chartData" :labels="chartLabels" ref="chart"></chartjs-line>

watch:
    {
        chartData:function()
        {
            this.$refs.chart.chart_data.datasets=this.chartData;
        }
    },

works for me

[ortizvinicius]

Hi, it's been a year since I post this, but if I remember right, I could not get this working, so I ended by using the vanilla ChartJs with an update method to refresh the chart data.

      renderCharts: function renderCharts(){

        var self = this;
        var sensorReadingsChartCanvas = dom.getElementById('sensorReadings-chart');

        if(sensorReadingsChartCanvas){
          sensorReadingsChartCanvas = sensorReadingsChartCanvas.getContext('2d');

          this.readingsChart = new Chart(sensorReadingsChartCanvas, {
            type: 'line',
            data: {
              labels: self.sensor.records.map(function sensorRecordsMap(record){
                return g.moment(record.date).format("D/M h") + 'h';
              }),
              datasets: [{
                label: 'Leitura (°C)',
                data: self.sensor.records.map(function sensorRecordsMap(record){
                  return Number(record.reading);
                }),
                borderColor: c.colors.primary,
                pointBackgroundColor: c.colors.default,
                fill: false,
              }]
            },
            options: {
              maintainAspectRatio: false,
              legend: {
                display: false
              }
            }
          });
        }
      },

      updateCharts: function updateCharts(){
        if(this.readingsChart){
          this.readingsChart.data.labels = this.sensor.records.map(function sensorRecordsMap(record){
            return g.moment(record.date).format("D/M h") + 'h';
          });
          this.readingsChart.data.datasets[0].data = this.sensor.records.map(function sensorRecordsMap(record){
            return record.reading;
          });
          this.readingsChart.update();
        }
        return true;
      }