Highcharts Demo

author(s): Torstein Hønsi

by Nhi Nguyen

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/windbarb.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

#csv {
  display: none;
}

JavaScript

Highcharts.seriesTypes.windbarb.prototype.beaufortFloor = [0, 0.6710820000000001, 3.5791040000000005, 7.605596, 12.303170000000001, 17.89552, 24.158952000000003, 31.093466000000003, 38.475368, 46.528352000000005, 54.80503, 63.752790000000005, 73.14793800000001];


Highcharts.seriesTypes.windbarb.prototype.windArrow = function(point) {
  var knots = point.value * 0.8689762419, //value to convert mph to knots
    level = point.beaufortLevel,
    path,
    barbs,
    u = this.options.vectorLength / 20,
    pos = -10;

  if (point.isNull) {
    return [];
  }

  if (level === 0) {
    return this.chart.renderer.symbols.circle(-10 * u, -10 * u,
      20 * u,
      20 * u
    );
  }

  // The stem and the arrow head
  path = [
    'M', 0, 7 * u, // base of arrow
    'L', -1.5 * u, 7 * u,
    0, 10 * u,
    1.5 * u, 7 * u,
    0, 7 * u,
    0, -10 * u // top
  ];

  // For each full 50 knots, add a pennant
  barbs = (knots - knots % 50) / 50; // pennants
  if (barbs > 0) {
    while (barbs--) {
      path.push(
        pos === -10 ? 'L' : 'M',
        0,
        pos * u,
        'L',
        5 * u,
        pos * u + 2,
        'L',
        0,
        pos * u + 4

      );

      // Substract from the rest and move position for next
      knots -= 50;
      pos += 7;
    }
  }

  // For each full 10 knots, add a full barb
  barbs = (knots - knots % 10) / 10;
  if (barbs > 0) {
    while (barbs--) {
      path.push(
        pos === -10 ? 'L' : 'M',
        0,
        pos * u,
        'L',
        7 * u,
        pos * u
      );
      knots -= 10;
      pos += 3;
    }
  }

  // For each full 5 knots, add a half barb
  barbs = (knots - knots % 5) / 5; // half barbs
  if (barbs > 0) {
    while (barbs--) {
      path.push(
        pos === -10 ? 'L' : 'M',
        0,
        pos * u,
        'L',
        4 * u,
        pos * u
      );
      knots -= 5;
      pos += 3;
    }
  }
  return path;
};
//data in m/s
let dataWindbarb = [
  [9.8, 177.9],
  [10.1, 177.2],
  [11.3,...