Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js chart.update() method is not doing anything

I am working with Chart.js. I have a chart that can display the data. I also have different datasets that I would like to interchange on a button press. All the datasets are in an array and should just be interchanged with my method. Once I changed all the values, I call the update() method. Nothing happens!

I have checked the content of char.data.datasets.data and it does in fact contain the current data. The only thing is, that Chart.js does not seem to want to update.

What am I missing here?

The function that updates the chart:

let getValues = function(dataset, label)
{
  return firebase.database().ref("/data/" + dataset).once("value").then(function(snapshot)
  {
    var amazon = snapshot.val().Amazon;
    var google = snapshot.val().Google;
    var facebook = snapshot.val().Facebook;
    var twitter = snapshot.val().Twitter;


    chart.data.datasets.data = [];
    chart.data.labels = [];
    chart.data.datasets.label = null;

    chart.data.datasets.data = [amazon, google, facebook, twitter];
    chart.data.labels = names;
    chart.data.datasets.label = label;
    chart.update();
    console.log(chart.data.datasets.data);
  });
}

If you need any more information please let me know.

like image 994
Marc Blaesche Avatar asked Aug 12 '17 14:08

Marc Blaesche


People also ask

What is CTX in chart JS?

js convention is to call it ctx . An object literal containing the data and the configuration options that Chart. js will use to build your chart. The required properties are type and data . In our example type is 'line' because we want a line chart.

Is Chart JS free to use?

js is a free, open-source JavaScript library for data visualization, which supports eight chart types: bar, line, area, pie (doughnut), bubble, radar, polar, and scatter.

Can I use chart JS in angular?

Chart. js comes with built-in TypeScript typings and is compatible with all popular JavaScript frameworks including React , Vue , Svelte , and Angular .


1 Answers

chart.data.datasets is an array of datasets, not a single dataset. datasets does not have its own data and label attributes. Rather, each individual dataset in the array has its own data and label attributes. You therefore cannot do datasets.data or dataset.label.

If you want to update the data or label variable of a specific dataset, you need to select that object from the array. To select the first dataset, simply use datasets[0]:

chart.data.datasets[0].data = [amazon, google, facebook, twitter];
chart.data.datasets[0].label = label;

If you want to update all datasets, use a forEach loop to iterate through the array:

chart.data.datasets.forEach((dataset) => {
    dataset.data = [amazon, google, facebook, twitter];
    dataset.label = label;
});

Two more points:

One other possible problem is that the names variable is not initialized anywhere, though it could be that you just didn't include that part of the code in your question.

Also, why do you have the following three lines of code, if you just reassign all the values in the next three lines of code?

chart.data.datasets.data = [];
chart.data.labels = [];
chart.data.datasets.label = null;
like image 80
Tot Zam Avatar answered Oct 02 '22 07:10

Tot Zam