Home forums Using CanvasJS Dynamic chart updates with flicket in IE9

This topic contains 1 reply, has 2 voices, and was last updated by  Sunil Urs 2 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #6071

    Amit
    Participant

    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=”http://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 2 years, 9 months ago by  Amit. Reason: typo
    #6073

    Sunil Urs
    Keymaster

    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.