Highcharts - advanced tooltip functionality needed
I have an issue when plotting using an area graph with stacking normal. My last question I asked here was: Highcharts help - Area chart stacking
Which was basically asking how to plot the values to stack without normalizing the data. I was told I could subtract the one series from the other to make the graph appear properly, however, the values when you hover are skewed because of this calculation.
Example: Before:
Series Total: [0,0,0,1,1,2,3]
Series In-Service: [0,0,0,0,0,1,2]
So I fix the data to graph it:
Series Total: [0,0,0,1,1,1,1]
Series In-Service: [0,0,0,0,0,1,2]
Now it graphs fine but the tool tip is wrong, for example the last data point should be:
Series Total: 3
Series In-Service: 2
But it shows:
开发者_Python百科Series Total: 1
Series In-Service: 2
And since the tooltip does not have access to the other points we can't do a fix calculation to display it. Unless I use shared: true, but I cant use shared because the tooltip is too massive because of all the series I have.
Please ask any questions if I am unclear, I really need some help.
Use a list of objects when setting the series data. You can add additional options to the datapoint object and access it from the tooltip formatter.
See http://jsfiddle.net/jgdreyes/JvSBk/ for an example.
var seriesTotal = [
{x: 0, y: 0, customTooltip: 0},
{x: 1, y: 0, customTooltip: 0},
{x: 2, y: 0, customTooltip: 0},
{x: 3, y: 1, customTooltip: 1},
{x: 4, y: 1, customTooltip: 1},
{x: 5, y: 1, customTooltip: 2},
{x: 6, y: 1, customTooltip: 3}
];
var chart = new Highcharts.Chart({
series: [
{data: seriesTotal}
],
tooltip: {
formatter: function() {
//access customTooltip option
return this.point.customTooltip;
}
},
});
Although perhaps not optimal, I've done the following in similar situations:
In my config, I've setup the tooltip formatter to use the point name.
tooltip: {
formatter: function() {
return this.point.name;
}
}
And then as I'm adding points, I simply set the name with my custom HTML as in...
// get x, y and other vars
series[0].addPoint({x: x, y: y, name: 'In Service: ' + inService }, false);
series[1].addPoint({x: x, y: y, name: 'Total: ' + total }, false);
And of course you would use the non-adjusted value for the total.
精彩评论