FORUMS

Select any forum below to ask question

Home › Forums › Report Bugs › IE9 SCRIPT438 error

IE9 SCRIPT438 error

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

Tagged: 

  • September 13, 2013 at 1:21 pm #5243

    vocality

    I cannot get IE9 to display charts with the v1.2.1 canvasjs library.
    I see the following error from the IE9 developer tools:

    SCRIPT438: Object doesn’t support property or method ‘getContext’

    canvasjs.min.js, line 25 character 361

    This relates to the following line:

    this.ghostCtx=this.ghostCanvas.getContext(“2d”)

    Works OK in IE10

    September 13, 2013 at 1:26 pm #5245

    Sunil Urs

    Can you please post a sample HTML + JS code that can reproduce the issue? This issue normally happens when chart is not able to get hold of the container element. Please Make sure that you creating the chart inside onload or jQuery’s $(document).ready().

    September 13, 2013 at 2:04 pm #5246

    vocality

    Hi Sunil –

    Here is the code – it is auto-generated from our embedded system – I’ve tried to tidy it up a little to make it more readable:

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type=”text/javascript”>
    window.onload = function () {
    var l1dps = [{x: 0, y: 0},];
    var chart = new CanvasJS.Chart(“chartContainer0”,{
    title :{
    text: “Test Chart 1 ”
    },
    zoomEnabled: true, panEnabled: true,
    axisX: {
    title: “Time”,
    valueFormatString: “HH:mm:ss”},
    axisY: {
    title: “”
    },
    data: [{
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    legendText: “DCHANSTATS – RxBytes(TP:0)”,dataPoints : l1dps
    }]
    });

    loadCSV(“chart0.csv”);
    chart.render();
    function loadCSV(file) {
    if (window.XMLHttpRequest) {
    var request = new XMLHttpRequest();
    }
    else {
    var request = new ActiveXObject(‘Microsoft.XMLHTTP’);
    }
    request.open(‘GET’, file, false);
    request.send();
    parseCSV(request.responseText);
    }
    function parseCSV(data){
    var rows = data.split(“\n”);
    var now = new Date();
    for (var i = 0; i < rows.length; i++){
    if (rows[i]) {
    var column = rows[i].split(“,”);
    var xVal, yVal;if (column[1]){
    xVal = parseInt(column[0],16);
    yVal = parseInt(column[1],16);
    xVal = now-(xVal*1000);
    l1dps.push({x: xVal,y: yVal,});
    if (l1dps.length > 360)
    {
    l1dps.shift();
    }
    }
    }
    }
    }
    var updateChart = function(){
    loadCSV(“chart0.csv”);
    chart.render();
    };
    setInterval(function(){updateChart()},5000 );
    }
    </script>
    <script type=”text/javascript” src=”canvasjs.min.js”></script>
    </head>
    <body>
    <div id=”chartContainer0″ style=”height: 450px; width: 100%”>
    </div>
    </body>
    </html>

    The CSV file

    September 13, 2013 at 3:18 pm #5247

    Sunil Urs

    In developer tools can you please verify that the Browser Mode is “IE9” & Document Mode is “IE9 Standards”. I could reproduce this issue when Document Mode is set to “IE8 Standards”. This happens because IE8 doesn’t support canvas element.

    September 13, 2013 at 4:05 pm #5248

    vocality

    Hi Sunil –

    The browser mode is IE9
    The document mode is IE9 Standards

    Thanks,

    Paul

    September 13, 2013 at 5:40 pm #5249

    Sunil Urs

    it is auto-generated from our embedded system – I’ve tried to tidy it up a little to make it more readable:

    I tried this code by creating a csv file with some dummy data and its working fine on IE9. I think something got fixed while tidying up the code. Can you please test this code on your side. In order to figure out the problem I need a single HTML file that can reproduce the bug. And which OS are you using?

    September 13, 2013 at 7:00 pm #5252

    vocality

    Hi Sunil –

    This is running on Windows7 – I’ve played a little more – I can get the chart working if I open it in a separate tab – however I see the error if the chart is embedded in a frame….

    <html>
    <head>
    <link rel=”stylesheet” type=”text/css” href=”style.css”/>
    <title>V50</title>
    </head>
    <frameset rows=”56px,85%”>
    <frame src=”header.html” noresize frameborder=”0″/>
    <frameset cols=”264px,*”>
    <frame src=”dmap.html” name=”map” border=”0″ noresize frameborder=”0″/>
    <frame src=”chart.html” name=”menu” noresize frameborder=”0″/>
    </frameset>
    </frameset>
    </html>

    chart.html:

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type=”text/javascript”>
    window.onload = function () {
    var l1dps = [{x: 0, y: 0},];
    var l2dps = [{x: 0, y: 0},];
    var l3dps = [{x: 0, y: 0},];
    var l4dps = [{x: 0, y: 0},];
    var chart = new CanvasJS.Chart(“chartContainer0”,{
    title :{
    text: “Test Chart 1 ”
    },
    zoomEnabled: true, panEnabled: true,
    axisX: {
    title: “Time”,
    valueFormatString: “HH:mm:ss”},
    axisY: {
    title: “”
    },
    data: [{
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    legendText: “DCHANSTATS – RxBytes(TP:0)”,dataPoints : l1dps
    }]
    });

    loadCSV(“chart0.csv”);
    chart.render();
    function loadCSV(file) {
    if (window.XMLHttpRequest) {
    var request = new XMLHttpRequest();
    }
    else {
    var request = new ActiveXObject(‘Microsoft.XMLHTTP’);
    }
    request.open(‘GET’, file, false);
    request.send();
    parseCSV(request.responseText);
    }
    function parseCSV(data){
    var rows = data.split(“\n”);
    var now = new Date();
    for (var i = 0; i < rows.length; i++){
    if (rows[i]) {
    var column = rows[i].split(“,”);
    var xVal, yVal;if (column[1]){
    xVal = parseInt(column[0],16);
    yVal = parseInt(column[1],16);
    xVal = now-(xVal*1000);
    l1dps.push({x: xVal,y: yVal,});
    if (l1dps.length > 360)
    {
    l1dps.shift();
    }
    }
    }
    }
    }
    var updateChart = function(){
    loadCSV(“chart0.csv”);
    chart.render();
    };
    setInterval(function(){updateChart()},5000 );
    }
    </script>
    <script type=”text/javascript” src=”canvasjs.min.js”></script>
    </head>
    <body>
    <div id=”chartContainer0″ style=”height: 450px; width: 100%”>
    </div>
    </body>
    </html>

    September 13, 2013 at 7:32 pm #5253

    Sunil Urs

    Paul,

    Framesets have been deprecated and are not supported in HTML5 any more. When I tried this code, IE9 automatically switched to Quirks mode (to support the same probably) and threw error. In Quirks mode Canvas is not supported probably.

    In my case adding to the top of page containing frameset fixed the issue. But it is not suggested to use framesets anymore.

    If required, you should instead use iframe

    –
    Sunil

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

Tagged: 

You must be logged in to reply to this topic.