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)
  • #6071

    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://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    	<div id="chartContainer" style="height: 300px; width: 100;">
    	</div>
    </body>
    </html>

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

    • This topic was modified 7 years, 6 months ago by Amit. Reason: typo
    • This topic was modified 3 weeks, 2 days ago by Manoj Mohan.
    • This topic was modified 3 weeks, 2 days ago by Manoj Mohan.
    #6073

    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.