Dynamic creation of canvas tags in IE8: throw error 'this.context' is null or not an object in RGraph.line.js

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Chad Burgwald on 26th June 2014
I am dynamically creating the canvas tags to display multiple RGraph.line charts. It works in IE9, chrome and firefox but not in IE8. When the script runs I get the following error:

   'this.context' is null or not an object RGraph.line.js, line 289 character 13


When I view the elements that were created in the DOM inspector I see that the first canvas tag look like this. Which I would believe that __object__="[object Object]" is the issue.

<canvas id="cvs0" height="350" width="600" __object__="[object Object]" uid="0586d4b1-c01-4d66-aac4-f3168a24d92e" __rgraph_aa_translated__="false"/>


If the canvas tags are present when the page loads it works correctly in IE8.


Code:


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<html xmlns="www.w3.org/1999/xhtml\">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>Operations</title>
 
  <!--[if IE]>
   <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
  <![endif]-->
 
  <!--[if !IE]><!-->
   <link rel="stylesheet" type="text/css" href="not-ie.css" />
   <!--<![endif]-->
     
  <script src="javascript/rgraph/libraries/RGraph.common.core.js" ></script>
  <script src="javascript/rgraph/libraries/RGraph.common.key.js" ></script>
  <script src="javascript/rgraph/libraries/RGraph.common.effects.js" ></script>
  <script src="javascript/rgraph/libraries/RGraph.common.dynamic.js" ></script>
  <script src="javascript/rgraph/libraries/RGraph.common.tooltips.js" ></script>
  <script src="javascript/rgraph/libraries/RGraph.line.js" ></script>
  <script src="javascript/jquery-1.8.3.js" type="text/javascript"></script>
  <!--[if lt IE 9]><script src="javascript/rgraph/excanvas/excanvas.js"></script><![endif]-->
   
          <script type="text/javascript">
   function getFPYMetrics()
   {
    jQuery.ajax({
     type: "POST",
     url: "GetFirstPassYieldMetrics",
     dataType: "json",
     success: function (jsonArray) {
      // Add data timestamp
      var ja = jsonArray[0];
      var tsRoot = document.getElementById('FPYTimestamp');
      var timestamp = "Current As Of: " + ja[0].TimeStamp;
      tsRoot.innerHTML = timestamp;

       
      // create table structure for Metrics
      var root = document.getElementById('FPYMetrics');
      while(root.hasChildNodes()){
       root.removeChild(root.lastChild);
      }
     
      // create table structure
      var table = document.createElement('table');
      table.setAttribute('id', "FPYMetricTable");
     
      var colCnt = 0;
      var row = null;
      var canvasWidth = "600";
      var canvasHeight = "350";
      var elements = new Array();
      for(var i = 0; i < jsonArray.length; i++) {
       // create row and column structure
       if(colCnt == 0){
        row = document.createElement('tr');
       }
       cell = document.createElement('td');
       var metric = document.createElement('canvas');
       var elementId = "cvs" + i;
       elements.push(elementId);
       metric.setAttribute('id', elementId);
       metric.setAttribute('width',canvasWidth);
       metric.setAttribute('height',canvasHeight);
       cell.appendChild(metric);
       row.appendChild(cell);
       // add row if full
       colCnt++;
       if(colCnt > 1 || i == jsonArray.length-1){
        colCnt = 0;
        table.appendChild(row);
       }
      }
      root.appendChild(table);
     
      // graph metrics
      for(var k = 0; k < jsonArray.length; k++) {
       graphFPYMetric(elements[k], jsonArray[k]);
      }
     }
    });
   }
  
      function graphFPYMetric(id, jsonArray)
      {
       var months = new Array();
       var yields = new Array();
       var tooltips = new Array();
       var chartName = null;
                       
          //loops through rows
          for (var i = jsonArray.length-1; i >= 0; i--){
           var obj = jsonArray[i];
           if(i==jsonArray.length-1) {
            chartName = obj.Name;
           }
     months.push(obj.Date);
     var yield = obj.Yield;
     tooltips.push(yield + " [" + obj.Pass + "/" + obj.Total + "]");
     // remove % from yeild
     yield = yield.substring(0,yield.length-1);
     yields.push(parseFloat(yield));
         }
         
       var title = chartName;
       RGraph.Reset(document.getElementById(id));
          var line = new RGraph.Line(id, yields)
           .Set('labels', months)
           .Set('ymin', 0)
           .Set('ymax', 100)
           .Set('text.angle', 60)
           .Set('gutter.bottom', 80)
           .Set('gutter.left', 40)
           .Set('title', title)
           .Set('title.yaxis', 'First Pass Yield (%)')
           .Set('title.yaxis.x', 10)
           .Set('title.xaxis', 'Months')
           .Set('title.xaxis.y', 440)
           .Set('tooltips', tooltips)
           .Set('colors', ['red','blue'])
           .Set('tickmarks', ['filledcircle', ''])
           .Set('colors', ['green','blue'])
           .Set('key', ['Yield '])
     .Set('key.position.x', 60)
     .Set('key.position.y', 30)
           .Set('linewidth', 3)
           .Draw();
          document.getElementById(id).style.visibility="visible";
      }
     
  </script>
Posted by Richard on 26th June 2014
There's a note here about dynamically created canvas tags with ExCanvas:

www.rgraph.net/docs/microsoft-internet-explorer-support.html#dynamic.canvas


Richard

Add a reply




« Back to message list