I have a php script that generates the google chart data and returns it in json encoded format. It's loaded into google chart using jQuery $.get() method. When I pass the return data to the google "arrayToDataTable" function like this:
var googleChartData = google.visualization.arrayToDataTable(chartData);
I get this error:
So, what I did was I dumped the value of my variable "chartData" and I got the following:
So, what I did was, copy this data from console window into the "arrayToDataTable" function manually like this:
var googleChartData = google.visualization.arrayToDataTable([["Date Range","0001\/102\/0 Available","0001\/102\/0 Unavailable","0001\/102\/1 Available","0001\/102\/1 Unavailable"],["02\/10\/2013",0,1,110,11],["03\/10\/2013",0,1,189,11],["04\/10\/2013",0,1,189,11],["06\/10\/2013",0,1,189,10],["07\/10\/2013",0,1,187,10],["08\/10\/2013",186,11,0,1],["09\/10\/2013",186,11,0,1],["10\/10\/2013",0,1,186,11],["11\/10\/2013",0,1,204,11],["13\/10\/2013",0,1,204,11]]);
Now the chart renders (as expected, because the returned data from my php script is correct):
This is a bit bizarre; does any one know why the chart doesn't work when it's loaded from the variable?
I've solved it by changing arrayToDataTable line like this:
var googleChartData = google.visualization.arrayToDataTable($.parseJSON(chartData));
Thanks to this post: https://stackoverflow.com/a/9420583/2332336
Related
I'm testing the sandey chart from the following link: https://gist.github.com/d3noob/c2637e28b79fb3bfea13
But I can only see the the chart in Firefox, not in Chrome. I suspect because Chrome doesn't allow to access data from an external file.
Therefore, I'm trying to integrate the json code, but when I try it, the chart doesn't show up in Firefox
I have added a variable with all the json code like:
var dataset = {"nodes":[{"node":0,"name":"node0"},{"node":1,"name":"node1"},{"node":2,"name":"node2"},{"node":3,"name":"node3"},{"node":4,"name":"node4"}],"links":[{"source":0,"target":2,"value":2},{"source":1,"target":2,"value":2},{"source":1,"target":3,"value":2},{"source":0,"target":4,"value":2},{"source":2,"target":3,"value":2},{"source":2,"target":4,"value":2},{"source":3,"target":4,"value":4}]};
And I've replaced this line of code:
d3.json("sankey-formatted.json", function(error, graph) {
For this one (just replacing the name of the file by the dataset variable):
d3.json(dataset, function(error, graph) {
,,, but not the chart is not showing. Any ideas why the sankey chart is not showing?
Thanks
The problem you're facing is that d3.json...
...returns a new request to get the JSON file at the specified url with the default mime type application/json.
That being said, the solution is simpler than you think: since you already have a variable with all the data, just name it as graph (your d3.json function loads the file and populates a data array called graph):
var graph = {"nodes":[{"node":0,"name":"node0"},...
And drop the d3.json function, don't forgetting to remove the closing curly bracket/parenthesis:
d3.json("sankey-formatted.json", function(error, graph) {//remove this...
//your function
});//...and don't fortget to remove this too.
I am trying to parse some data from a source that is formatted like this:
var = jsonReturnData = {}
instead of this:
jsonReturnData({})
If I read the file using a script tag like this:
<script src="http://foundationphp.com/phpclinic/podata.php?startDate=20150301&endDate=20150302&raw"></script>
I have no problem reading the data, but if I try to do any sort of JSON or JSONP call from within jQuery, I either get an error or no access to the data depending on how I do it.
$.getJSON('http://foundationphp.com/phpclinic/podata.php?startDate=20150301&endDate=20150321&raw', function(data) {
console.log(jsonReturnData);
});
I need to be able to load the data dynamically when someone chooses some dates. Here's a sample of the interface working, but with no access to the JSON file. The data that you see is being read by the script method.
http://iviewsource.com/exercises/codeclinic/01/
i am trying to create a simple web app that gets the latitude and longitude stored in a JSON string and uses them to place markers on a google map. Currently, I have a program on a server which retrieves a JSON string with data when a URL is entered into a web browser. The JSON string produced is as follows:-
{"employees":[{"email":"bones93#hotmail.co.uk","lat":"53","lon":"-3","alt":"0","date":"unknown","time":"unknown"},{"email":"unknown","lat":"0","lon":"0","alt":"0","date":"unknown","time":"unknown"},{"email":"unknown","lat":"0","lon":"0","alt":"0","date":"unknown","time":"unknown"}]}
What method could i use in JavaScript that would allow me to get the JSON string that is produced?
P.S I know I will need to parse the text afterwards to make a JSON Object, this is something that can be done afterwards.
Use the Jquery library's get method to request the data from the server. Here is a link to a simple W3 tutorial : http://www.w3schools.com/jquery/ajax_get.asp
Your code will look something like this:
$("button").click(function(){
$.get("/your/server/url",function(data){
var result = JSON.parse(data);
// Process result.employees
});
});
You could use
var x = JSON.parse('{"employees":[{"email":"bones93#hotmail.co.uk","lat":"53","lon":"-3","alt":"0","date":"unknown","time":"unknown"},{"email":"unknown","lat":"0","lon":"0","alt":"0","date":"unknown","time":"unknown"},{"email":"unknown","lat":"0","lon":"0","alt":"0","date":"unknown","time":"unknown"}]}');
and then access it with:
x["employees"][0]["lat"];
try this for normal strings:
JSON.parse(str)
or if you're using AJAX to get that Json you can use as following:
$.get(..,'json')
OR
$.post(..,'json')
I am trying to create some JSON to be used for displaying a chart using Highcharts
http://www.highcharts.com/
I have copied one of their examples:
http://www.highcharts.com/stock/demo/basic-line
Click "View Options" under the graph to see the source. There is also a JSFiddle there to play with
If I copy that locally it all works fine.
The problem is when I try to use my own data source.
I have an ASP.Net MVC controler which is spitting out a list of arrays, just like their data source. However, that doesn't work.
Their datasource looks like this
http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?
and they retrieve it like this
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
So I thought I'd take a step back and copy thier data exactly and put it in a text file on my server and try that:
So I tried this
$.getJSON('/data.txt', function (data) {
and this
$.get('/data.txt', function (data) {
but neither work
I have also tried using both JSON.parse and jQuery.parseJSON after retrieving the data, but again - that doesn't seem to work
I am also wondering what the ? is at the start of their data
Their data looks like this
?([[<some data>],[some data]]);
I don't get any error message, the graph just doesn't display
any ideas?
SOLVED IT
Just need to retrive the data and turn it into an array and pass it to the chart.
Needs to be an array, not JSON
That datasource is ouputting JSONP, which is for cross-domain AJAX requests. It's not valid 'raw' JSON because of that extra callback(...) wrapper.
Read up about it here: http://api.jquery.com/jQuery.ajax/ under the 'dataType' section.
As you say in your tags, it's not JSON, it's JSONP. Do not parse it, catch it with a callback. Use jQuery.getScript to do it, and define function callback(data). Inside that function, data should contain the (parsed) object. Also, replace the ? in the URL with callback (or whatever you named your function) - ? is not a valid identifier in JavaScript, so ?([....]) is nonsense.
I have next code block:
$.post('page.php', function(data)
{
//data - full page info
});
Returned data is html markup. And in this html i have javascript section with array:
var someArray= new Array();
How can i get this array object from data object?
Edit:
I cannot change data which returned from page.php. And basically this javascript just plugin to change existing page UI from other website. So i know that page contains array and i need get data from it.
It will work fine just append it to the body, then read in the variable.
See below:
http://jsfiddle.net/6CJUy/