FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Dynamic chart updates with flicket in IE9

Dynamic chart updates with flicket in IE9

Viewing 2 posts - 1 through 2 (of 2 total)
  • March 9, 2014 at 7:16 pm #6071

    Amit

    I took the column chart example from your website and copy pasted the html code in a new file and put it on my web server. When i access it from Chrome it works fine, but when i access it from IE9, i see that the chart flickers on every updates, as if the whole chart is being redrawn. I have the same problem with a line chart and pie chart as well.

    Here is the code
    ===========================

    <!DOCTYPE HTML>
<html>

<head>
	<script type="text/javascript">
	window.onload = function () {
		
		//initial value of dataPoints 
		var dps = [
		{label: "boiler1", y: 206},
		{label: "boiler2", y: 163},
		{label: "boiler3", y: 154},
		{label: "boiler4", y: 176},
		{label: "boiler5", y: 184},
		{label: "boiler6", y: 122}
		];	

		var chart = new CanvasJS.Chart("chartContainer",{			
			title: {
				text: "Temperature of Each Boiler"		
			},
			axisY: {				
				suffix: " C"
			},		
			legend :{
				verticalAlign: 'bottom',
				horizontalAlign: "center"
			},
			data: [
			{
				type: "column",	
				bevelEnabled: true,				
				indexLabel: "{y} C",
				dataPoints: dps					
			}
			]
		});

		
		var updateInterval = 1000;	
		

		var updateChart = function () {

			for (var i = 0; i < dps.length; i++) {
				
				// generating random variation deltaY
				var deltaY = Math.round(2 + Math.random() *(-2-2));				
				var yVal = deltaY + dps[i].y > 0 ? dps[i].y + deltaY : 0;
				var boilerColor;


				// color of dataPoint dependent upon y value. 

				boilerColor =
				yVal > 200 ? "#FF2500":
				yVal >= 170 ? "#FF6000":
				yVal < 170 ? "#6B8E23 ":							
				null;


				// updating the dataPoint
				dps[i] = {label: "boiler"+(i+1) , y: yVal, color: boilerColor};

			};

			chart.render();
		};
		
		updateChart();		

		// update chart after specified interval 
		setInterval(function(){updateChart()}, updateInterval);


	}
	</script>
	<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
	<div id="chartContainer" style="height: 300px; width: 100;">
	</div>
</body>
</html>

    ===========================

    • This topic was modified 10 years, 6 months ago by Amit. Reason: typo
    • This topic was modified 3 years ago by Manoj Mohan.
    • This topic was modified 3 years ago by Manoj Mohan.
    March 11, 2014 at 6:34 pm #6073

    Sunil Urs

    I just tried in on IE9 and it is working fine. Did you try with actual IE9 installation or via IE10’s Browser Mode? And may I know your system configuration?

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

You must be logged in to reply to this topic.