How to push datasets dynamically for chart.js (bar chart)?

Question

Im using chartjs (bar chart) to display some data. Im trying to dynamically add data to datasets array but its not working.

for example, lets say I have 2 objects in datasets array, and I dynamically creating this object and trying to push him into datasets (from Chrome console) after the page loaded and chart is already up.

var e = {
                fillColor : "#efefef",
                strokeColor : "#efefef",
                highlightFill: "#efefef",
                highlightStroke: "#efefef",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }

and then

barChartData.datasets.push(e)

I also tried to do window.myBar.update() but again nothing happend.

Do you know this issue? Thanks,

Answer 1

I don't think you can use addData to add a series - it's for adding points / bars to existing series.

However you can insert your new series directly into the chart object. With the chart object and new dataset like so

var ctx = document.getElementById("chart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data);

var myNewDataset = {
    label: "My Second dataset",
    fillColor: "rgba(187,205,151,0.5)",
    strokeColor: "rgba(187,205,151,0.8)",
    highlightFill: "rgba(187,205,151,0.75)",
    highlightStroke: "rgba(187,205,151,1)",
    data: [48, 40, 19, 86, 27, 90, 28]
}

the code to insert a new dataset would be

var bars = []
myNewDataset.data.forEach(function (value, i) {
    bars.push(new myBarChart.BarClass({
        value: value,
        label: myBarChart.datasets[0].bars[i].label,
        x: myBarChart.scale.calculateBarX(myBarChart.datasets.length + 1, myBarChart.datasets.length, i),
        y: myBarChart.scale.endPoint,
        width: myBarChart.scale.calculateBarWidth(myBarChart.datasets.length + 1),
        base: myBarChart.scale.endPoint,
        strokeColor: myNewDataset.strokeColor,
        fillColor: myNewDataset.fillColor
    }))
})

myBarChart.datasets.push({
    bars: bars
})

myBarChart.update();

Fiddle - http://jsfiddle.net/pvak6rkx/ (inserts the new dataset after 3 seconds)