score:1
@W.Howard, I think the problem here is how you are treating and preparing the JSON response from the API. Consider the following JavaScript to retrieve and parse out the data:
/*
* Helper function
* scalarMultiply(array, scalar)
*/
function scalarMultiply(arr, scalar) {
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i] * scalar;
}
return arr;
}
/*
* getQuery(station, api_token)
*/
function getQuery(station, mins, api_token) {
$.getJSON('http://api.mesowest.net/v2/stations/timeseries?callback=?', {
/* Specify the request parameters here */
stid: station,
recent: mins, /* How many mins you want */
obtimezone: "local",
vars: "wind_speed,wind_direction,wind_gust",
jsonformat: 2, /* for diagnostics */
token: api_token
},
function(data) {
try {
windSpeed = data.STATION[0].OBSERVATIONS.wind_speed_set_1;
windDir = data.STATION[0].OBSERVATIONS.wind_direction_set_1;
windGust = data.STATION[0].OBSERVATIONS.wind_gust_set_1;
} catch (err) {
console.log("Data is invalid. Check your API query");
console.log(this.url);
exit();
}
/* Convert from knots to mph */
windSpeed = scalarMultiply(windSpeed, 1.15078);
//windGust = scalarMultiply(windGust, 1.15078);
/* Create and populate array for plotting */
windData = [];
for (i = 0; i < windSpeed.length; i++) {
windData.push([windDir[i], windSpeed[i]]);
}
/* Debug */
// console.log(windData);
console.log(this.url);
plotWindRose(windData, mins);
})
};
What we had now is an 2D array with wind direction and wind speed that we can pass to the plotting function. Below is the updated plotting function:
/*
* Plot the wind rose
* plotWindRose([direction, speed])
*/
function plotWindRose(windData, mins) {
/*
* Note:
* Because of the nature of the data we will accept the HighCharts Error #15.
* --> Highcharts Error #15 (Highcharts expects data to be sorted).
* This only results in a performance issue.
*/
var categories = ["0", "45", "90", "135", "180", "225", "270", "315"];
$('#wind-rose').highcharts({
series: [{
name: "Wind Speed",
color: '#cc3000',
data: windData
}],
chart: {
type: 'column',
polar: true
},
title: {
text: 'Wind Direction vs. Frequency (Last ' + mins/60. + ' hours)'
},
pane: {
size: '90%',
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
text: "Wind Direction"
},
xAxis: {
min: 0,
max: 360,
type: "",
tickInterval: 45,
tickmarkPlacement: 'on',
labels: {
formatter: function() {
return categories[this.value / 45] + '\u00B0';
}
}
},
yAxis: {
min: 0,
endOnTick: false,
showLastLabel: true,
title: {
text: 'Frequency (%)'
},
labels: {
formatter: function() {
return this.value + '%';
}
},
reversedStacks: false
},
tooltip: {
valueSuffix: '%'
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 20,
pointPlacement: 'on'
}
}
});
}
You can see it all here at https://gist.github.com/adamabernathy/eda63f14d79090ab1ea411a8df1e246e . Best of luck!
Source: stackoverflow.com
Related Query
- High Charts windrose from API data (JSON)
- High Charts - Set Solid Gauge Value from JSON
- How do I get data from a RESTful API JSON response in React?
- Scraping data from high charts
- High Charts stack column from json object
- High Charts - Populating Data From Array
- Customizing charts in high charts using data from csv
- Re-loading high charts with subsection of json data
- Build charts from polling JSON data
- Highcharts displays series names but missing data points from json source
- high charts parse json data
- High charts remove dots from the line graph
- World map paths data in react high charts
- Send JSON data to highcharts pie from asp.net MVC controller in C#
- change legend color high charts based on data
- Highcharts: How to load data from JSON to xAxis.categories and series.data?
- get json data from my controller in highcharts.js
- Highcharts bargraph from json data in angularJS
- Dynamically setting xAxis rotation in high charts API
- Loading data from API into a highcharts vue component
- Formatting JSON from a Pandas data frame for Highcharts within a Django template
- How to make Highcharts fetch data from external JSON file?
- Using global data in High Charts point click custom function in R Shiny
- How to load data from JSON to Highchart?
- Extracting data from a JSON call to a Postgres table for use in Highcharts (without PHP)
- Getting data from Postgres in JSON format in ROR into a Highcharts javascript
- passing json values to highcharts from .net code behind
- Charts using Highcharts with multiple series from JSON
- How to remove sliced line from pie high chart if there there is only one object in data
- Highcharts polar chart wind rose data from JSON
More Query from same tag
- highchart scatter with 24 hours time on y axis and the day of the transaction on x axis
- How to elegantly plot charts in ASP.NET MVC 3 using Highcharts?
- Plotting multiple points in highchart timeseries
- Highcharts plotLine drag xAxis event
- Use highcharter inside a function
- Highcharts - Sunburst partition
- How to save a plot as image on disk from Viewer in RStudio?
- Putting the data in the designated date in highcharts
- HighCharts Bug with LiveChart
- How to dynamically create timeline chart on click of x-range chart in highcharts angular
- HighCharts - Angular, how to get y axis labels on the vertical lines drawn from x axis
- Highcharts: create multiple series grouped my month and year using JSON data
- Highcharts/highstock set yAxis Min and Max with Scroll
- Highchart export is calling events
- Uncaught TypeError: $(...).highcharts is not a function in aspx web page with master page but it is working with basic html page
- highcharts: disable hover on column chart when i use two chart togheder
- Php to JSON passed thru to high charts
- Resize/Hide charts in Multi pane in Highcharts
- highcharts always console error ablout bubble_compiled.js?
- Highcharts with json from django query not rendered
- Custom tooltip data for specific points on highchart
- highcharts clickable labels how to goto anchor
- When I click on first pie on the page, the second appears, but then I cannot do anything with the first
- Comparing percentage with Highstock
- Wordcloud tags not appearing in a given fontSize - Highcharts
- How to pass php value in the "formatter" of Highcharts in Yii2
- Highcharts Broken Line / Line Segment
- 3d High Charts Multiple Series inside of Drilldown
- Add text to generated quadrant area by x and y plot lines only when hovering , highcharts
- Draw deadlock graph(using functions) and added ability for scaling