Home Forums Chart Support Updating multiple dynamic graphs

Updating multiple dynamic graphs

Viewing 3 posts - 1 through 3 (of 3 total)
  • #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.