highcharts windrose json

guess I'm the only one needing this.

by grant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<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"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-default">
      <div class="panel-heading">BDLC TPC04</div>
      <div class="panel-body">
        <div id="container"></div>
      </div>
    </div>
  </div>
</div>

<!-- formatting only below -->

JavaScript

// code to create a data set that looks like data: [[5, 2], [6, 3], [8, 2]]
// this only outputs one series all the same color
var windDirection, windSpeed, windDirectionJSON, windSpeedJSON, windDataJSON;
//windDirection = "[202,229,218,208,230,202,205,213,223,227,239,250,237,240,248]";
windDirection = "[180]";
//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]";
windSpeed = "[2.5]";
windDirectionJSON = JSON.parse(windDirection);
windSpeedJSON = JSON.parse(windSpeed);
windDataJSON = [];
for (i = 0; i < windDirectionJSON.length; i++) {
  windDataJSON.push([windDirectionJSON[i], windSpeedJSON[i]]);
}

//highcharts below    
$(function() {
  var categories = ['N', 'NNE', 'NE', 'ENE', '90', 'ESE', 'SE', 'SSE', '180', 'SSW', 'SW', 'WSW', '270', 'WNW', 'NW', 'NNW'];
  var dir2 = [[190, 5] ];
  var prime2 = [[190, 2]];
  
  $('#container').highcharts({
    plotOptions: {
      series: {
        colorByPoint: true
      }
    },
    series: [{
      name: 'Combined Swell',
      data: dir2
    }, {
      name: 'Secondary',
      color: '#FF0000',
      data: prime2
    }, {
      name: 'Tertiary',
      color: '#00FFFF',
      data: [[200, 3]]
    }],
    chart: {
      polar: true,
      type: 'column'
    },
    title: {
      text: 'Swell Direction'
    },
    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,

      labels: {
        formatter: function() {
          return this.value + ' mts.';
        }
      },
      reversedStacks: true
    },
    tooltip: {
      valueSuffix: ' mts.'
    },
    plotOptions: {
      series: {
       ...