CODEWITHSUNDEEP
javascriptjsonapihighchartsweather
W.Howard
W.Howard

Reputation: 1

High Charts windrose from API data (JSON)

I'm quite new here (and to web development in general), so please forgive any misuses that I perpetuate... I'm trying to create a basic windrose plot with data returned (in JSON) from the MesoWest Mesonet API service. I'm using HighCharts (or attempting to), and cannot quite get it to work. Perhaps this is due to my methodology of obtaining the data from the API itself as I'm a complete amateur in this regard. The following is the Javascript code, followed by the HTML for the page. Could someone please take a look and let me know what I've done wrong? Nothing displays on the page when I attempt to load it. In addition, if you're curious as to the specifics of an API call for MesoWest, like the one I've employed here, please see http://mesowest.org/api/docs/ The .js script: 

var windrose = {
divname: "windrosediv",
tkn: "eecfc0259e2946a68f41080021724419",
load:function()
{
    console.log('loading')
    if (!window.jQuery) {
    var script = document.createElement("script");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    document.getElementByTagName("head")[0].appendChild(script);
    setTimeout(pollJQuery, 100)
    return
 }
 this.div = $("#"+this.divname);
 this.request('WBB');
 },
 pollJQuery:function()
 {
    if (!window.jQuery) {
       setTimeout(pollJQuery,100);
    } else {
        load();
    }
  },
  request:function(stn){
     console.log("making a request")
     $.getJSON(http://api.mesowest.net/v2/stations/nearesttime?callback=?',
     {
       stid:stn,
       within:1440,
                   units:'english',
       token:windrose.tkn
      }, this.receive);
  },
  receive:function (data)
     {
      console.log(data,windrose);
      stn = data.STATION[0]
      dat = stn.OBSERVATIONS
      spd += Math.round(dat.wind_speed_value_1.value)
      dir += dat.wind_direction_value_1.value
     windDataJSON = [];
for (i = 0; i < dir.length; i++) {
    windDataJSON.push([ dir[i], spd[i] 
    ]); 
        },
     }
  $(function () {
    var categories = ['0', '45', '90', '135', '180', '225', '270', '315'];
$('#container').highcharts({
      series: [{
        data: windDataJSON
    }],
    chart: {
        polar: true,
        type: 'column'
    },
    title: {
        text: 'Wind Rose'
    },
    pane: {
        size: '85%'
    },
    legend: {
        align: 'right',
        verticalAlign: 'top',
        y: 100,
        layout: 'vertical'
    },
    xAxis: {
        min: 0,
        max: 360,
        type: "",
        tickInterval: 22.5,
        tickmarkPlacement: 'on',
        labels: {
            formatter: function () {
                return categories[this.value / 22.5] + '°';
            }
        }
    },
    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: 0,
            pointPlacement: 'on'
        }
    }
});

});

And the HTML: 

<!DOCTYPE html>
<html>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js">`enter code     </script>
<script src="https://code.highcharts.com/modules/exporting.js">    </script>

<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<p class="ex">
<script type="text/javascript" src="http://home.chpc.utah.edu/~u0675379/apiDemos/windTest.js"></script>
</p>
</html>

I appreciate any guidance in this regard, thanks!!! -Will

Upvotes: 0

Views: 1235

Answers (1)

Adam A.
Adam A.

Reputation: 319

@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!

Upvotes: 1

Related Questions