How to make an ajax call when the graph is zoomed in. I tried with chart.events.selection but get some javascript error.
selection: function(event) {
// log the min and max of the primary, datetime x-axis
console.log(
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.xAxis[0].min),
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.xAxis[0].max)
);
}
gives error "Uncaught TypeError: Cannot read property '0' of undefined".
Also this function gets called when i graph is plotted infinite no of times. How to I prevent that?
http://api.highcharts.com/highcharts/chart.events.selection
says it should get fired when an area under graph is selected.
here is my jsfiddle
https://jsfiddle.net/dhptnfkt/36/ (you need to un-comment the code highlighted to get the error).
In your example you have:
events: {
selection: getSelection(event)
}
When you do not define the function on the spot you just need to pass the function reference, or else you are passing the parameter event which in your case is an undefined variable.
Instead it should look like this (JSFiddle):
events: {
selection: getSelection
}
Related
I have seen similar questions just like these (even with similar title) but none of them provide the answer I need.
I have a bar-negative-stack chart with drilldown.
In order to keep the Y-axis centered, I am calculating the maximum value among the series and setting it as the extremes of the chart.
The thing is I haven't find a good place to put this logic. I have tried putting it on redraw or render events but, since I am changing the yAxis, this causes a stackoverflow.
What I have so far that is more or less working is having the drilldown event set up with a setTimeout to delay the calculation, otherwise it would get the values before the drilldown. I would need some event like drilldownFinish.
Here's a working fiddle with this drilldown logic (not on negative-bar-stack though): http://jsfiddle.net/6qpq78do/
Any ideas on how to do this without a setTimeout?
Thanks
Maximum callstack exceeded message is caused by setExtremes function. Its third argument is redraw - it's true by default: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
So setExtremes will call the redraw event again and the redraw event will call setExtremes and so on...
The solution here is to create a flag (redrawEnbaled) that is going to control the access to the logic placed in redrawEvent and prevent this infinite recursive loop:
var redrawEnabled = true;
(...)
events: {
redraw: function() {
if (redrawEnabled) {
redrawEnabled = false;
let values = [];
this.series.forEach(s => {
s.yData.forEach(v => values.push(Math.abs(v)));
});
let max = values.reduce((acc, val) => (acc > val) ? acc : val, 0);
this.yAxis[0].setExtremes(-max, max);
redrawEnabled = true;
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/zjuy21k5/
I am new to Highcharts.
I have the following for a column chart:
xAxis: {
....
events: {
afterSetExtremes: function(event) {
//do some work here.
//event has a property called target
//event has another property called currentTarget
}
}
...
}
I notice that event has two properties that seem to be identical (I am not sure). Are they the same? Any differnce? I need to know the final x values shown on a chart after zooming.
Thanks and regards.
Assuming you are using jQuery, it would be the same as those in jQuery events
event.currentTarget Returns: Element
Description: The current DOM element within the event bubbling phase.
Read More # http://api.jquery.com/event.currenttarget/
event.target Returns: Element
Description: The DOM element that initiated the event.
Read More # http://api.jquery.com/event.target/
I need to integrate highcharts with table that contains related data. Each user's hover event should set particular background color to a table row. I don't know how can I get some information about hovered element in highcharts. I've created some demo to illustrate the problem here
plotOptions: {
spline: {
point:{
events:{
mouseOver: function(e) {
$('span').show().text('hover action').fadeOut();
}
}
}
}
}
As you can see I've manged to get noticed about each hover event but I still don't know which point on charts was hovered. How can I get this?
You can get access to the point's object in that event function via the this property.
To show the series name and the point index of the point you just hovered over you can do:
$('span').show().text(this.series.name + ': ' + this.index).fadeOut();
I want to add a reference series to my charts (i.e. a reference price). Axis.addPlotLine() does it, but I want to be able to toggle this series from the legend; a plain plotLine does not show up in the graph's legend.
Another reason why plotLine does not seem like a good solution is that it does not get accounted for by the viewport calculations. Which means that toggling other series might lead to the plotLine appearing outside the viewport due to zooming.
The simplest way to accomplish what I want would be, to add a dynamic series via chart.addSeries. But it's impossible to call this method from within a triggered addSeries event because chart.addSeries is set to null while in the event handler.
Tying in to the redraw event creates a whole lot of difficulties as well, because render() can't be called anymore.
How would you go about it?
Update:
As per the comment of Pawel Fus, I unsuccessfully tried the following:
[…]
events: {
load: function (event) {
foo = this;
},
addSeries: function(event) {
console.log(foo) // returns chart object as expected
console.log(foo.addSeries) // undefined
}
}
Solution is to store addSeries on load event, and use stored function when adding series. Live example: http://jsfiddle.net/3bQne/808/
events: {
load: function (event) {
foo = this.addSeries;
},
addSeries: function (event) {
if (iterator) {
iterator--;
foo.call(this, {
data: [100, 200, 100, 100, 200, 300]
});
}
}
},
Still you can stick with plotLine only.
If the position of the line is static that is the best way.
If the position is dynamic then you can still go with plotLine.
There are events for adding and removing plotLine on the fly.
API link
removePLotLine() : http://api.highcharts.com/highcharts#Axis.removePlotLine
addPlotLine() : http://api.highcharts.com/highcharts#Axis.addPlotLine
I hope this will help you.
I have 3 datasets within my series (low, normal, high) displaying on a scatter plot.
How can I force the tooltip and markers to be enabled only for the normal data set?
Many thanks
formatter: Function
Callback function to format the text of the tooltip. Return false to disable tooltip for a specific point on series.
Reference:
http://api.highcharts.com/highcharts#tooltip.formatter
See shared tooltip formatter. It gives you better control over the tooltip.
http://api.highcharts.com/highcharts#tooltip
EDIT: I have added some code. See the custom tooltip formatter;
tooltip: {
formatter: function () {
if (this.series.name == "Male") {
return "<b>" + this.series.name + "</b><br>" + this.x + " cm, " + this.y + " kg";
} else return " ";
}
}
See the fiddle for example: http://jsfiddle.net/androdify/cweC6/
This solution is for keeping tooltips on all series, but only display one tooltip at a time corresponding to the point actually hovered over.
Look through the code for where it is specifying a variable by the name of hoverPoints and change it to this:
{hoverPoint:l,hoverSeries:b,hoverPoints:l?[l]:[]}
This is the code for Highstock, so if you are using vanilla Highcharts you may need to change variable names around a bit. To explain how this works, the default value for hoverpoints is an array of all points on that spot on the x axis. Changing it to an array containing the single point that you actually hovered over, the value of hoverPoint, causes highcharts to ignore the other hit points.