问题描述:

CI'm having an issue creating a chart. I've read number of tutorials and basically wrote a code according to them. However, the problem is that the chart won't be displayed at all.

I want on AJAX call to retrieve data from SQLite3 and then draw a chart based on that data.

It could be Column or Pie chart, doesnt matter.

I'm pretty sure there is some kind of problem with the way I work on JSON, and I would like someone to help me. Thanks!

 #test.html

-------------------------------------------------------------------------

<html>

<head>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

function drawChart() {

var jsonData = $.ajax({

url: "test-return.php",

dataType: "json",

async: false

}).responseText;

document.getElementById('rightDiv').innerHTML = jsonData;

var jsonData2 = [["FC Internazionale ",24],["AS Roma ",24],["Milan AC ",20],["UC Sampdoria ",19],["US Citt\u00e0 di Palermo",18],["SSC Napoli ",15],["Juventus FC ",16],["Parma FC ",14],["Genoa CFC ",14],["AS Bari ",13],["AC Fiorentina ",13],["SS Lazio ",11],["Calcio Catania ",10],["Cagliari Calcio ",11],["Udinese Calcio ",11],["AC Chievo Verona ",12],["Bologna FC ",10],["Atalanta BC ",9],["AC Siena ",7],["AS Livorno Calcio ",7]];

var data = google.visualization.arrayToDataTable(jsonData2,true);

var options = {

title: 'table 1'

};

var chart = new google.visualization.ColumnChart(

document.getElementById('chart_div'));

chart.draw(data, options);

}

google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

</script>

</head>

<body>

<div id="chart_div" style="width: 400px; height: 500px;"></div>

<div id="rightDiv">query results</div>

</body>

</html>

#test-return.php

-----------------------------------------------------------------------------

<?php

sqlite code here

................

echo json_encode($row_array);

?>

$row_array output => [["FC Internazionale ",24],["AS Roma ",24],["Milan AC ",20],["UC Sampdoria ",19]......

网友答案:

You have to match your data format to format expected by your chosen chart type. As-is, you will have 3 columns of data: one numeric, one string, and one numeric. The PieChart expects two columns of data: the first should be type "string" and the second should be type "number". ColumnCharts can have any number of columns: the first can be either type "number", "date", "datetime", "timeofday", or "string", but all of the following columns should be type "number" (usually, that is - there are some exceptions that have to do with using column roles which are outside the scope of what you are doing here).

Looking at your data, I am speculating that the first column (the 1, 2, 3, 4... in your sample data) is a row number and not something you intend to plot. If this is the case, you need to adjust your server-side code to remove it. If this is not the case, can you provide information about it so I can help you figure out how to use it?

Also, your data is missing column headers. As structured, the arrayToDataTable method will take the first row of data and use it as the column headers, so you would get three columns with the labels "1", "FC Internazionale ", and "24", which you probably don't want. Either amend your server-side code to make the first row of data contain column labels, or set the second argument in the arrayToDataTable call to true.

By using jsonData = $.ajax(...).responseText;, you are bypassing the JSON conversion that jQuery does and passing the raw text of the response to jsonData. Since you need a javascript array to use the arrayToDataTable method, you need to call JSON.parse on jsonData to convert it to an array:

var data = google.visualization.arrayToDataTable(JSON.parse(jsonData), true);
相关阅读:
Top