Home › Forums › Chart Support › Updating multiple dynamic graphs

Updating multiple dynamic graphs

Viewing 3 posts - 1 through 3 (of 3 total)
  • February 19, 2019 at 2:28 pm #24383

    kishores

    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>
    February 22, 2019 at 12:08 am #24431

    Indranil

    @kishores,

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

    ___________
    Indranil Deo,
    Team CanvasJS

    March 1, 2019 at 7:16 pm #24513

    Indranil

    @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.