Highcharts Demo

author(s): Torstein Hønsi

by perqa

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 320px; width: 1000px; margin: 0 auto"></div>
<pre id="csv" style="display:...

CSS

.highcharts-tooltip>span {
	background: rgba(255,255,255,0.85);
	border: 1px solid silver;
	border-radius: 3px;
	box-shadow: 1px 1px 2px #888;
	padding: 8px;
	z-index: 2;
}

JavaScript

console.log('TEST1');
$(function () { console.log('TEST2');

    
     var url="http://graphite.per:5000/render?target=smartSummarize(ki_fidelix.a0095060_a1_hd901_gm601.value,'1h','avg')&from=20121201&until=20130101&format=json";
     
    $.getJSON( url )
             .done(function( json ) {
                 console.log(  json[0].datapoints );
                 data = json[0].datapoints;
             })
             .fail(function( jqxhr, textStatus, error ) {
                 var err = textStatus + ", " + error;
                 console.log( "Request Failed: " + err );
             });
    /**
     * This plugin extends Highcharts in two ways:
     * - Use HTML5 canvas instead of SVG for rendering of the heatmap squares. Canvas
     *   outperforms SVG when it comes to thousands of single shapes.
     * - Add a K-D-tree to find the nearest point on mouse move. Since we no longer have SVG shapes
     *   to capture mouseovers, we need another way of detecting hover points for the tooltip.
     */
    (function (H) {
        var wrap = H.wrap,
            seriesTypes = H.seriesTypes;

        /**
         * Recursively builds a K-D-tree
         */
        function KDTree(points, depth) {
            var axis, median, length = points && points.length;

            if (length) {

                // alternate between the axis
                axis = ['plotX', 'plotY'][depth % 2];

                // sort point array
                points.sort(function (a, b) {
                    return a[axis] - b[axis];
                });

                median = Math.floor(length / 2);

                // build and return node
                return {
                    point: points[median],
                    left: KDTree(points.slice(0, median), depth + 1),
                    right: KDTree(points.slice(median + 1), depth + 1)
                };

            }
        }

        /**
         * Recursively searches for the nearest neighbour using the given K-D-tree
       ...