CODEWITHSUNDEEP
javascriptchartsrender
GhostDede
GhostDede

Reputation: 446

How to Redraw chart in JavaScript

I have application which needs to update the chart with the javascript. To do that I have created for loop. However It does not do that.

What is wrong with my code.

Any help is appreciated. Thank You.

JavaScript

plot = function() {

var array = {{preds}}
var classes = {{classes | safe}}


var path2 = "{{imgPut}}"

var img = document.createElement("img");
img.src = path2;

var src = document.getElementById("putimg");
src.appendChild(img);

for (var i = 0; i < array.length;i++) {
    var preds = array[i];
    console.log(preds)
    var chart = new CanvasJS.Chart("chartContainer", {

        theme: "light2", // "light1", "light2", "dark1", "dark2"
        exportEnabled: true,
        animationEnabled: true,
        title: {
            text: "Analysis Result"
        },
        data: [{
            type: "bar",
            legendText: "{label}",
            indexLabelFontSize: 16,
            indexLabel: "{label} - {y}%",
            dataPoints: [
                {y: preds[0], label: classes[0]},
                {y: preds[1], label: classes[1]},
                {y: preds[2], label: classes[2]},
                {y: preds[3], label: classes[3]},
            ]
        }]
    });
    chart.render();


    demo();
    console.log("After Sleep")


    //chart.update(); 
}

I have tried the chart update as the other answer to the StackOverFlow questions suggested. However I cannot do it, it gives an error.

Upvotes: 1

Views: 72

Answers (1)

Mahdi Amiri
Mahdi Amiri

Reputation: 349

chart.options.title.text = "Updated Chart Title";

chart.options.data[0].dataPoints.push({y: 23}); // Add a new dataPoint to dataPoints array

chart.options.data[0].dataPoints[3].y = 27;  // Update an existing dataPoint

chart.options.title.text = "Updates Chart Title";

chart.options.data = [array]; // Set Array of dataSeries

chart.options.data[0] = {object}; // Set/Replace dataSeries

chart.options.data.push({object}); // Add a new dataSeries

chart.options.data[0].dataPoints = [array]; // Set/Replace dataPoints (array) of dataSeries

chart.options.data[0].dataPoints.push({y: 23}); // Add a new dataPoint to dataPoints array

chart.options.data[0].dataPoints[3] = {y: 23};  // Add/Replace a dataPoint

chart.options.data[0].dataPoints[3].y = 27;  // Update an existing dataPoint

chart.options.axisY.maximum = 60; // Set maximum of axisY

See Hear

Upvotes: 3

Related Questions