Question

120

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

rated 0 times [ 122] [ 2] / answers: 1 / hits: 64497 / 9 Years ago, thu, june 25, 2015, 12:00:00

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,

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alessandrol

Add To Favorites

Follow

Total Points: 286

Total Questions: 107

Total Answers: 109

Location: Uzbekistan

Member since Sat, Feb 27, 2021

3 Years ago

answered 9 Years ago lucianom · Accepted Answer

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)