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!


Related Query

More Query from same tag