Creating a line chart using the Google Chart API and JSON for a DataTable

Question

javaI is trying to create a line chart using the Google chart API. I am trying to set data using JSON to write data through an AJAX post.

I have a version working for a pie chart, but I can’t find out how to do this for a line chart.

The following shows how I create a diagram with an ajax message.

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" ); } 

Below is the code for loadGraph.php

 print json_encode(test()); function test() { $array = array(); if ($_POST['type'] == "line") { $array['cols'][] = array('type' => 'string'); $array['cols'][] = array('type' => 'number'); $temp = array(); $array['row'][] = array('v' => (string) "20-01-13"); $array['row'][] = array('v' => (int) 35); $array['row'][] = array('v' => (string) "21-01-13"); $array['row'][] = array('v' => (int) 30); } } 

Despite the absence of errors, the line diagram looks like it is displayed, but there is no line, as if the data were equal to 0. Below is a screenshot of how the diagram is displayed.

The following is the output of the JSON content.

 {"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}]}]} 

Thanks for any help you can provide.

UPDATE I tried to do what @davidkonrad suggested, but now I have a different problem. I changed the string definition to strings for a PHP array as follows:

  $array['cols'][] = array('type' => 'string'); $array['cols'][] = array('type' => 'number'); $array['rows'][] = array('c' => "20-01-13"); $array['rows'][] = array('v' => 35); $array['rows'][] = array('c' => "21-01-13"); $array['rows'][] = array('v' => 30); 

But now, when the graph loads, I get Cannot read property '0' of undefined , where the graph should be displayed.

The following shows how JSON is now created.

 {"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":"20-01-13"},{"v":35},{"c":"21-01-13"},{"v":30}]} 

I do not see how to change the array to match the JSON that davidkonrad provided

Answer 1

The problem is a very small typo. In JSON row should be rows .

For example, changing the JSON example to

 var result = { "cols":[ {"type":"string"}, {"type":"number"}], "rows":[ {"c":[{"v":"20-01-13"}, {"v":22}]}, {"c":[{"v":"21-01-13"}, {"v":24}]}, {"c":[{"v":"22-01-13"}, {"v":27}]} ]}; 

and your code works:

Update

See JavaScript Literal Designer Data Format. Parameters You need to wrap each section “c” in brackets and also skip “v” (value indicator) for the first column.

Your updated JSON test is

 "cols": [ {"type":"string"},{"type":"number"} ], "rows":[ {"c":"20-01-13"},{"v":35}, {"c":"21-01-13"},{"v":30} ] } 

gives "cannot read 0 from undefined" because it must be

 { "cols":[ {"type":"string"},{"type":"number"} ], "rows":[ {"c": [{ "v": "20-01-13"},{"v":35} ]}, {"c": [{ "v": "21-01-13"},{"v":30} ]} ] } 

graph:

Hope this helps!

Absolutely Final Update

Modified PHP, which, together with json_encode displays data in the correct Google chart format:

 function test() { $array = array(); $array['cols'][] = array('type' => 'string'); $array['cols'][] = array('type' => 'number'); //HERE you have the difference $array['rows'][]['c'] = array( array('v' => "20-01-13"), array('v' => 35) ); $array['rows'][]['c'] = array( array('v' => "21-01-13"), array('v' => 30) ); return json_encode($array); } 

exits

 {"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":[{"v":"20-01-13"},{"v":35}]},{"c":[{"v":"21-01-13"},{"v":30}]}]} 

which leads to the graph above