Thanks for the update.
I have changed my HTML to:
<html>
<head>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js";></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["linechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "linechart1.php",
dataType:"json",
success: function (results) {
alert('success');
var data = new google.visualization.DataTable(results);
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
},
error: function (e) {
document.write("throw an error if the data pull failed");
}
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
And now it is showing "*No Data*" text on the browser.
One more thing, the package I have used here is linechart in the line
"google.load("visualization", "1", {packages:["linechart"]});". Because if
I use corechart package, it shows the error as "Not enough columns given to
draw the chart."
Here is the JSON object:
{"cols":[[{"label":"crdt","type":"string"},{"label":"One or more legs is sold
out on specified flight","type":"string"},{"label":"Specified fare class is not
available on
flight","type":"string"}]],"rows":[{"c":[{"v":"2013-05-08"},{"v":0},{"v":1}]},{"c":[{"v":"2013-05-09"},{"v":1},{"v":1}]}]}
Please check if I am doing something wrong.
On Wednesday, 8 May 2013 19:39:11 UTC+5:30, asgallant wrote:
>
> AJAX is an asnycronous operation, so when you make the AJAX call, the rest
> of your function continues executing while the AJAX goes and fetches data.
> This results in jsondata being null when you create the DataTable. Try
> this instead:
>
> function drawChart() {
> $.ajax({
> url: "linechart1.php",
>
> dataType:"json",
>
> success: function (results) {
>
> alert('success');
>
> var data = new google.visualization.DataTable(results);
>
> var chart = new
> google.visualization.LineChart(document.getElementById('chart_div'));
> chart.draw(data, {width: 400, height: 240});
>
> },
>
> error: function (e) {
>
> // throw an error if the data pull failed
>
> }
>
> });
> }
>
>
> On Wednesday, May 8, 2013 6:05:52 AM UTC-4, [email protected] wrote:
>>
>> Hi,
>>
>> I was trying to draw a Google line chart through JSON. I made an HTML
>> file and then called a PHP file using ajax which returns a JSON string
>> which is as follows;
>>
>> {"cols":[[{"label":"crdt","type":"string"},{"label":"Invalid flight
>> key","type":"string"},{"label":"Specified fare class is not available on
>> flight","type":"string"},{"label":"There was a problem communicating to the
>> Reservation
>> System.","type":"string"}]],"rows":[{"c":[{"v":"2013-05-07"},{"v":0},{"v":1},{"v":0}]},{"c":[{"v":"2013-05-07"},{"v":0},{"v":1},{"v":0},{"v":"2013-05-08"},{"v":2},{"v":1},{"v":2}]}]}
>>
>>
>>
>> But, a JS error is coming saying that:
>>
>> =================================
>>
>>
>> Message: Table has no columns.
>> Line: 56
>> Char: 63
>> Code: 0
>> URI:
>> https://www.google.com/uds/api/visualization/1.0/0fb98c40e9e7bc594107c5bf2cc32e1e/format+en,default,browserchart,linechart.I.js
>>
>>
>>
>> Following is the HTML file that I'm using:
>>
>> ===================================
>>
>> <html>
>> <head>
>> <script type="text/javascript"
>> src="https://www.google.com/jsapi";></script>
>> <script type="text/javascript"
>> src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js";></script>
>> <script type="text/javascript">
>> google.load("visualization", "1", {packages:["linechart"]});
>> google.setOnLoadCallback(drawChart);
>> function drawChart() {
>> var jsondata = $.ajax({
>> url: "linechart1.php",
>> dataType:"json",
>> success: function (jsonData) {
>> alert('success');
>> }
>> });
>> var data = new google.visualization.DataTable(jsondata);
>> var chart = new
>> google.visualization.LineChart(document.getElementById('chart_div'));
>> chart.draw(data, {width: 400, height: 240});
>> }
>> </script>
>> </head>
>> <body>
>> <div id="chart_div" style="width: 900px; height: 500px;"></div>
>> </body>
>> </html>
>>
>>
>>
>> Can someone please help in this?
>>
>> Thanks!!!
>>
>
--
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?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
