title: Save google chart as image
body: <p>Why can't my code save my chart as an image? Do I have a mistake somewhere?
  Although I followed the source (found online), I still can't solve my problem.</p>
  
  <p>I can show the chart but only the problem is cannot save as an image.</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/jsapi.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      function saveAsImg(chartContainer, pngfilename) {
      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 data = canvas.toDataURL("image/png");
      canvas.parentNode.removeChild(canvas);
      data = data.substr(data.indexOf(',') + 1).toString();
  
      var dataInput = document.createElement("input") ;
      dataInput.setAttribute("name", 'imgdata') ;
      dataInput.setAttribute("value", data);
  
      var nameInput = document.createElement("input") ;
      nameInput.setAttribute("name", 'name') ;
      nameInput.setAttribute("value", pngfilename + '.png');
  
      var myForm = document.createElement("form");
      myForm.method = 'post';
      myForm.action = 'saveme.php';
      myForm.appendChild(dataInput);
      myForm.appendChild(nameInput);
  
      document.body.appendChild(myForm) ;
      myForm.submit() ;
      document.body.removeChild(myForm) ;
  
  }
  
  
  &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        google.load('visualization', '1', {packages: ['corechart']});
      &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
  
        function drawVisualizationDaily() {
          // Create and populate the data table.
          Price1=document.getElementById('Price1').value;
          Price2=document.getElementById('Price2').value;
          Price3=document.getElementById('Price3').value;
          Price4=document.getElementById('Price4').value;
          Price5=document.getElementById('Price5').value;
          Price6=document.getElementById('Price6').value;
          Price7=document.getElementById('Price7').value;
          var data = google.visualization.arrayToDataTable([
            ['Daily', 'Sales'],
            ['Mon', parseInt(Price1) ],
            ['Tue', parseInt(Price2) ],
            ['Wed', parseInt(Price3) ],
            ['Thu', parseInt(Price4) ],
            ['Fri', parseInt(Price5) ],
            ['Sat', parseInt(Price6) ],
            ['Sun', parseInt(Price7) ]
          ]);
  
          // Create and draw the visualization.
          new google.visualization.ColumnChart(document.getElementById('visualization')).
              draw(data,
                   {title:"Daily Sales",
                    width:500, height:400,
                    hAxis: {title: "Daily"}}
              );
         }  
  
  
        google.setOnLoadCallback(drawVisualizationDaily);
      &lt;/script&gt;
  
      &lt;div id="visualization" style="width: 600px; height: 400px;"&gt;&lt;/div&gt;
      &lt;script&gt;
      &lt;a href='#' onClick="saveAsImg(document.getElementById('visualization'), 'test');"&gt;Test&lt;/a&gt;
  &lt;/script&gt;
  </code></pre>