You must be logged in to post your query.
Home › Forums › Chart Support › Updating multiple dynamic graphs
Tagged: #updatingMultipleGraphs
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://cdn.canvasjs.com/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>
@kishores,
We are looking into your query and will get back to you at the earliest.
___________ Indranil Deo, Team CanvasJS
Please take a look at this jsfiddle.
You must be logged in to reply to this topic. Login/Register