CODEWITHSUNDEEP
phpjsonchartsgoogle-visualization
user2147744
user2147744

Reputation: 79

Google charts Uncaught error: Not an array

I am getting Uncaught error Not an array. here is my .html file

 <html>
    <head>
        <!-- Load jQuery -->
        <script language="javascript" type="text/javascript" 
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
        </script>
        <!-- Load Google JSAPI -->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", { packages: ["corechart"] });
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var jsonData = $.ajax({
                    url: "json.php",
                    dataType: "json",
                    async: false
                }).responseText;


                var data = google.visualization.arrayToDataTable($parse.jsonData(jsonData));


                var chart = new google.visualization.LineChart(
                            document.getElementById('chart_div'));
                chart.draw(data, options);
            }

        </script>
    </head>
    <body>
        <div id="chart_div" style="width: 900px; height: 500px;">
        </div>
    </body>
    </html>

Here is my json file.php 

include("dbconfig.inc.php");
$main= array();
$rows=array();
$cols=array();

$main['cols']=array(
    array('label' => 'id', 'type' => 'string'),
    array('label' => 'Q1', 'type' => 'string')
    );
$main['rows']=array();
$sel = "SELECT * FROM mak";
try {
    foreach($dbh->query($sel) as $r) {
        $idd=$r['oid'];
        $select = "SELECT * FROM pol WHERE id='".$idd."' "; 
        foreach($dbh->query($select) as $row) {
            array_push($main['rows'],array('c' => array(
                                                            array('v' => $row['id']), 
                                                            array('v' => $row['pol']), 
                                                            ))  );

        }

    }
}

catch(PDOException $e) {
    echo $e->getMessage();
    die();
}
echo json_encode($main);


?>

this files output is : It is same as the one google charts need, I don't understand where is the problem. on doing console.log($parse.JSON(jsonData)); the json object is getting displayed on the console.

{
"cols":
[
{"label":"id","type":"string"},
{"label":"Q1","type":"string"}
],
"rows":
[
{"c":[{"v":"1"},{"v":"123.0000"}]},
{"c":[{"v":"2"},{"v":"456.0000"}]}
]
}

Upvotes: 1

Views: 5077

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

Call to arrayToDataTable() is wrong because comming data is not an array. Method DataTable() should be used instead with new like:

var data = new google.visualization.DataTable($parse.jsonData(jsonData));

Additionally type of Q1 changed to 'number' and values used too.

See example at jsbin

Upvotes: 6

Related Questions