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/highcharts-3d.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>
<script src="https://cdn.jsdelivr.net/npm/highcharts-draggable-3d@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>
    <div>
      <input type="checkbox" id="contour-z" data-contour-axis="z">
      <label for="contour-z">Z Axis</label>
    </div>
  </fieldset>
  <fieldset>
    <legend>
      Plot
    </legend>
    <label for="expression">Function <input id="expression" type="text" value="x^2 - z^2"></label>
    <button id="rand_expression">Random Function</button>
  </fieldset>
</div>

<div id="container" style="height:550px; width:500px;...

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 + "*z + " + e + "*z*z + " + f + "*x*z";
  }
  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', {
  chart: {
    margin: 125,
    marginBottom: 175,
    options3d: {
      enabled: true,
      alpha: 30,
      beta: 45,
      depth: 250,
      fitToPlot: false,
      axisLabelPosition: 'auto',
      drag: {
        enabled: true,
        minBeta: Number.NEGATIVE_INFINITY,
        maxBeta: Number.POSITIVE_INFINITY,
        snap: 15,
        animateSnap: true,
        beforeDrag: function() {
          chart.series[0].update({
            grid_width: fastGridWidth
          });
        },
        afterDrag: function() {
          chart.series[0].update({
            grid_width: prettyGridWidth
          });
        }
      },
      frame: {
        size: 10,
        visible: 'auto',
        bottom: {
          color: '#999'
        },
        back: {
          color: '#999'
        },
        side: {
          color: '#999'
        }
      }
    }
...