Hi, I am playing around with a simple line-chart that I cannot make work correctly when fetching a json-string from my server. When I put the string returned by the server in-line in the html-page, everything is fine. I have tried all (I think) combinations of string-delimiters (none, ", and ') for the date-values but to no avail.
The inline html looks like this: > <html> > > <head> > > <!--Load the AJAX API--> > > <script type="text/javascript" >> src="https://www.google.com/jsapi";></script> > > <script type="text/javascript" >> src="http://code.jquery.com/jquery-1.10.1.min.js";></script> > > <script type="text/javascript"> > > google.load('visualization', '1', {'packages':['corechart', >> 'table']}); > > google.setOnLoadCallback(drawChart); > > > > function drawChart() { > > var jsonData = '{"cols": [{"label":"Time", >> "type":"date"},{"label":"Dataseries 0", >> "type":"number"},{"label":"Dataseries 1", "type":"number"}], "rows": >> [{"c":[{"v":"Date(2013,05,29,06,29,00)", "f":"2013-05-29 06:29:00"}, >> {"v":186,"f":"Value=186"},{"v":null, "f":null}]}, >> {"c":[{"v":"Date(2013,05,29,06,29,00)", "f":"2013-05-29 06:29:00"}, >> {"v":null, "f":null},{"v":91,"f":"Value=91"}]}, >> {"c":[{"v":"Date(2013,05,29,06,32,00)", "f":"2013-05-29 06:32:00"}, >> {"v":190,"f":"Value=190"},{"v":null, "f":null}]}, >> {"c":[{"v":"Date(2013,05,29,06,32,00)", "f":"2013-05-29 06:32:00"}, >> {"v":null, "f":null},{"v":101,"f":"Value=101"}]}]}'; > > >> var data = new google.visualization.DataTable(jsonData); > > var table = new >> google.visualization.Table(document.getElementById('table_div')); > > var chart = new >> google.visualization.LineChart(document.getElementById('chart_div')); > > table.draw(data, {width: 600, height: 400, showRowNumber: >> true}); > > chart.draw(data, {width: 600, height: 400, >> interpolateNulls:true}); > > } > > </script> > > </head> > > <body> > > <hr> > > <div id="chart_div"></div> > > <hr> > > <div id="table_div"></div> > > </body> > > </html> > > and generates this <https://lh5.googleusercontent.com/-EZOQQPBvjPY/Uag-gqIKNbI/AAAAAAAABy4/tZ-mNQtZUX0/s1600/jsonhtmlok.JPG> And the non-working html looks like this: <html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi";></script> <script type="text/javascript" src=" http://code.jquery.com/jquery-1.10.1.min.js";></script> <script type="text/javascript"> google.load('visualization', '1', {'packages':['corechart', 'table']}); google.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({url: "/index.php", data: {"get_data": "dataseries"}, dataType:"json", async: false}).responseText; alert(jsonData); var data = new google.visualization.DataTable(jsonData); var chart = new google.visualization.BarChart(document.getElementById('chart_div')); var table = new google.visualization.Table(document.getElementById('table_div')); chart.draw(data, {width: 600, height: 400, interpolateNulls:true}); table.draw(data, {width: 600, height: 400, showRowNumber: true}); } </script> </head> <body> <div id="chart_div"></div> <div id="table_div"></div> </body> </html> The string returned by the index.php?get_data=dataseries is the contents of the jsonData-variable from the html-example, and the result looks like: <https://lh5.googleusercontent.com/-XenXyA2iW0M/Uag_7aDby7I/AAAAAAAABzE/LjEhZz-YK1I/s1600/jsonserverfetchnotok.JPG> Why is this happening - and how do I make it behave identically? Thanks, A -- 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.
