Chart js: Update line chart having two data sets

Question

I want to update a line chart in chart js with two data sets. I've somehow managed to empty the chart and then able to fill in one of the data set. but unable to make both data sets working. here's the code.

ajaxRequest(
    {
        url: 'reports/updateChart/?filter=true',
        method: 'post',
        data: data
    }, function (response)
        {
            /*refresh the tables with the new data sets*/
            removeData(myChart);
            let label = [1, 234, 234, 234, 234, 234, 234, 34, 234, 23, 23, 41, 3, 2, 4];
            let data = [234, 234, 5, 23, 34, 234, 234, 234],[22, 1, 123, 14, 2]
        }; addData(myChart, label, data);
    });

});

functions:

function removeData(chart) {
    chart.data.labels = [];
    chart.data.datasets.forEach((dataset) => {
        dataset.data = [];
    });
    chart.update();
}

function addData(chart, label, data) {
    $.each(label, function (index, value) {
        chart.data.labels.push(value);
    });

    chart.data.datasets.forEach((dataset) => {
        $.each(data, function (index, value) {
            dataset.data.push(value);
        });
    });
    chart.update();
}

Is `data` really two data sets? And does the single dataset that you successfully plot include all the data from both datasets? — Mawg says reinstate Monica, Oct 25 '18 at 13:21
8 plotted points from the first array. when i add second array like that it gives me an error — rakesh shrestha, Oct 25 '18 at 14:14
That's teh first time you have mentioned an error :-) Care to tell us what it says? That might help — Mawg says reinstate Monica, Oct 25 '18 at 17:30

score 3 · Accepted Answer · answered Oct 26 '18 at 03:44

3

I am not able to find out the issue with your code, but you can refer the below way of updating charts which is very similar to what you have tried but this is working. You can refer the fiddle also -> http://jsfiddle.net/cuzx3L7j/4/

Hope it helps!

function clearAndAddNewDataSets() {
  myChart.config.data.datasets = [];
  myChart.config.data.labels = [];

  var labels = ['Label1', 'Label2', 'Label3', 'Label4', 'Label5', 'Label6', 'Label8', 'Label8'];
  var data = [
    [234, 234, 5, 23, 34, 234, 234, 234],
    [22, 1, 123, 14, 2]
  ]

  var colors = ['Red', 'Green'];

  myChart.config.data.labels = labels;

  for (i = 0; i < data.length; i++) {
    var dataSet = {
      label: 'testLabel' + i,
      data: data[i],
      backgroundColor: colors[i]
    }

    myChart.config.data.datasets.push(dataSet);
  }

  myChart.update();

}

answered Oct 26 '18 at 03:44

Kunal Khivensara

1,619
14
21

Also there is no need to push value to the labels array, since your label variable is an array you can directly assign it like I have done – Kunal Khivensara Oct 26 '18 at 03:46
it helped me a lot but can you please look at this js fiddle. When i click update i want to just keep the old labels. I am getting old labels plus the new labels with extra color that is grey. I am sending two data but another array is getting pushed why? how to solve that too. https://jsfiddle.net/reyyoung/xpvt214o/906521/ – rakesh shrestha Oct 26 '18 at 07:27
Do you just want to update the data and xaxis labels? If yes -> https://jsfiddle.net/xpvt214o/906629/ – Kunal Khivensara Oct 26 '18 at 08:16
Thank you very much you have been a lot helpful – rakesh shrestha Oct 26 '18 at 10:22
kunal. Now i am stuck at a point where my data points are hidding. If i select a date range from october 1 to september 31 then the label ranges from october 1,2............31 september 31.. it skipped all the dates after october 31 resulting no data points. – rakesh shrestha Oct 26 '18 at 11:22

Chart js: Update line chart having two data sets

1 Answers1

Linked