Home forums Report Bugs IE9 SCRIPT438 error

Tagged: 

This topic contains 7 replies, has 2 voices, and was last updated by  Sunil Urs 3 years, 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #5243

    vocality
    Participant

    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

    #5245

    Sunil Urs
    Keymaster

    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().

    #5246

    vocality
    Participant

    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

    #5247

    Sunil Urs
    Keymaster

    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.

    #5248

    vocality
    Participant

    Hi Sunil –

    The browser mode is IE9
    The document mode is IE9 Standards

    Thanks,

    Paul

    #5249

    Sunil Urs
    Keymaster

    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?

    #5252

    vocality
    Participant

    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>

    #5253

    Sunil Urs
    Keymaster

    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 < !DOCTYPE html> 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)

You must be logged in to reply to this topic.