In Highcharts time series currently we are able to zoom in data and we can reset zoom through button but i want something that can zoom out in steps in same manner like how we zoom in. Is there any way? Any help would be great.Thanks in advance
The idea is to find, after zooming selection, new xAxis extremes, and keep them in extremesXmin and extremesXmax arrays, then set these previous extremes after clicked resetZoomButton:
chart: {
zoomType: 'x',
events: {
selection: function(e) {
if (e.xAxis) {
extremesXmin.push(e.xAxis[0].min)
extremesXmax.push(e.xAxis[0].max)
}
zoomLevel++;
}
}
},
To control the button and set new extremes, you need to overwrite zoomOut() function inside showResetZoom() function inside Highcharts prototype:
function zoomOut() {
if (zoomLevel > 1) {
chart.xAxis[0].setExtremes(extremesXmin[extremesXmin.length - 2], extremesXmax[extremesXmax.length - 2])
extremesXmin.pop()
extremesXmax.pop()
zoomLevel--;
} else {
chart.zoomOut();
}
}
Working demo: https://jsfiddle.net/BlackLabel/h8af7L9g/
Related
I already know what chart save as image in client-side(web)
and I know save as image in server-side(phantom.js)
but the chart has a scroll and
I want to save full screen(end scrolling) as one image file
enter image description here
How can I do that?
thnx
You can add additional chart options using exporting.chartOptions property. Check demo I posted you below with xAxis scroll enabled and additional options to export where the scroll is disabled on chart load event.
Code - exporting.chartOptions :
exporting: {
chartOptions: {
chart: {
events: {
load: function() {
var chart = this,
max = chart.xAxis[0].dataMax;
this.update({
xAxis: {
max: max,
scrollbar: {
enabled: false
}
}
});
}
}
}
}
}
Demo:
https://jsfiddle.net/r1p47ekj/
I have created my own master-detail chart following the Highcharts docs and this example: https://www.highcharts.com/demo/dynamic-master-detail
Eveything works fine but I would like to add a feature: When the chart is loaded the last 50 data points should automatically be selected in the master chart and thus shown in the detail chart.
I tried to manually trigger the selection event but it did not work out. Any idea how to solve this?
You can fire selection event in chart load event and set correct extremes:
chart: {
...
events: {
load: function() {
var points = this.series[0].points,
xAxis = this.xAxis[0];
Highcharts.fireEvent(this, 'selection', {
xAxis: [{
min: points[points.length - 51].x,
max: points[points.length - 1].x
}],
});
},
selection: function(event) {
...
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/xy8qug9h/
API: https://api.highcharts.com/highcharts/chart.events.load
How do I hide the bar data by clicking the bar and refresh the chart? I would like to have almost the same functionality as clicking on the legend.
Jsfiddle: https://jsfiddle.net/Nadiyaka/005z7dut/1/
For example, if I click on 'Asia' bar, I want the data to become hidden and the chart to be reloaded to see other data bigger.
So far I'm able only to hide the data, but the chart isn't refreshing:
series: [{
data: [1052, 954, 4250, 740, 38],
events: {
click: function(e) {
var chart = $("#container").highcharts();
index = event.point.x;
chart.series[0].data[index].graphic.hide();
chart.series[0].data[index].dataLabel.hide();
}
}
}]
There is no option for hiding points (except the points in pie series), but you can achieve the same effect by setting the point's value to null.
events: {
click: function(e) {
var point = e.point;
point.series.chart.pointer.reset(false); // this is needed to prevent the tooltip from moving around
point.update({
y: null,
holdY: point.y // I preserve original value needed on showing
});
}
}
For showing the columns, attach events to labels
load: function() {
var chart = this,
points = this.series[0].data;
points.forEach(function(point) {
chart.xAxis[0].ticks[point.x].label.on('click', function() {
if (point.y === null) {
point.update({
y: point.holdY
});
}
});
});
}
example: https://jsfiddle.net/005z7dut/2/
I have two goals. First is to be able to disable the default dragging on the main chart, and using drag and multiple select on the columns. second I want to know if it is possible to also reflect this selection on the navigator bar under the main chart. Please advise.
Thanks
This is possible by using point.select() and chart.events.selection event. Here is a sample config:
chart: {
renderTo: 'container',
type: 'column',
panning: false,
zoomType: 'x',
events: {
selection: function (e) {
var xAxis = e.xAxis[0],
flag = false; // first selected point should deselect old ones
if(xAxis) {
$.each(this.series, function (i, series) {
$.each(series.points, function (j, point) {
if( point.x >= xAxis.min && point.x <= xAxis.max ) {
point.select(true, flag);
if (!flag) {
flag = !flag; // all other points should include previous points
}
}
});
});
}
return false; // prevent zoom
}
}
},
Demo: http://jsfiddle.net/ma50685a/4/
I use the Zoom function in highcharts by setting zoomType: 'xy' and want to ask how can I find the min and max value on x Axis of the zoom box when I use my mouse to select the zoom position. I try to use getExtremes() :
events: {
afterSetExtremes: function () {
min = parseFloat(this.getExtremes().min);
max = parseFloat(this.getExtremes().max);
}
}
but it seems that the returned min and max values are the values of the whole chart screen after zooming, not the box that I select to zoom.
You can use the chart.events.selection event to get this information. For example:
chart: {
events: {
selection: function(event) {
if(event.xAxis != null)
console.log("selection: ", event.xAxis[0].min, event.xAxis[0].max);
else
console.log("selection: reset");
}
},
zoomType: 'xy'
}
See this JSFiddle for a demonstration and logging of the results.