title: Uncaught TypeError: Cannot read property 'firstChild' of null
body: <p>I'm trying to save the output of a Google Graph as an image and keep getting the error of:</p>
  
  <p>Uncaught TypeError: Cannot read property 'firstChild' of null </p>
  
  <p>Here is the javascript: </p>
  
  <pre><code>// Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});
  
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {
  var data = google.visualization.arrayToDataTable([
      ['Date', 'Impressions', 'Clicks']
      &lt;?
                  while ($arrDate = mysql_fetch_assoc($resStats)) {
                      $arrDates[] = $arrDate;
                      echo ",['".$arrDate["fdate"]."', ".($arrDate["imps"] ? $arrDate["imps"] : 0).", ".($arrDate["clicks"] ? $arrDate["clicks"] : 0)."]";
                  }
      ?&gt;
  ]);
  
  var options = {
      series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}
      },
      vAxes:{
          0: {title: 'Impressions', minValue: 0},
          1: {title: 'Clicks', minValue: 0}
      }
  };
  
  var chart = new google.visualization.LineChart(document.getElementById('chartContainer'));
  chart.draw(data, options);
  }
  
  function getImgData(chartContainer) {
  var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
  var svg = chartArea.innerHTML;
  var doc = chartContainer.ownerDocument;
  var canvas = doc.createElement('canvas');
  canvas.setAttribute('width', chartArea.offsetWidth);
  canvas.setAttribute('height', chartArea.offsetHeight);
  
  
  canvas.setAttribute(
      'style',
      'position: absolute; ' +
          'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
          'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
  doc.body.appendChild(canvas);
  canvg(canvas, svg);
  var imgData = canvas.toDataURL("image/png");
  canvas.parentNode.removeChild(canvas);
  return imgData;
  }
  
  function saveAsImg(chartContainer) {
  var imgData = getImgData(chartContainer);
  
  // Replacing the mime-type will force the browser to trigger a download
  // rather than displaying the image in the browser window.
      window.location = imgData.replace("image/png", "image/octet-stream");
  }
  
  function toImg(chartContainer, imgContainer) {
  var doc = chartContainer.ownerDocument;
  var img = doc.createElement('img');
  img.src = getImgData(chartContainer);
  
  while (imgContainer.firstChild) {
      imgContainer.removeChild(imgContainer.firstChild);
  }
  imgContainer.appendChild(img);
  }
  </code></pre>
  
  <p>The bit of PHP that's in there outputs like this: </p>
  
  <pre><code>['Date', 'Impressions', 'Clicks'],
  ['Aug 24, 2012', 2, 0],['Aug 27, 2012', 3, 0],['Aug 28, 2012', 37, 0],['Aug 29, 2012', 17, 0]
  </code></pre>
  
  <p>And here is the button and div needed:</p>
  
  <pre><code>&lt;button onclick="toImg(document.getElementById('chartContainer'), document.getElementById('img_div'));"&gt;Convert to image&lt;/button&gt;
  &lt;div id="line_div"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>THIS: <a href="http://jsfiddle.net/SCjm8/157/" rel="nofollow">http://jsfiddle.net/SCjm8/157/</a> is a tutorial that I am trying to follow but have gotten stuck. Can someone please tell me how to make it so that When I click the button in my code it generated the image and places it in the Div?</p>
  
  <p>Many Thanks</p>