Java for Android Tutorial 8

From Steema Software Reference Wiki
Jump to: navigation, search

Java android.png

Contents page
Previous | Next

Tutorial 8 - Zoom and Scroll


How to Zoom and Scroll using the touch screen

TeeChart supports multi-touch screens for zoom and scroll. Multi-touch is offered with Android v2.1 and later.

TeeChart offers two zoom modes, InChart and FullChart. Inchart mode offers zoom and scroll within a Chart, maintaining the external axes at their location. FullChart mode rescales/moves the entire Chart. Explanation for use is below. InChart is the default zoom/scroll mode. To change the setting use:

chart.getZoom().setZoomStyle( ZoomStyle.FULLCHART);

InChart

InChart mode, the default zoom/scroll mode, zooms and scrolls data within the Chart rectangle area. ie. within the Chart axes area on a conventionally axissed Chart.

TeeChart interactive drag zoom-scroll originates from form-based mousedrag scrolls using a depressed mousebutton. As touchscreens don't use a mousebutton we have chosen to offer the programmer the means to decide, in InChart mode, that the mousebutton could be set to either zoom or scroll action.

Scroll

Set to scroll mode with these codelines:

chart.getPanning().setMouseButton(FrameworkMouseEvent.BUTTON1); //would be left mousebutton (= touchscreen sensitivity)
chart.getZoom().setMouseButton(FrameworkMouseEvent.BUTTON3); //setting what would be right mousebutton to zoom

To scroll, use one touch, ie. one finger pressed to the screen and drag it in the direction that you would like to see the data scroll. The Chart will move the dataseries as you scroll and update the axes accordingly.

Zoom

Set to zoom mode with these codelines:

//the following is default behaviour
chart.getZoom().setMouseButton(FrameworkMouseEvent.BUTTON1);  //would be left mousebutton (= touchscreen sensitivity)
chart.getPanning().setMouseButton(FrameworkMouseEvent.BUTTON3); //setting what would be right mousebutton to scroll

To zoom in InChart mode, place your finger on the screen at the top left location of the area that you wish to see zoomed. Drag your finger down and right to the right-bottom location of the area you wish to see zoomed and release the finger. TeeChart will rescale to show the zoomed area. To unzoom drag a finger upwards to the left (diagonally bottom-right to top-left) anywhere on the Chart. See TeeChart's Zoom.setHistory() property if you would like unzooms to be stepped according to zooms made.

FullChart

Scroll

Touch a finger to the screen and drag it in the direction that you would like the entire Chart to move.

Zoom

To Zoom, touch two fingers to the screen at the centre location you wish to zoom and drag the fingers apart. To Unzoom invert the procedure, touch the screen at any two outer locations and drag your fingers togther before releasing them from the screen.

How to Zoom and Scroll by code

Zoom

Zoom is, by default, enabled. Use the Zoom.getAllow method to disable zoom.
See the Zoom Class for a full list of methods associated with Zoom. To define a rectangular area over which to Zoom use the ZoomRect method.

Example

tChart1.getZoom().zoomRect(new com.steema.teechart.Rectangle(100,100,120,120));

The ZoomRect co-ordinates are defined in screen pixels where 0,0 is the top left hand point of the Chart Panel. The following code will zoom in on an area between the 2nd and 5th x-axis points, setting the y-axis to the scale of the maximum and minimum points of the entire Chart:

int x = points1.calcXPos(2);
int y = tChart1.getAxes().getLeft().calcYPosValue(tChart1.getAxes().getLeft().getMaxYValue());
int height = tChart1.getAxes().getLeft().calcYPosValue(tChart1.getAxes().getLeft().getMinYValue()) -
tChart1.getAxes().getLeft().calcYPosValue(tChart1.getAxes().getLeft().getMaxYValue());
int width = points1.calcXPos(5) - x;
com.steema.teechart.Rectangle r = new com.steema.teechart.Rectangle(x,y,width,height);
tChart1.getZoom().zoomRect(r);

Use 'Undo' to Zoom back out.

tChart1.getZoom().undo();


Animated Zoom

Animated Zoom offers stepped zooming. Instead of jumping from 'zoomed out' to 'zoomed in' in one step, you may set AnimatedZoom to enabled and define staggered steps for the zoom. Once AnimatedZoom is enabled you may zoom manually with the Mouse or by code.

Example


int x = points1.calcXPos(2);
int y = tChart1.getAxes().getLeft().calcYPosValue(tChart1.getAxes().getLeft().getMaxYValue());
int height = tChart1.getAxes().getLeft().calcYPosValue(tChart1.getAxes().getLeft().getMinYValue()) -
tChart1.getAxes().getLeft().calcYPosValue(tChart1.getAxes().getLeft().getMaxYValue());
int width = points1.calcXPos(5) - x;
com.steema.teechart.Rectangle r = new com.steema.teechart.Rectangle(x,y,width,height);
tChart1.getZoom().setAnimated(true);
tChart1.getZoom().setAnimatedSteps(100);
tChart1.getZoom().zoomRect(r);


Zoom events

Zooming in manually, or by code, will trigger the TChart.Zoomed event. Zooming out will trigger the TChart.UndoneZoom event.


Scroll

Scroll is enabled in all directions as default. Use the Scroll.Allow property to disable Scroll or limit Scroll to one direction.
The easiest way to scroll by code is to use the Axis Scroll method:

Example

tChart2.getAxes().getBottom().scroll(3, false);

The value is the offset. 'False' refers to whether or not TeeChart will allow scrolling beyond Series value limits.

Another way to control scroll is to define Axis maximum and minumum to scroll by code:

Example

private void Load() {
        int range = com.steema.teechart.Utils.Round((bar1.getXValues().getMaximum() - bar1.getXValues().getMinimum() / 2));
        bar1.fillSampleValues(20);
        tChart1.getPanning().setAllow(ScrollModes.NONE);
        jScrollBar1.setValue(range);
        jScrollBar1.setMinimum(range - 50);
        jScrollBar1.setMaximum(range   50);
}

    public void jScrollBar1_propertyChange(PropertyChangeEvent evt) {
        tChart1.getAxes().getBottom().setAutomatic(false);
        tChart1.getAxes().getBottom().setMinimum(jScrollBar1.getValue());
        tChart1.getAxes().getBottom().setMaximum(jScrollBar1.getValue()   bar1.getCount());
}




PREVIOUS

NEXT


© 1998-2017 Steema Software SL. All rights reserved.