i found this example that allows to set double click zoom to true. I need to be able to zoom in a single click how can I do that in high charts.
DoubleClick zoom example here:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/doubleclickzoomto/
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
Use mapZoom after click event. In click event you have access to values of clicked place on a map.
Note: You may need to create some if-else statement, to prevent clicks on legend, +/- buttons etc.
you can use zoomTo() , it'll zoom to a particular point wherever you have clicked
here is a fiddle
oneclickzoomTo()
Related
when I drag in the chart, it triggered a zoom action, how to change it to the behavior like Google Map? drag the map, map will move, and scale the map with mouse wheel.
I found a way to do this:
download Highmaps
import highmaps/modules/map.js into html file
add mapNavigation option to the chart:
mapNavigation: {
enabled: true,
enableButtons: false
}
I am using the "Custom Events" highchart plugin by Black Label, to detect right click in my chart. My goal is to use the right click in the chart as "Back" button when drilling out from my custom data. I know highchart has drilling options embedded, but this is a highly custom application, and my problem is that I need a way to detect right click on the x-axis crosshair line.Since the crosshair is following the mouse, 90% percent of the right clicks is triggered on the crosshair line itself, and I can not manage to detect that click. I need the event to be catched inside highcharts, because there is multiple charts on my page, and I need to know which chart was clicked on, and on what point.
I hope you understand my explanation and problem.
BR,
Benjamin Kruger
I am noticing something strange; I have a click event on a chart, and the chart fire up the event no problem.
Then I add a link in the tooltip, but when I click on it; the chart event fire, not the one that should open the link.
It works only if the tooltip will render on an area that is not part of the plot area (say, a value is high enough to render a tooltip on the title bar; if I click on that link, it will work).
I suspect that there is some sort of parameter that tell highcharts if the link in the tooltip is above the chart plot area? Otherwise it is impossible to have the tooltip open a link, if the highcharts click event is enabled.
You need to set useHTML flag as true.
Code: http://jsfiddle.net/sbochan/voh6ebt8/
Example: http://jsfiddle.net/sbochan/voh6ebt8/show
I have a charts done in highcharts in which I show and hide series depending on a checkbox (if the user clicks on a checkbox and all series are shown, if he unchecks the checkbox, some series are hidden).
It is working great.
Now I have an issue with the legends in the chart: if the series are hidden and the users enables a legend, the segment of all series (hidden or not) are shown in the chart.
I would like to handle the click item so I only handle series that are being shown.
To do that, I created an eventhandler for the legendItemClick event.
Inside it, I am able to access the legend (using this) but I am only able to call functions in a legend level, affecting all series. Is there anyway I could get to a series level?
Thanks!
Edit: created a jsfiddle as an example: http://jsfiddle.net/JLkGm/1/
Steps to reproduce:
1- unmark the checkbox
2- click twice in john + joe
Note that the segment related to Jane + Janet will show up
I would like to prevent this segment from showing if the checkbox is not checked.
ps: sorry for the js code in the checkbox event handler, we are using coffeescript, the original code was this one
toggleCompareData: (toggle) ->
columnName = COLUMN_HIGHCHARTS_TOKEN + #secondaryPrefix
if toggle
for serie in #chart.series
serie.show() if serie.stackKey is columnName
else
for serie in #chart.series
serie.hide() if serie.stackKey is columnName
It looks like bug, reported to our developers here: https://github.com/highslide-software/highcharts.com/issues/3309
I am using setExtremes to zoom in on detail in a chart, as well as allowing the user to zoom 'x,y' by selecting in the chart. When the user zooms, they get a 'reset zoom' button, however when I call setExtremes, I don't.
Is there a way for me to force the 'reset zoom' button to appear programatically ?
UPDATE:
calling
if( !chart.resetZoomButton ) {
chart.showResetZoom();
}
inside the afterSetExtremes event handler makes the button appear, but clicking it doesn't do anything.
UPDATE:
Rather than calling setExtremes, I've changed to calling
chart.xaxis[0].zoom(minx, maxx);
chart.yaxis[0].zoom(miny, maxy);
chart.redraw();
This has the same affect as the user zoomin in by selecting on the chart.
Just had a look around the HighCharts source code, it looks like this may work out for you:
chart.showResetZoom();
Also, in order for the button to work correctly, you should use axis.zoom instead of setting the extremes:
axis.zoom(newMin,newMax);
Let me know if it works!
You can use showResetZoom, but you have to check if the reset button is already visible, otherwise it won't desapear.
if( !chart.resetZoomButton ) {
chart.showResetZoom();
}
This approach works well:
if (!$('.highcharts-button').length) {
chart.showResetZoom();
}
This is assuming that the only button that might show is the "Reset Zoom" button. If it is already there, don't show another.
If you don't do this check, a new button is added each time you call showResetZoom(). Clicking the visible (most recent) button resets the zoom and removes the button but the older buttons are still visible and do nothing.
If you are using setExtremes you can also set min and max to null to reset:
chart.xAxis[0].setExtremes(null, null)