Ok, I have a JSON file from a website API that I need to re-arrange so the data can be read by Highcharts. I do not know how to proceed. I have a URL and from reading the docs on highcharts website, I need to re-format the data to be used correctly, so, how should I proceed?
Should I set up a php file that loads the JSON file, then use javascript to pick out what I want? If so, how would I accomplish this?
Thanks in advance!
Here is an example of the JSON data
[
{
"timestamp": 1382918400,
"localTimestamp": 1382918400,
"issueTimestamp": 1382918400,
"fadedRating": 4,
"solidRating": 0,
"swell": {
"minBreakingHeight": 5,
"absMinBreakingHeight": 4.508,
"maxBreakingHeight": 7,
"absMaxBreakingHeight": 7.049,
"unit": "ft",
"components": {
"combined": {
"height": 18,
"period": 10,
"direction": 37.25,
"compassDirection": "SW"
},
"primary": {
"height": 18,
"period": 10,
"direction": 47.09,
"compassDirection": "SW"
}
}
},
"wind": {
"speed": 15,
"direction": 79,
"compassDirection": "W",
"chill": 54,
"gusts": 29,
"unit": "mph"
},
"condition": {
"pressure": 986,
"temperature": 59,
"weather": "23",
"unitPressure": "mb",
"unit": "f"
},
"charts": {
"swell": "http://chart-1.msw.ms/wave/750/1-1382918400-1.gif",
"period": "http://chart-1.msw.ms/wave/750/1-1382918400-2.gif",
"wind": "http://chart-1.msw.ms/gfs/750/1-1382918400-4.gif",
"pressure": "http://chart-1.msw.ms/gfs/750/1-1382918400-3.gif",
"sst": "http://chart-1.msw.ms/sst/750/1-1382918400-10.gif"
}
},
]
You need to parse your JSON i.e in javascript, by prepareing correct structure
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
and use it like
series: customSeries
I wouldn't use PHP for parsing the JSON file, you can directly doing it in JavaScript.
You can either doing it by yourself or using a library like http://underscorejs.org/ or even better http://lodash.com/.
What are exactly your JSON input and the output which can be read by Hightchart ?