Hightcharts-contour Demo

author(s): Paulo Costa

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts-contour@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/delaunay-fast@latest"></script>

<p>
  This charts is based on the Highcharts Heatmap Demo, but chart type was changed to 'contour' and you can toggle contour lines on each axis.
</p>

<div style="float:left">
  <fieldset>
    <legend>
      Contour curves
    </legend>
    <div>
      <input type="checkbox" id="contour-value" data-axis="value">
      <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>

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

<pre id="_csv" style="display: none">Date, Time, Temperature
2013-04-01,0,-0.7
2013-04-02,0,-3.4
2013-04-03,0,-1.1</pre>

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

JavaScript

//Create the chart
var chart = Highcharts.chart('container', {

  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: 2.5,
  },

  series: [{
    borderWidth: 0,
    colsize: 24 * 36e5, // one day
    tooltip: {
      headerFormat: 'Temperature<br/>',
      pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
    }
  }]
});


//Contour curves toggles
function updateContours() {
  var axes = $("input[data-axis]:checked").map(function(_, checkbox) {
    return $(checkbox).data("axis")
  }).toArray();
  chart.series[0].update({
    "contours": axes
  }, true);
};
$("input[data-axis]").change(updateContours);
updateContours();