Populate google.visualization.DataTable for a AnnotatedTimeLine using JSON

Question

Hi

I have a HttpHandler which returns some JSON in (i think) the correct format for a google.visualization.DataTable, but the AnnotatedTimeLine fails to work?

This is the JSON returned by the Handler:

{cols: [{id: 'DATE', label: 'Date', type: 'date'}, {id: 'KEYWORD51', label: 'vw cheltenham', type: 'number'}, {id: 'KEYWORD52', label: 'volkswagen cheltenham', type: 'number'}, {id: 'KEYWORD61', label: 'vw dealer cheltenham', type: 'number'}], rows: [{c: [{v: new Date(2010, 3, 13)}, {v: 20}, {v: 1}, {v: 2}]}, {c: [{v: new Date(2010, 3, 14)}, {v: 19}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 15)}, {v: 19}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 16)}, {v: 18}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 17)}, {v: 17}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 18)}, {v: 17}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 19)}, {v: 12}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 20)}, {v: 13}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 21)}, {v: 11}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 22)}, {v: 10}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 23)}, {v: 10}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 24)}, {v: 8}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 25)}, {v: 6}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 26)}, {v: 6}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 27)}, {v: 5}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 28)}, {v: 4}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 29)}, {v: 4}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 30)}, {v: 2}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 1)}, {v: 2}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 2)}, {v: 1}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 3)}, {v: 2}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 4)}, {v: 0}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 5)}, {v: 0}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 6)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 7)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 8)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 9)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 10)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 11)}, {v: 0}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 12)}, {v: 2}, {v: 1}, {v: 1}]}]}

This is the Javascript, I used JQuery to get the JSON, have also tried $.getJSON()

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

google.setOnLoadCallback(loadGraph);

function loadGraph() {

    $.get("/GraphDataHandler.axd", function(response) {
         drawGraph(response);
    });

}

function drawGraph(response) {
    var visualization = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
    var data = new google.visualization.DataTable(response, 0.6);
    visualization.draw(data, { title: 'Rankings', titleX: 'Date', titleY: 'Position', displayAnnotations: false, allowRedraw: true });
}

But, if I write the same JSON to the page like below it works fine!?

<script type="text/javascript">
//<![CDATA[
var gData = {cols: [{id: 'DATE', label: 'Date', type: 'date'}, {id: 'KEYWORD51', label: 'vw cheltenham', type: 'number'}], rows: [{c: [{v: new Date(2010, 3, 13)}, {v: 20}]}, {c: [{v: new Date(2010, 3, 14)}, {v: 19}]}, {c: [{v: new Date(2010, 3, 15)}, {v: 19}]}, {c: [{v: new Date(2010, 3, 16)}, {v: 18}]}, {c: [{v: new Date(2010, 3, 17)}, {v: 17}]}, {c: [{v: new Date(2010, 3, 18)}, {v: 17}]}, {c: [{v: new Date(2010, 3, 19)}, {v: 12}]}, {c: [{v: new Date(2010, 3, 20)}, {v: 13}]}, {c: [{v: new Date(2010, 3, 21)}, {v: 11}]}, {c: [{v: new Date(2010, 3, 22)}, {v: 10}]}, {c: [{v: new Date(2010, 3, 23)}, {v: 10}]}, {c: [{v: new Date(2010, 3, 24)}, {v: 8}]}, {c: [{v: new Date(2010, 3, 25)}, {v: 6}]}, {c: [{v: new Date(2010, 3, 26)}, {v: 6}]}, {c: [{v: new Date(2010, 3, 27)}, {v: 5}]}, {c: [{v: new Date(2010, 3, 28)}, {v: 4}]}, {c: [{v: new Date(2010, 3, 29)}, {v: 4}]}, {c: [{v: new Date(2010, 3, 30)}, {v: 2}]}, {c: [{v: new Date(2010, 4, 1)}, {v: 2}]}, {c: [{v: new Date(2010, 4, 2)}, {v: 1}]}, {c: [{v: new Date(2010, 4, 3)}, {v: 2}]}, {c: [{v: new Date(2010, 4, 4)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 5)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 6)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 7)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 8)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 9)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 10)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 11)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 12)}, {v: 2}]}]};
//]]>
</script>

Please advise how I can get it to work correctly using a the JSON calls?

Thanks

Answer 1

Not sure if this is the reason, but make sure that you produce valid JSON. I see in the string that the keys are not enclosed in quote, but they must be (they have to be strings), in order to be valid JSON.

E.g. from

{cols: [{id: 'DATE', label: 'Date', type: 'date'}

to

{'cols': [{'id': 'DATE', 'label': 'Date', 'type': 'date'}

And try again with .getJSON().

---

The reason why it works if you put it directly in your code is probably because the keys don't need to be quoted in JS (but as JSON string it would be invalid!).

Update:

getJson uses .parseJSON() to parse the JSON string. As you can see in the documentation, it only accepts valid JSON which your string is not.

Answer 2

I resolved it.

By adding:

var json = eval("(" + response + ")");

To this function:

function drawGraph(response) {

var visualization = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));

var json = eval("(" + response + ")");    

var data = new google.visualization.DataTable(json, 0.6);

visualization.draw(data, { title: 'Rankings', titleX: 'Date', titleY: 'Position', displayAnnotations: false, allowRedraw: true });

}

This was using JQuery $.get()

Thanks