First, try calling JSON.parse on the jsonData variable when you pass it to
the DataTable constructor:
var data = new google.visualization.DataTable(JSON.parse(jsonData));
and see if that fixes the problem. Also, if your JSON string
'{"cols":[{"label":"Quantity","
type":"number"},{"label":"Product","type":"string"}],"
rows":[{"c":[{"v":7},{"v":"Y-2832"}]},{"c":[{"v":2},{"v":"
Y-2832"}]},{"c":[{"v":6},{"v":"Y-2832"}]},{"c":[{"v":6},{"v"
:"Y-2832"}]},{"c":[{"v":2},{"v":"Y-2832"}]},{"c":[{"v":2},{
"v":"Y-2832"}]},{"c":[{"v":4},{"v":"Y-2832"}]},{"c":[{"v":4}
,{"v":"Y-1000"}]}]}' is indicative of what is being output by the
"getData.php" script, your columns are backwards: the label column should
be first and the value column should be second. You also have a lot of
rows with the same value in the "Product" column, which is odd for
displaying a PieChart.
As a side note, in your case you don't need to use a DataView, since you
are only passing two columns of data from your database to begin with.
On Sunday, October 13, 2013 5:32:48 AM UTC-4, [email protected] wrote:
>
> Hi asgallant, I have been trying to use display the pie chart using data
> from mysql. But the problem is that the chart was not display when i use
> ajax.
> However if i use the output from the getData.php i was able to display the
> chart.
>
>
>
> <html>
> <head>
> <!--Load the AJAX API -->
> <script type="text/javascript" src="http://www.google.com/jsapi";></script>
> <script src="
> https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
> type="text/javascript"></script>
>
> <script type="text/javascript">
>
> function drawChart(){
> var jsonData =$.ajax({
> url:"getData.php",
> dataType:"json",
> async:false
> }).responseText;
>
> /*
> {"cols":[{"label":"Quantity","type":"number"},{"label":"Product","type":"string"}],"rows":[{"c":[{"v":7},{"v":"Y-2832"}]},{"c":[{"v":2},{"v":"Y-2832"}]},{"c":[{"v":6},{"v":"Y-2832"}]},{"c":[{"v":6},{"v":"Y-2832"}]},{"c":[{"v":2},{"v":"Y-2832"}]},{"c":[{"v":2},{"v":"Y-2832"}]},{"c":[{"v":4},{"v":"Y-2832"}]},{"c":[{"v":4},{"v":"Y-1000"}]}]}*/
>
> //Create our data table out of JSON data loaded from server
> var data=new google.visualization.DataTable(jsonData);
> //PieCharts expects 2 columns of data: a label and a value, so we need to
> use a DataView to restrict to 2 columns
> var view=new google.visualization.DataView(data);
>
>
> //Instantiate and draw our chart, passing in some options
> var chart=new
> google.visualization.PieChart(document.getElementById('chart_div'));
> chart.draw(view,{width:400,height:240});
>
> }
>
> //Load the visualization API and the piechart package
> google.load('visualization','1',{'packages':['corechart']});
>
> //Set a callback to run when the google visualization API is loaded
> google.setOnLoadCallback(drawChart);
>
> </script>
> </head>
>
> <body>
> <!--Div that will hold the pie chart -->
> <div id="chart_div"></div>
> </body>
> </html>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
