Highcharts Demo

author(s): Torstein Hønsi

by J. Albert Bowden

HTML

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

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

JavaScript

$(function () {

    var res = 11;
    var data = [];
    for (var i=0; i<res; i++) {
        for (var j=0; j<res; j++) {
            var x = 200*(i/(res-1)) - 100;
            var y = 200*(j/(res-1)) - 100;
            var value = x*x - y*y;
            data.push([x, y, value]);
        }
    }
    
    var stops = [];
    var num_tones = 16;
    for (var i=0; i<num_tones; i++) {
        var tone = Math.round(255-255*i/(num_tones-1));
        tone = 'rgb('+ tone + ',' + tone + ',' + tone + ')';
        stops.push([(i+0)/(num_tones), tone]);
        stops.push([(i+1)/(num_tones), tone]);
    }
    
    $('#container').highcharts({
        chart: {
            type: 'contour',
        },
        title: {
            text: 'Saddle point: X² - Y²',
        },
        subtitle: {
            text: 'This chart tweaks the linear gradient in several constant-color ranges, creating nice contour curves',
        },
        xAxis: {
            min:-100,
            max:100,
        },
        yAxis: {
            min:-100,
            max:100,
        },

        colorAxis: {
            stops: stops,
        },

        series: [{
            data: data,
            grid_width: res,
        }]

    });
});