Highcharts test tool

by Torstein Hønsi

HTML

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

<div id="container" style="height: 300px"></div>

JavaScript

/**
 * Highcharts Module for adding arrow heads to lines
 */
(function (Highcharts) {                                             
                                             
    var SplineSeries = Highcharts.seriesTypes.spline;
    
    // override the drawLine method
    var splineDrawGraph = SplineSeries.prototype.drawGraph;
    SplineSeries.prototype.drawGraph = function() {
    
        var arrowLength = 15,
            arrowWidth = 8,
            series = this,
            segments = series.points,
            lastPoint = segments[segments.length - 1],
            nextLastPoint = segments[segments.length - 2],
            angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) /
            (lastPoint.plotY - nextLastPoint.plotY)),
            path = [];
    
        if (angle < 0) {
            angle = Math.PI + angle;
        }
    
        // call the original method
        splineDrawGraph.apply(series, arguments);
    
    		console.log(path);
    
        // last point
        path.push('M', lastPoint.plotX, lastPoint.plotY);
        path.push(
            'L',
            lastPoint.plotX + arrowWidth * Math.cos(angle),
            lastPoint.plotY - arrowWidth * Math.sin(angle)
        );
        path.push(
            lastPoint.plotX + arrowLength * Math.sin(angle),
            lastPoint.plotY + arrowLength * Math.cos(angle)
        );
        path.push(
            lastPoint.plotX - arrowWidth * Math.cos(angle),
            lastPoint.plotY + arrowWidth * Math.sin(angle),
            'Z'
        );
    
        series.chart.renderer.path(path)
            .attr({
                fill: series.color
            })
            .add(series.group);
    
    };
    
}(Highcharts));


var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'spline'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9,...