Highcharts Demo

author(s): Torstein Hønsi

by J. Albert Bowden

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.src.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.src.js"></script>
<script src="https://rawgithub.com/paulo-raca/highcharts-contour/master/highcharts-contour.js"></script>
<script src="https://rawgithub.com/ironwallaby/delaunay/master/delaunay.js"></script>

<p>This charts is based on the <a href="http://www.highcharts.com/maps/demo/heatmap">Highcharts Heatmap Demo</a>, but chart type was changed to 'contour', and you can toggle contour lines on each axis</p>

<fieldset style="float:left">
  <legend>
    Contour curves
  </legend>
  <div>
    <input type="checkbox" id="contour-value" data-axis="value" checked>
    <label for="contour-value">Value Axis</label>
  </div>
  <div>
    <input type="checkbox" id="contour-x" data-axis="x">
    <label for="contour-x">X Axis</label>
  </div>
  <div>
    <input type="checkbox" id="contour-y" data-axis="y">
    <label for="contour-y">Y Axis</label>
  </div>
</fieldset>

<div id="container" style="height: 400px; max-width: 400px; margin: 0 auto"></div>

<pre id="csv" style="display: none">Date, Time,...

JavaScript

$(function() {

  $('#container').highcharts({
    data: {
      csv: document.getElementById('csv').innerHTML
    },
    chart: {
      type: 'contour',
      inverted: true
    },
    title: {
      text: 'Highcharts heat map',
      align: 'left'
    },
    subtitle: {
      text: 'Temperature variation by day and hour through May 2015',
      align: 'left'
    },
    xAxis: {
      tickPixelInterval: 50,
      min: Date.UTC(2015, 4, 1),
      max: Date.UTC(2015, 4, 30)
    },
    yAxis: {
      title: {
        text: null
      },
      labels: {
        format: '{value}:00'
      },
      minPadding: 0,
      maxPadding: 0,
      startOnTick: false,
      endOnTick: false,
      tickPositions: [0, 6, 12, 18, 24],
      tickWidth: 1,
      min: 0,
      max: 23
    },
    colorAxis: {
      stops: [
        [0, '#3060cf'],
        [0.5, '#fffbbc'],
        [0.9, '#c4463a']
      ],
      min: -5,
      tickInterval: 1
    },
    series: [{
      borderWidth: 0,
      tooltip: {
        headerFormat: 'Temperature<br/>',
        pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
      }
    }]
  });

  function updateContours() {
    var chart = $('#container').highcharts();
    var axes = $("input[data-axis]:checked").map(function(_, checkbox) {
      return $(checkbox).data("axis")
    });
    chart.series[0].update({
      "contours": axes
    }, true);
  };
  updateContours();
  $("input[data-axis]").change(updateContours);
});