Highcharts Demo

author(s): Torstein Hønsi

HTML

<!--
Keep in mind that 3-D contours won't work with the master branch of Highcharts yet

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
-->
<script src="https://rawgithub.com/paulo-raca/highcharts.com/axis-fixes/js/highcharts.src.js"></script>
<script src="https://rawgithub.com/paulo-raca/highcharts.com/axis-fixes/js/highcharts-3d.src.js"></script>
<script src="https://rawgithub.com/paulo-raca/highcharts.com/axis-fixes/js/modules/heatmap.src.js"></script>

<script src="https://rawgithub.com/paulo-raca/highcharts-contour/master/highcharts-contour.js"></script>
<script src="https://rawgithub.com/ironwallaby/delaunay/master/delaunay.js"></script>

<div id="container" style="height: 600px; width:600px"></div>

CSS

#container {
	margin: 0 auto;
}

JavaScript

$(function () {
    
    // For testing purposes, generate some random interval data
    var startDate = new Date(2015, 8, 1);
    var endDate = new Date(2015, 8, 30);
    
    var data=[];
    for (var date=new Date(startDate), x=1; date.getTime()<=endDate.getTime(); date.setDate(date.getDate() + 1), x+=1) {
        
        // TODO: switch x and z axes so we can get days on the depth-z axis
        for (var y=0; y<24*1; y+=1) {	// 24 hours * 1 interval per hour
            var value = -0.5 * Math.random()*x*x + 0.25*x*y + Math.random()*y*y + 500;
            data.push({x:date.getTime(), z:y*60*60*1000, y:value, value:value});	// minutes per interval * 60 seconds per minute * 1000 ms per second
        }
    }
    
    function HSVtoRGB(h, s, v) {
        var r, g, b, i, f, p, q, t;
        if (arguments.length === 1) {
            s = h.s, v = h.v, h = h.h;
        }
        i = Math.floor(h * 6);
        f = h * 6 - i;
        p = v * (1 - s);
        q = v * (1 - f * s);
        t = v * (1 - (1 - f) * s);
        switch (i % 6) {
            case 0: r = v, g = t, b = p; break;
            case 1: r = q, g = v, b = p; break;
            case 2: r = p, g = v, b = t; break;
            case 3: r = p, g = q, b = v; break;
            case 4: r = t, g = p, b = v; break;
            case 5: r = v, g = p, b = q; break;
        }
        return {
            r: Math.round(r * 255),
            g: Math.round(g * 255),
            b: Math.round(b * 255)
        };
    }
    
    var stops = [];
    var num_tones = 32;
    for (var i=0; i<num_tones; i++) {
        //var tone = Math.round(255-255*i/(num_tones-1));
        var rgb = HSVtoRGB(1 - ((num_tones/2 + i)%num_tones)/(num_tones-1), 1.0, 0.8);
        tone = 'rgb('+ rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
        stops.push([(i+0)/(num_tones), tone]);
        stops.push([(i+1)/(num_tones), tone]);
    }

    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            //inverted: true,
 ...