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="y_expression">Y Function <input...

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;


var newDataFunction = function(y_expr, value_expr) {
  if (!y_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;

    y_expr = a + " + " + b + "*x + " + c + "*x*x + " + d + "*z + " + e + "*z*z + " + f + "*x*z";
  }
  if (!value_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;

    value_expr = a + " + " + b + "*x + " + c + "*x*x + " + d + "*z + " + e + "*z*z + " + f + "*x*z";
  }
  var y_parsed = exprEval.Parser.parse(y_expr);
  var value_parsed = exprEval.Parser.parse(value_expr);
  var func = function(coord) {
    var ret = {
      y: 0,
      value: 0
    };
    try {
      ret.y = y_parsed.evaluate(coord);
    } catch (e) {}
    try {
      ret.value = value_parsed.evaluate(coord);
    } catch (e) {}
    return ret;
  }
  return {
    y_text: y_expr,
    value_text: value_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: {
       ...