Hightcharts-contour Demo

author(s): Paulo Costa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/expr-eval/1.2.0/bundle.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts-coloraxis-bands@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts-contour@latest"></script>

<div style="float:left">
  <fieldset>
    <legend>
      Color Axis Banding
    </legend>
    <div id="slider">
      <div id="custom-handle" class="ui-slider-handle" style="width: 3em; text-align: center;"></div>
    </div>
  </fieldset>
  <fieldset>
    <legend>
      Tooltip
    </legend>
    <div>
      <input type="checkbox" id="tooltip-interpolate" checked>
      <label for="tooltip-interpolate">Interpolated</label>
    </div>
  </fieldset>
  <fieldset>
    <legend>
      Contour curves
    </legend>
    <div>
      <input type="checkbox" id="contour-value" data-contour-axis="value" checked>
      <label for="contour-value">Value Axis</label>
    </div>
    <div>
      <input type="checkbox" id="contour-x" data-contour-axis="x">
      <label for="contour-x">X Axis</label>
    </div>
    <div>
      <input type="checkbox" id="contour-y" data-contour-axis="y">
      <label for="contour-y">Y Axis</label>
    </div>
  </fieldset>
  <fieldset>
    <legend>
      Plot
    </legend>
    <label for="expression">Function <input id="expression" type="text" value="x^2 - y^2"></label>
    <button id="rand_expression">Random Function</button>
  </fieldset>
</div>

<div id="container" style="height:550px; width:500px; margin: 0 auto;"></div>

JavaScript

//When doing live modifications to the chart, we use a smaller number of points for performance.
//When the modifications are over, we redraw using a large number of points for higher quality.
var fastGridWidth = 7;
var prettyGridWidth = 21;

//Creates a new plot function, either from an user expression or from random parameters.
var newDataFunction = function(expr) {
  if (!expr) {
    var a = Math.round(100 * (Math.random() * 2 - 1)) / 100;
    var b = Math.round(100 * (Math.random() * 2 - 1)) / 100;
    var c = Math.round(100 * (Math.random() * 2 - 1)) / 100;
    var d = Math.round(100 * (Math.random() * 2 - 1)) / 100;
    var e = Math.round(100 * (Math.random() * 2 - 1)) / 100;
    var f = Math.round(100 * (Math.random() * 2 - 1)) / 100;

    expr = a + " + " + b + "*x + " + c + "*x*x + " + d + "*y + " + e + "*y*y + " + f + "*x*y";
  }
  var parsed = exprEval.Parser.parse(expr);
  var func = function(coord) {
    try {
      return parsed.evaluate(coord)
    } catch (e) {
      return null;
    }
  }
  return {
    text: expr,
    func: func,
  };
}


//Create the chart
var chart = Highcharts.chart('container', {
  title: {
    text: '',
  },
  subtitle: {
    text: '',
  },
  tooltip: {
    pointFormat: 'X: <b>{point.x:.1f}</b><br/>Y: <b>{point.y:.1f}</b><br/>Value: <b>{point.value:.2f}</b><br/>',
  },
  yAxis: {
    title: {
      text: 'Axis-Y',
    },
    tickPixelInterval: 50,
    minPadding: 0,
    maxPadding: 0,
    min: -10,
    max: 10,
  },
  xAxis: {
    title: {
      text: 'Axis-X',
    },
    tickPixelInterval: 50,
    minPadding: 0,
    maxPadding: 0,
    min: -10,
    max: 10,
  },
  colorAxis: {
    stops: [
      [0.0, '#3060cf'],
      [0.5, '#fffbbc'],
      [0.9, '#c4463a'],
    ],
    banding: 0.5,
    tickPixelInterval: 20,
  },
  series: [{
    id: 'contour-serie',
    type: 'contour',
    showEdges: true,
    dataFunction: newDataFunction($('#expression').val()).func,
    grid_width: prettyGridWidth,
    interpolateTooltip:...