How to zoom charts using fingers?

[tanthinh1510]

Hi!
I using Qt 5.4.1 Enterprise and used Qt Charts 2.0 module
I create Line Chart Example and build it to android device
My code:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtCharts 2.0
 
ApplicationWindow {
    width: 640
    height: 480
    visible: true
    property int currentIndex: -1
    property int index_X: -1
    property int index_Y: 50
    property string driver: "Test"
 
    ChartView {
        id: chartView
        title: "TEST CHARTS"
        anchors.fill: parent
        legend.alignment: Qt.AlignTop
        animationOptions: ChartView.SeriesAnimations
        antialiasing: true
        theme: ChartView.ChartThemeDark
    }
 
    Timer {
        id: timer
        interval: 700
        repeat: true
        triggeredOnStart: true
        running: true
        onTriggered: {
            currentIndex++;
            index_Y = Math.random()*250
            index_X ++;
            if (currentIndex <= 20) {
                // Check if there is a series for the data already (we are using driver name to identify series)
                var lineSeries = chartView.series(driver);
                if (!lineSeries) {
                    lineSeries = chartView.createSeries(ChartView.SeriesTypeLine, driver);
                    chartView.axisY().min = 0;
                    chartView.axisY().max = 250;
                    chartView.axisY().tickCount = 6;
                    chartView.axisX().titleText = "Time line";
                    chartView.axisX().labelFormat = "%.0f";
                }
                lineSeries.append(index_X, index_Y);
 
                if (index_X > 3) {
                    chartView.axisX().max = index_X + 1;
                    chartView.axisX().min = chartView.axisX().max - 5;
                } else {
                    chartView.axisX().max = 5;
                    chartView.axisX().min = 0;
                }
                chartView.axisX().tickCount = chartView.axisX().max - chartView.axisX().min + 1;
            } else {
                // No more data, change x-axis range to show all the data
                timer.stop();
                chartView.animationOptions = ChartView.AllAnimations;
                chartView.axisX().min = 0;
                chartView.axisX().max = index_X;
            }
        }
    }
 
}

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtCharts 2.0

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    property int currentIndex: -1
    property int index_X: -1
    property int index_Y: 50
    property string driver: "Test"

    ChartView {
        id: chartView
        title: "TEST CHARTS"
        anchors.fill: parent
        legend.alignment: Qt.AlignTop
        animationOptions: ChartView.SeriesAnimations
        antialiasing: true
        theme: ChartView.ChartThemeDark
    }

    Timer {
        id: timer
        interval: 700
        repeat: true
        triggeredOnStart: true
        running: true
        onTriggered: {
            currentIndex++;
            index_Y = Math.random()*250
            index_X ++;
            if (currentIndex <= 20) {
                // Check if there is a series for the data already (we are using driver name to identify series)
                var lineSeries = chartView.series(driver);
                if (!lineSeries) {
                    lineSeries = chartView.createSeries(ChartView.SeriesTypeLine, driver);
                    chartView.axisY().min = 0;
                    chartView.axisY().max = 250;
                    chartView.axisY().tickCount = 6;
                    chartView.axisX().titleText = "Time line";
                    chartView.axisX().labelFormat = "%.0f";
                }
                lineSeries.append(index_X, index_Y);

                if (index_X > 3) {
                    chartView.axisX().max = index_X + 1;
                    chartView.axisX().min = chartView.axisX().max - 5;
                } else {
                    chartView.axisX().max = 5;
                    chartView.axisX().min = 0;
                }
                chartView.axisX().tickCount = chartView.axisX().max - chartView.axisX().min + 1;
            } else {
                // No more data, change x-axis range to show all the data
                timer.stop();
                chartView.animationOptions = ChartView.AllAnimations;
                chartView.axisX().min = 0;
                chartView.axisX().max = index_X;
            }
        }
    }

}

To copy to clipboard, switch view to plain text mode 

And now, I want to zoom charts using two finger as video below (from 1.59 - 2.02)

Please help me any idea. Thanks so much!

[anda_skoa]

You could try a PinchArea on top of the chart view and calling the chart view's zoom function appropriately from the pinch area's signal handlers.

Cheers,
_

[tanthinh1510]

You could try a PinchArea on top of the chart view and calling the chart view's zoom function appropriately from the pinch area's signal handlers.

Cheers,
_

Thanks anda_skoa! I used PinchArea and it zoom ok.
And I want to move charts using one finger touch screen and drag as video below (from 2.01 - 2.03)



Have signal to work it?

[anda_skoa]

Have a look at the documentation, some of the examples and maybe a couple of tutorials.

The Flickable type might be a good start.

Cheers,
_