arrow of line chart highcharts - highcharts

Question

I need to draw arrow of my line chart but i don't know well, here there are my code that make arrow http://jsfiddle.net/VQyVs/ I have probleme with serie 2
var lineSeries = Highcharts.seriesTypes.line;
var lineDrawGraph = lineSeries.prototype.drawGraph;
lineSeries.prototype.drawGraph = function() {
var arrowLength = 15,
arrowWidth = 9,
series = this,
segments = series.linedata || 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 = [];
angle = Math.PI+angle;
lineDrawGraph.apply(series, arguments);
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);
};
Can any one help me? Thanks

Answer 1

Series 2 is not sorted properly. It's putting the arrow head on the last point in the array which happens to be the first point on the X axis.
{
data: [[0.10391336,-0.647706317],
[0.208684058,-0.439022259],
[0.031920245,-0.407102014],
[-0.280249839,-0.687351853]].sort(), // I added the .sort...
marker: {
enabled: false
}
}
UPDATE
I think I understand what you are after now. To reverse the direction of the head, you'll have to test for the direction (is it moving to the left or right) and then modify how it's drawn:
if (lastPoint.plotX > nextLastPoint.plotX)
{
// to the right
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'
);
}
else
{
// to the left
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'
);
}
See new fiddle.

Answer 2

The problem is with the overriding of the original value for angle:
angle = Math.PI+angle;
Should be:
if (lastPoint.plotX > nextLastPoint.plotX){
if (angle < 0) angle = Math.PI + angle;
}
else{
if (angle > 0) angle = Math.PI + angle;
}
Mark's point about the direction of the line was correct but the proposed solution did not always work depending on the slope of the last two points of the line.
See fiddle