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.
Related
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/
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 am currently experimenting with the Highcharts charting library, and am totally blown away by its capabilities.
Something I am trying to accomplish is to add a permanent, draggable 'selection' box (or mask) to my chart. This selection box will always be a certain fixed width. For example, say my chart has 30 days worth of data, I would like there to be a draggable box with the width of 1 day. Dragging the box up and down the x-axis (over the actual chart data) will fire off other application events using the selected day as a parameter.
I guess I am looking for something very similar to the navigator in Highstock charts - but again the primary difference is keeping a fixed width selection. Any tips or suggestions would be greatly appreciated.
In Highcharts there is no such built-in feature but in Highstock you can also use only scrollbar, see: http://jsfiddle.net/ea7za/ Now you can use or bottom scrollbar or panning (drag on plotting area).
$.getJSON('url.json', function(data) {
var min = data[0][0], // min
max = data[500][0]; // max - e.g. max = min + 24 * 3600 * 1000; as one day
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
navigator: {
enabled: false
},
xAxis: {
min: min,
max: max
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
I'm creating a bar chart with positive and negative values and display the xAxis (category name) of each data point (See Fiddle: https://jsfiddle.net/bej8j/75/).
Here's what I have for plot options but I'm not sure what else I need (Really only putting this code in here because I need to include some code to link to a jsfiddle)
plotOptions : {
series : {
dataLabels: {
formatter: function() {
return this.x
},
enabled: true
}
}
},
I'm trying to place the label so that it's aligned with the start of each bar on the chart. I photoshoped my desired result: http://i.imgur.com/0I1jSHW.png
Any help would be greatly appreciated.
You can iterate on each datalabel and use translate() function to move SVG element.
http://jsfiddle.net/eMjGg/7/
$.each(chart.series[0].data,function(i,data){
position = chart.yAxis[0].toPixels(0);
console.log(data);
if(data.y < 0)
position-=10;
else
position-=70;
data.dataLabel.attr({
x:position
});
});
I think this would help you: http://jsfiddle.net/42dRt/5/
Here's more info: high-charts datalabel position needs to change when value is too small
You must play with the X value:
plotOptions : {
series : {
dataLabels: {
formatter: function() {
return this.x
},
x: ?,
enabled: true
}
}
}
I have a stock chart with the fixed tooltip like the one shown in the stock tooltip positioner example. Now I want to add some flags on the series. Each flag's tooltip should be adjacent to the flag when it is "mouse over", like the default positioning/format of a tooltip. Also, each flag's tooltip has its own text and should not affect the fixed tooltip when displayed (eg. the fixed tooltip would show the stock price and the flag tooltip would show some text associates with the flag)
Do you have any related sample code I can take a look at? thx!
This is not directly supported but possible to achieve, take a look: http://jsfiddle.net/hzYhQ/2/
1) Add custom property for a chart with mouseout/mouseover events for flags:
plotOptions: {
flags: {
events: {
mouseOver: function(){
this.chart.flagTooltip = true;
},
mouseOut: function(){
this.chart.flagTooltip = false;
}
}
}
}
2) Add checking where tooltip should be displayed according to that flag:
positioner: function (w,h,p) {
var x = 10,
y = 35;
if(this.chart.flagTooltip) {
x = p.plotX;
y = p.plotY;
}
return { x: x, y: y };
}