I just ended up reworking the php to output a DataTable instead of an array
and then massaged things further to go to an Annotation Chart for the zoom
functionality. I had to explode the SQL timestamp into a Date object and
your post to someone else about that was very helpful. Next trick is to
figure out how to get the users zoom or scroll settings, ie the user's
viewpoint, of the Annotation Chart to survive the timed calls to redraw the
chart with new datapoints.
On Friday, February 21, 2014 7:12:24 AM UTC-8, asgallant wrote:
>
> With this code:
>
> var jsonData = $.ajax({
> url: "getData.php",
> dataType:"json",
> async: false
> }).responseText;
>
> jsonData is a string, like this:
>
> "[ ['Time','Temperature', 'Humidity'], ['2014-02-20
> 01:06:21',68.54,51.9],['2014-02-20 01:09:09',68.18,59.9],['2014-02-20
> 01:12:16',67.64,68.6],['2014-02-20 01:15:14',67.64,73.9],['2014-02-20
> 01:19:06',67.82,66.1],['2014-02-20 01:21:13',67.28,61.7],...]"
>
> It is equivalent to this:
>
> var jsonData = "<?php include 'getData.php'; ?>";
>
> not this:
>
> var jsonData = <?php include 'getData.php'; ?>;
>
> You don't want a string, you want an array. In order to get an array from
> that string, you have to use JSON.parse, but the rules for JSON specify
> that all internal strings *must* use double-quotes. Switch the
> single-quotes to double-quotes, and use this line to construct your
> DataTable:
>
> var data = google.visualization.arrayToDataTable(JSON.parse(jsonData));
>
> You can confirm that it works by performing a string replace on jsonData:
>
> jsonData = jsonData.replace(/'/g, '"');
> var data = google.visualization.arrayToDataTable(JSON.parse(jsonData));
>
> On Thursday, February 20, 2014 9:07:45 PM UTC-5, [email protected] wrote:
>>
>> I seem to have gotten you off on the wrong track. There is nothing wrong
>> with the array. When I say it works, I mean the chart draws correctly when
>> I plug in that array either manually, or by assigning it to a variable, or
>> by having a php script write it out. It only does not work if I use the
>> jquery ajax call. However, while it does not work that way, the actual
>> contents of the jsonData variable are character by character identical from
>> the earlier methods.
>>
>>
>>
>>
>>
>> On Thursday, February 20, 2014 4:05:44 PM UTC-8, asgallant wrote:
>>>
>>> The quotes are requirement for JSON, but not for standard javascript
>>> notation. Run this in Chrome and see if there are any error messages in
>>> the developer's console.
>>>
>>> On Thursday, February 20, 2014 6:47:06 PM UTC-5, [email protected]:
>>>>
>>>> Made that change. Still not working. Im sceptical that the quotes are
>>>> an issue, since it works fine with single quotes from PHP instead or if I
>>>> cut and paste that array into :
>>>>
>>>> var data = new google.visualization.arrayToDataTable(
>>>>
>>>> [ ['Time','Temperature', 'Humidity'], ['2014-02-20
>>>> 01:06:21',68.54,51.9],['2014-02-20 01:09:09',68.18,59.9],['2014-02-20
>>>> 01:12:16',67.64,68.6],['2014-02-20 01:15:14',67.64,73.9],['2014-02-20
>>>> 01:19:06',67.82,66.1],['2014-02-20 01:21:13',67.28,61.7],....
>>>>
>>>> )
>>>>
>>>> Works just fine.
>>>>
>>>>
>>>>
>>>> On Thursday, February 20, 2014 3:35:44 PM UTC-8, asgallant wrote:
>>>>>
>>>>> The string is not valid JSON, which is the problem. The strings
>>>>> internal to the JSON have to be double-quoted, eg: ['Time','Temperature',
>>>>> 'Humidity'] should be ["Time","Temperature", "Humidity"]
>>>>>
>>>>>
>>>>>
>>>>> On Thursday, February 20, 2014 6:33:34 PM UTC-5, [email protected]:
>>>>>>
>>>>>> Same results. Ie, nothing.
>>>>>>
>>>>>>
>>>>>> getData.php outputs : [ ['Time','Temperature', 'Humidity'],
>>>>>> ['2014-02-20 01:06:21',68.54,51.9],['2014-02-20
>>>>>> 01:09:09',68.18,59.9],['2014-02-20 01:12:16',67.64,68.6],['2014-02-20
>>>>>> 01:15:14',67.64,73.9],['2014-02-20 01:19:06',67.82,66.1],['2014-02-20
>>>>>> 01:21:13',67.28,61.7],....
>>>>>>
>>>>>> maybe a better way to phrase the question is:
>>>>>>
>>>>>> If I do :
>>>>>>
>>>>>> var jsonData = <?php include 'getData.php' ?> ;
>>>>>>
>>>>>> everything works.
>>>>>>
>>>>>> If I do :
>>>>>>
>>>>>> var jsonData = $.ajax({
>>>>>> url: "getData.php",
>>>>>> dataType:"json",
>>>>>> async: false
>>>>>> }).responseText;
>>>>>>
>>>>>> It does not work. However at that point :
>>>>>>
>>>>>> document.write(jsonData);
>>>>>>
>>>>>> outputs the exact same thing as getData.php does.
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Thursday, February 20, 2014 3:25:43 PM UTC-8, asgallant wrote:
>>>>>>>
>>>>>>> If your PHP is generating something like this:
>>>>>>>
>>>>>>> {
>>>>>>> "cols": [
>>>>>>> {"id":"","label":"Topping","pattern":"","type":"string"},
>>>>>>> {"id":"","label":"Slices","pattern":"","type":"number"}
>>>>>>> ],
>>>>>>> "rows": [
>>>>>>> {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
>>>>>>> {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
>>>>>>> {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
>>>>>>> {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
>>>>>>> {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
>>>>>>> ]
>>>>>>> }
>>>>>>>
>>>>>>> then you need to use the regular DataTable constructor instead of
>>>>>>> the arrayToDataTable method:
>>>>>>>
>>>>>>> var data = new google.visualization.DataTable(JSON.parse(jsonData));
>>>>>>>
>>>>>>> If it is an array of data instead, you need to remove the "new"
>>>>>>> keyword from the line I posted previously:
>>>>>>>
>>>>>>> var data = google.visualization.arrayToDataTable(JSON.parse(
>>>>>>> jsonData));
>>>>>>>
>>>>>>> On Thursday, February 20, 2014 5:50:50 PM UTC-5, [email protected]:
>>>>>>>>
>>>>>>>> Tried that. No change. But it feels like the right direction to
>>>>>>>> look in. That jquery code is exactly from the php example. The
>>>>>>>> difference
>>>>>>>> is it uses google.visualization.DataTable instead of arrayToDataTable.
>>>>>>>> Is
>>>>>>>> there a change to the jquery I need to make so it passes back whatever
>>>>>>>> arrayToDataTable wants? Again worth noting that just sourcing the
>>>>>>>> getData.php code instead of the jsonData variable name works fine.
>>>>>>>> That
>>>>>>>> just leads to the kludge of having to reload the whole page to refresh
>>>>>>>> the
>>>>>>>> chart.
>>>>>>>>
>>>>>>>> I guess the other way to go is to add a bunch of extra code in
>>>>>>>> getData.php to add all the extra quotes and commas and useless
>>>>>>>> metadata and
>>>>>>>> output a DataTable instead of an array. Just feels like pointless work.
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> On Thursday, February 20, 2014 2:38:50 PM UTC-8, asgallant wrote:
>>>>>>>>>
>>>>>>>>> The responseText property of the AJAX call gives the string value
>>>>>>>>> of the returned data, which is not usable by the arrayToDataTable
>>>>>>>>> method.
>>>>>>>>> Assuming jsonData is a valid JSON string for a javascript array, you
>>>>>>>>> need
>>>>>>>>> to call JSON.parse on jsonData:
>>>>>>>>>
>>>>>>>>> var data = new
>>>>>>>>> google.visualization.arrayToDataTable(JSON.parse(jsonData));
>>>>>>>>>
>>>>>>>>> On Thursday, February 20, 2014 4:41:35 PM UTC-5,
>>>>>>>>> [email protected]:
>>>>>>>>>>
>>>>>>>>>> Im trying to get the basic PHP example to work.
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> This is what I want to work, but does not:
>>>>>>>>>>
>>>>>>>>>> function drawChart() {
>>>>>>>>>> var jsonData = $.ajax({
>>>>>>>>>> url: "getData.php",
>>>>>>>>>> dataType:"json",
>>>>>>>>>> async: false
>>>>>>>>>> }).responseText;
>>>>>>>>>>
>>>>>>>>>> // Create our data table out of JSON data loaded from server.
>>>>>>>>>> var data = new google.visualization.arrayToDataTable(jsonData);
>>>>>>>>>>
>>>>>>>>>> my getData.php does some sql and parsing. If I do this instead,
>>>>>>>>>> it works fine, just only once since its php instead of a jquery ajax
>>>>>>>>>> call :
>>>>>>>>>>
>>>>>>>>>> function drawChart() {
>>>>>>>>>>
>>>>>>>>>> // Create our data table out of JSON data loaded from server.
>>>>>>>>>> var data = new google.visualization.arrayToDataTable( <?php
>>>>>>>>>> include 'getData.php'; ?> )
>>>>>>>>>>
>>>>>>>>>> If I do
>>>>>>>>>>
>>>>>>>>>> var jsonData = $.ajax({
>>>>>>>>>> url: "getData.php",
>>>>>>>>>> dataType:"json",
>>>>>>>>>> async: false
>>>>>>>>>> }).responseText;
>>>>>>>>>>
>>>>>>>>>> document.write(jsonData);
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> // Create our data table out of JSON data loaded from server.
>>>>>>>>>> var data = new google.visualization.arrayToDataTable( PASTE
>>>>>>>>>> STUFF HERE );
>>>>>>>>>>
>>>>>>>>>> and then run it once to cut and paste the output into PASTE STUFF
>>>>>>>>>> HERE then it works fine. If I actually use the jsonData variable as
>>>>>>>>>> in the
>>>>>>>>>> example, it does not work. What newb mistake am I making here?
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
--
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.
