title: Confused by Google Chart from Database
body: <p>May be I am asking more, but  had created a simple Chart from GoogleCharts.
  The issue is that I have to manually enter the values, which I want to populate from the Database. I know that there is JSON to do that but I have wasted my 4 hours struggling.
  The Code is  : </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
      &lt;title&gt;
        Google Visualization API Sample
      &lt;/title&gt;
      &lt;script type="text/javascript" src="//www.google.com/jsapi"&gt;&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 drawVisualization() {
          // Create and populate the data table.
          var data = google.visualization.arrayToDataTable([
            ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
            ['A',   1,       1,           0.5],
            ['B',   2,       0.5,         1],
            ['C',   4,       1,           0.5],
            ['D',   8,       0.5,         1],
            ['E',   7,       1,           0.5],
            ['F',   7,       0.5,         1],
            ['G',   8,       1,           0.5],
            ['H',   4,       0.5,         1],
            ['I',   2,       1,           0.5],
            ['J',   3.5,     0.5,         1],
            ['K',   3,       1,           0.5],
            ['L',   3.5,     0.5,         1],
            ['M',   1,       1,           0.5],
            ['N',   1,       0.5,         1]
          ]);
  
          // Create and draw the visualization.
          new google.visualization.LineChart(document.getElementById('visualization')).
              draw(data, {curveType: "function",
                          width: 500, height: 400,
                          vAxis: {maxValue: 10}}
                  );
        }
  
  
        google.setOnLoadCallback(drawVisualization);
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body style="font-family: Arial;border: 0 none;"&gt;
      &lt;div id="visualization" style="width: 500px; height: 400px;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  ​
  </code></pre>
  
  <p>Now I wan the data to be fetched from my database instead of manually writting it. For this I had created a PHP File and to fetch the data from the MySQL DB.</p>
  
  <pre><code>mysql_connect("localhost","root","");
  mysql_select_db("db_graph");
  
  $return_arr = array();
  $fetch = mysql_query("SELECT * FROM tbl_graph"); 
  </code></pre>
  
  <p>Any sort of help is appreciated!</p>