Create line chart using Google Chart API and JSON for DataTable

Question

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.

I have a version working for the pie chart but I can't find out how to do it for the line chart.

Below is how I am creating the chart with the ajax post.

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 the 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);

        }
}

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

Line chart not working

Below 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 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:

    $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.

Below is how the JSON is now being generated

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

I can't see how to change the array to make it match with the JSON that davidkonrad provided

Could you please post an example of the JSON data that your PHP generates? — Sergey G
– Sergey G, Commented Jun 26, 2013 at 19:40

davidkonrad · Accepted Answer · 2013-06-27 14:26:04Z

11

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

Eg, changing the example JSON 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 : enter image description here

Update

Look at Format of the Constructor's JavaScript Literal data Parameter You need to wrap each "c"-section into brackets and also misses "v" (value indicator) for the first column.

Your updated test JSON is

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

giving a "can't read 0 of undefined", becuase it should be

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

graph :

enter image description here

Hope it helps!

Absolutely final update

Modified PHP that along with json_encode outputs 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);
}

outputs

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

edited Jun 27, 2013 at 14:26

answered Jun 27, 2013 at 11:15

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Boardy Over a year ago

thanks for the help, I've tried changing the PHP array before the encoding to make it rows instead of row but I am getting a slightly different error now. Instead the graph now says that it can't read 0 of undefined where the graph should. I have updated the question to include the changes I've made based on your answer

davidkonrad Over a year ago

Updated answer, hope it helps

Boardy Over a year ago

I understand that the JSON isn't correct, but its building the array in the PHP so that when the array is passed through json_encode it comes out in the correct format.

davidkonrad Over a year ago

Yeah, of course it is the PHP that should be corrected :-) Thought the problem (for you) was the syntax for google charts iself. Above a modified version of the test() function that produces correct JSON google charts is able to parse.

Boardy Over a year ago

Yea it was the PHP I was asking about, but thanks it is working now. Much appreciated

Collectives™ on Stack Overflow

Create line chart using Google Chart API and JSON for DataTable

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related