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:
- painlessly sort datasets;
- insert data in between 2 points;
- 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
Post a Comment