polar chart wind data from JSON - Javascript highcharts

Javascript examples for highcharts:polar chart

  1. HOME
  2. Javascript
  3. highcharts
  4. polar chart

Description

polar chart wind data from JSON

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {//  w w w .j  a  v  a 2  s  .  com
    var categories = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
    $('#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'
            }
        }
    });
});

      </script> 
   </head> 
   <body> 
      <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/exporting.js"></script> 
      <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script> 
      <script language="javascript">
    var windDirection, windSpeed, windDirectionJSON, windSpeedJSON, windDataJSON;
    windDirection = "[202,229,218,208,230,202,205,213,223,227,239,250,237,240,248]";
    windSpeed = "[9,13.4,12,9.7,6.6,12.1,10.2,12.2,4.6,9,6.6,6.6,8.7,8.3,9.7]";
    windDirectionJSON = JSON.parse(windDirection);
    windSpeedJSON = JSON.parse(windSpeed);
    windDataJSON = [];
    for (i = 0; i < windDirectionJSON.length; i++) {
        windDataJSON.push([ windDirectionJSON[i], windSpeedJSON[i] ]);
    }

      </script> 
      <div id="container" style="width: 600px; height: 600px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials