Hi,
I’ve created a ChartSelectionListener which loads higher resolution data on zoom x
I want to provide both panning and zooming in chart, would you explain me how to use pankey ?
I did not found any example in Vaadin or Highchart
javadoc is not helping me so far
pankey
Allows setting a key to switch between zooming and panning.
panning
Allow panning in a chart. Best used with panKey to combine zooming and panning.
thank you
I did a small test using the Multiple Axes example
protected Component getChartWithPanKey() {
Chart chart = new Chart();
Configuration conf = chart.getConfiguration();
Color[] colors = new ValoLightTheme().getColors();
//enable zoom and panning
conf.getChart().setZoomType(ZoomType.X);
conf.getChart().setPanning(true);
conf.getChart().setPanKey("shift");
conf.setTitle("Average Monthly Weather Data for Tokyo");
conf.setSubTitle("Source: WorldClimate.com");
XAxis x = new XAxis();
x.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
"Sep", "Oct", "Nov", "Dec");
conf.addxAxis(x);
YAxis y1 = new YAxis();
Labels labels = new Labels();
labels.setFormatter("return this.value +'°C'");
Style style = new Style();
style.setColor(colors[1]
);
labels.setStyle(style);
y1.setLabels(labels);
y1.setOpposite(true);
AxisTitle title = new AxisTitle("Temperature");
style = new Style();
style.setColor(colors[1]
);
y1.setTitle(title);
conf.addyAxis(y1);
YAxis y2 = new YAxis();
y2.setGridLineWidth(0);
title = new AxisTitle("Rainfall");
style = new Style();
style.setColor(colors[0]
);
y2.setTitle(title);
labels = new Labels();
labels.setFormatter("this.value +' mm'");
style = new Style();
style.setColor(colors[0]
);
labels.setStyle(style);
y2.setLabels(labels);
conf.addyAxis(y2);
YAxis y3 = new YAxis();
y3.setGridLineWidth(0);
conf.addyAxis(y3);
title = new AxisTitle("Sea-Level Pressure");
style = new Style();
style.setColor(colors[2]
);
y3.setTitle(title);
labels = new Labels();
labels.setFormatter("this.value +' mb'");
style = new Style();
style.setColor(colors[2]
);
labels.setStyle(style);
y3.setLabels(labels);
y3.setOpposite(true);
Tooltip tooltip = new Tooltip();
tooltip.setFormatter("function() { "
+ "var unit = { 'Rainfall': 'mm', 'Temperature': '°C', 'Sea-Level Pressure': 'mb' }[this.series.name]
;"
+ "return ''+ this.x +': '+ this.y +' '+ unit; }");
conf.setTooltip(tooltip);
Legend legend = new Legend();
legend.setLayout(LayoutDirection.VERTICAL);
legend.setAlign(HorizontalAlign.LEFT);
legend.setX(120);
legend.setVerticalAlign(VerticalAlign.TOP);
legend.setY(80);
legend.setFloating(true);
conf.setLegend(legend);
DataSeries series = new DataSeries();
PlotOptionsColumn plotOptionsColumn = new PlotOptionsColumn();
plotOptionsColumn.setColor(colors[0]
);
series.setPlotOptions(plotOptionsColumn);
series.setName("Rainfall");
series.setyAxis(1);
series.setData(49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,
216.4, 194.1, 95.6, 54.4);
conf.addSeries(series);
series = new DataSeries();
PlotOptionsSpline plotOptionsSpline = new PlotOptionsSpline();
plotOptionsSpline.setColor(colors[2]
);
series.setPlotOptions(plotOptionsSpline);
series.setName("Sea-Level Pressure");
series.setyAxis(2);
series.setData(1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6,
1010.2, 1013.1, 1016.9, 1018.2, 1016.7);
conf.addSeries(series);
series = new DataSeries();
plotOptionsSpline = new PlotOptionsSpline();
plotOptionsSpline.setColor(colors[1]
);
series.setPlotOptions(plotOptionsSpline);
series.setName("Temperature");
series.setData(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3,
13.9, 9.6);
conf.addSeries(series);
return chart;
}And basically what happens is that after zooming if you hold ‘shift’ key down you can move through the xAxis in the chart by clicking and dragging with the mouse.
In this example it’s not so useful but I think it might be useful if you have a long XAxis with lot of data points and want to see more detail and move through the chart.
Thank you for reply ! I’ll try it
which are the possible values for pankey ?
Do you think that I can use also ‘ctrl’ as pankey value ?
One more thing, if you don’t have zoom enabled but have left some data points out of the chart plot by setting the axis extremes you can enable panning without having pankey
I made a highcharts only example so it’s quicker to see
I tried using alt and it worked the result is in:
http://jsfiddle.net/alvarezg/zt2wp69f/
The only problem I see with ctrl is that mac users might have some issues as ‘ctrl’ + click is the same as right click in osx.
I was jast asking since highchart documentation does not say which values are permitted.
thank you for your patience
I understand, at least with the jsfiddle example it’s easier to test different alternatives, you can changes the json configuration and hit the run button to test it
One more question on zoom :
in vaadin chart gallery, there is “Time series zoomable” example
Applying zoom, a “Reset Zoom” button appears.
I cannot see that button on my charts because I have create my own ChartSelectionListener.
Do you know how to handle that reset button ?
“Reset zoom” button does not appear if I enable chart exporting
Reset button appears when you don’t have your custom logic for chart selection and you enable zoom with
conf.getChart().setZoomType(ZoomType.X);
You can try enabling zoom and with a XAxesExtremesChangeListener instead of a ChartSelectionListener, this way you’ll get an event when the extremes change and the native zoom feature should still work.
XAxesExtremesChangeListener works but my custom listener loads new points at higher resolution and “Reset zoom” disappear when this new series is loaded.
Now I understand better vaadin charts and I’ll find a way to navigate them with zooming and panning