Highcharts test tool

by Torstein Hønsi

HTML

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

<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>

JavaScript

/**
 * Highcharts plugin to draw crosses for null points
 */
(function(H) {
    H.wrap(H.Series.prototype, 'drawPoints', function(proceed) {
        var series = this,
            points = this.points,
            renderer = this.chart.renderer;
        proceed.call(this);
        H.each(points, function(point, i) {
            var lastPlotY,
                lastI = i - 1,
                nextPlotY,
                nextI = i + 1,
                plotY;
            if (point.y === null) {
                while (lastI >= 0 && lastPlotY === undefined) {
                    lastPlotY = points[lastI].plotY;
                    lastI--;
                }
                while (nextI <= points.length - 1 && nextPlotY === undefined) {
                    nextPlotY = points[nextI].plotY;
                    nextI++;
                }

				// Interpolate
                plotY = (H.pick(lastPlotY, nextPlotY) + H.pick(nextPlotY, lastPlotY)) / 2;

                var path = ['M', point.plotX - 3, plotY - 3,
                    'L', point.plotX + 3, plotY + 3,
                    'M', point.plotX - 3, plotY + 3,
                    'L', point.plotX + 3, plotY - 3
                ];
                if (point.graphic) {
                    point.graphic.attr({
                        d: path
                    });
                } else {
                    point.graphic = renderer.path(path)
                        .attr({
                            'stroke': 'gray',
                            'stroke-width': 2,
                            fill: 'none'
                        })
                        .add(series.markerGroup);
                }
            }
        });

    });
}(Highcharts));


$('#container').highcharts({

	title: {
    	text: 'Highcharts - show crosses for missing data'
    },
    
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ]
    },

    series: [{
       ...