title: Create line chart using Google Chart API and JSON for DataTable
body: <p>javaI am trying to create a line chart using the Google Chart API. I am trying to set the data using JSON for the datatable via a AJAX post. </p>
  
  <p>I have a version working for the pie chart but I can't find out how to do it for the line chart. </p>
  
  <p>Below is how I am creating the chart with the ajax post. </p>
  
  <pre><code>function drawLineGraph()
               {
                   $.post("loadGraph.php",
                      {
                          type: "line"
                      },
                      function (result)
                      {
                          var data = new google.visualization.DataTable(result);
                          var options = {
                              title: "Line Graph Test"
                          };
  
                          var chart = new google.visualization.LineChart(document.getElementById("lineChart"));
                          chart.draw(data, options);
                      }, "json"
                  );
               }
  </code></pre>
  
  <p>Below is the code for the loadGraph.php</p>
  
  <pre><code>print json_encode(test());
  
      function test()
      {
          $array = array();
          if ($_POST['type'] == "line")
          {
              $array['cols'][] = array('type' =&gt; 'string');
              $array['cols'][] = array('type' =&gt; 'number');
  
              $temp = array();
              $array['row'][] = array('v' =&gt; (string) "20-01-13");
              $array['row'][] = array('v' =&gt; (int) 35);
              $array['row'][] = array('v' =&gt; (string) "21-01-13");
              $array['row'][] = array('v' =&gt; (int) 30);
  
          }
  }
  </code></pre>
  
  <p>Although no errors occur, the line chart is sort of displayed, but there is no line, as if the data is 0. Below is a screenshot of how the chart is being displayed</p>
  
  <p><img src="https://i.stack.imgur.com/6si8C.png" alt="Line chart not working"></p>
  
  <p>Below is the output of the JSON content.</p>
  
  <pre><code>{"cols":[{"type":"string"},{"type":"number"}],"row":[{"c":[{"v":"20-01-13"},{"v":22}]},{"c":[{"v":"21-01-13"},{"v":24}]},{"c":[{"v":"22-01-13"},{"v":27}]}]}
  </code></pre>
  
  <p>Thanks for any help you can provide.</p>
  
  <p><strong>UPDATE</strong>
  I have tried to do what @davidkonrad suggested but I am now getting a different problem. I have changed the definition of row to rows for the PHP array as follows:</p>
  
  <pre><code>    $array['cols'][] = array('type' =&gt; 'string');
      $array['cols'][] = array('type' =&gt; 'number');
  
      $array['rows'][] = array('c' =&gt; "20-01-13");
      $array['rows'][] = array('v' =&gt; 35);
      $array['rows'][] = array('c' =&gt; "21-01-13");
      $array['rows'][] = array('v' =&gt; 30);
  </code></pre>
  
  <p>But now when the graph loads I get <code>Cannot read property '0' of undefined</code> where the graph should be displayed. </p>
  
  <p>Below is how the JSON is now being generated</p>
  
  <pre><code>{"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":"20-01-13"},{"v":35},{"c":"21-01-13"},{"v":30}]}
  </code></pre>
  
  <p>I can't see how to change the array to make it match with the JSON that davidkonrad provided</p>