chart.js - How can I sort, insert in between and update full dataset in chartjs? -


i have few issues chartjs simple update method won't solve.

i wonder if there option to:

  1. painlessly sort datasets;
  2. insert data in between 2 points;
  3. reload whole chart without replacing canvas new chart?

there no option built in, pretty easy write own using adddata, removedata methods chart.js provides.

var mybarchartmethods = {     // sort dataset     sort: function (chart, datasetindex) {         var data = []         chart.datasets.foreach(function (dataset, i) {             dataset.bars.foreach(function (bar, j) {                 if (i === 0) {                     data.push({                         label: chart.scale.xlabels[j],                         values: [bar.value]                     })                 } else                      data[j].values.push(bar.value)             });         })          data.sort(function (a, b) {             if (a.values[datasetindex] > b.values[datasetindex])                 return -1;             else if (a.values[datasetindex] < b.values[datasetindex])                 return 1;             else                 return 0;         })          chart.datasets.foreach(function (dataset, i) {             dataset.bars.foreach(function (bar, j) {                 if (i === 0)                     chart.scale.xlabels[j] = data[j].label;                 bar.label = data[j].label;                 bar.value = data[j].values[i];             })         });         chart.update();     },     // reload data     reload: function (chart, datasetindex, labels, values) {         var diff = chart.datasets[datasetindex].bars.length - values.length;         if (diff < 0) {             (var = 0; < -diff; i++)                 chart.adddata([0], "");         } else if (diff > 0) {             (var = 0; < diff; i++)                 chart.removedata();         }          chart.datasets[datasetindex].bars.foreach(function (bar, i) {             chart.scale.xlabels[i] = labels[i];             bar.value = values[i];         })         chart.update();     } } 

which call (where mybarchart chart)

// sort mybarchartmethods.sort(mybarchart, 0) // reload - same number of values mybarchartmethods.reload(mybarchart, 0, ["j", "f", "m", "a", "m", "j", "j"], [1, 2, 3, 4, 5, 6, 7]) // reload - more values mybarchartmethods.reload(mybarchart, 0, ["j", "f", "m", "a", "m", "j", "j", "a"], [1, 2, 3, 4, 5, 6, 7, 8]) // reload - less values mybarchartmethods.reload(mybarchart, 0, ["j", "f", "m", "a", "m"], [1, 2, 3, 4, 5]) 

inserting 2 points special case of reload, can use same function (or write own based on easily)


fiddle - http://jsfiddle.net/lkdxxkfa/


Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -