Home forums Using CanvasJS Updating multiple dynamic graphs

This topic contains 2 replies, has 2 voices, and was last updated by  Indranil Deo 2 weeks, 3 days ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #24383

    Hi there ,
    I am trying to add dynamic graphs on the click of a button . Currently only the latest graph shows update of data points . I want the update to be shown for all the graphs simultaneously . I believe there is a flaw in the logic of the code .Please help me . `<html>
    <head>
    <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
    <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>
    <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    </head>
    <body><!–
    <div id=”chartContainer1″ style=”height: 185px; width:100%;” align=”left”></div>
    <div id=”chartContainer2″ style=”height: 185px; width:100%;” align=”left”></div> –>
    </body>
    <script>
    var dps = [[],[],[],[],[],[],[],[],[],[]]; // dataPoints
    var xVal=[‘a’,’a’,’a’,’a’,’a’,’a’,’a’,’a’,’a’,’a’];
    var yVal=[0,0,0,0,0,0,0,0,0,0];
    var updateChart=[];
    var chart=[];
    var dataLength=10;
    var intervals=[];
    var chartCount=0;
    var chartDict=[];
    function addChart(){
    chartCount++;
    if (chartCount>10){
    console.log(chartCount);
    chartCount=1;
    alert(“Chart limit reached”);
    return ;
    }
    var name=document.getElementById(“chartName”).value;
    if (name in chartDict){
    alert(“Name already exists”);
    chartCount–;
    return ;
    }
    //console.log(“Control shouldn’t reach here”);
    var div=document.createElement(“div”);
    div.style.width=”100%”;
    div.style.height=”185px”;
    div.id=”chartContainer”+chartCount;
    //console.log(div)
    document.body.appendChild(div);
    chartDict[name]=chartCount;
    chart[chartCount]= new CanvasJS.Chart(“chartContainer”+chartCount, {
    title :{
    text: name
    },
    axisY: {
    includeZero: false,
    maximum:70
    },
    axisX:{
    valueFormatString:”hh:mm tt”
    }
    ,
    data: [{
    type: “line”,
    dataPoints: dps[chartCount]
    }]
    });
    updateChart[chartCount]= function (count) {
    count = count || 1;

    console.log(chartCount);
    for (var j = 0; j < count; j++) {
    if (typeof dps[chartCount]==’undefined’) {
    return;
    }
    dps[chartCount].push({
    x: xVal[chartCount],
    y: yVal[chartCount]
    });
    xVal[chartCount]=new Date()
    //console.log(xVal)
    //xVal++;
    }

    if (dps[chartCount].length > dataLength) {
    dps[chartCount].shift();
    }

    if(chart[chartCount])
    chart[chartCount].render();
    else
    clearInterval(intervals[chartCount]);
    };

    intervals[chartCount]=setInterval(updateChart[chartCount],1000)

    }

    function removeChart(){
    //console.log(“Delete Clicked”)
    var name=document.getElementById(“chartName”).value;
    if(name in chartDict){
    //console.log(intervals[chartDict[name+””]]);
    //console.log(chartDict[name]);
    //console.log(typeof intervals[chartDict[name]]);
    //console.log(intervals)
    clearInterval(intervals[chartDict[name]]);
    document.getElementById(“chartContainer”+chartDict[name]).outerHTML=””;
    delete chartDict[name];
    chartCount–;
    }
    else{
    alert(“Invalid name”);
    }
    }
    </script>
    <input type=”text” id=”chartName”></input>
    <button onclick=”addChart()”>ADD</button>
    <button onclick=”removeChart()”>DELETE</button>
    </html>`

    #24431

    @kishores,

    We are looking into your query and will get back to you at the earliest.

    ___________
    Indranil Deo,
    Team CanvasJS

    #24513

    @kishores,

    Please take a look at this jsfiddle.

    ___________
    Indranil Deo,
    Team CanvasJS

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.