Highcharts test tool
by malonso
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<a id="update" href="#">Update</a>
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.splinedata || series.segments,
lastSeg = segments[segments.length - 1],
lastPoint = lastSeg[lastSeg.length - 1],
nextLastPoint = lastSeg[lastSeg.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);
// 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'
);
if (!series.arrowHead) {
series.arrowHead = series.chart.renderer.path(path)
.attr({
fill: series.color
})
.add(series.group);
} else {
series.arrowHead.attr({
d: path
});
}
};
}(Highcharts));
var chart = new Highcharts.Chart({
chart: {
...