title: How to populate Google chart API dynamically
body: <p>I am trying to create a Google line chart using their API and JSON.</p>
  
  <p>Hard coded, this chart works:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  
    function drawChart() {
  
      var data = google.visualization.arrayToDataTable([
        ['Date', 'Sales'],
        ['Jun 25',  12.25],
        ['Jun 26',  8.00],
        ['Jun 27',  20.50]
        ['Jun 28',  12.75]
      ]);
  
      var options = {
  
      };
  
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>However, trying to populate it using JSON, I can not get this to work:</p>
  
  <pre><code>&lt;?php
  
  $data = array();
  $data["Date"] = "Sales";
  $data["Jun 25"] = "12.25";
  $data["Jun 26"] = "8.00";
  $data["Jun 27"] = "20.50";
  $data["Jun 28"] = "12.75";
  $data = json_encode($data);
  
  ?&gt;
  
  &lt;script type="text/javascript"&gt;
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  
    function drawChart() {
  
      var data = google.visualization.arrayToDataTable(&lt;?php echo $data; ?&gt;);
  
      var options = {
  
      };
  
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm obviously not encoding the array correctly. Google has an example page on how to populate their charts with JSON data here: <a href="https://developers.google.com/chart/interactive/docs/php_example" rel="nofollow">https://developers.google.com/chart/interactive/docs/php_example</a></p>
  
  <p>However, I could not find any examples for how to setup the JSON data with a simple line chart like this.</p>