Scrollable QML Charts

Question

I am using QT Charts to plot data on the UI, My plot will be real-time and X and Y axis will increase sequentially for that I need to link scrollBar to the graphs. As ChartView is not having an inbuilt scrollbar like in Flickable, I am wondering how to do that in QML, Following is the code:

import QtQuick 2.6
import QtQuick.Window 2.2
import QtCharts 2.0
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ChartView {
        id:chartview
        width: 400
        height: 300
        antialiasing: true

        LineSeries {
            name: "LineSeries"
            axisX: valueAxis
            XYPoint { x: 0; y: 0.0 }
            XYPoint { x: 1.1; y: 3.2 }
            XYPoint { x: 1.9; y: 2.4 }
            XYPoint { x: 2.1; y: 2.1 }
            XYPoint { x: 2.9; y: 2.6 }
            XYPoint { x: 3.4; y: 2.3 }
            XYPoint { x: 200.1; y: 3.1 }
        }

        ValueAxis {
            id: valueAxis
            min: 0
            max: 20
            tickCount: 12
            labelFormat: "%.0f"

        }
    }

    ScrollBar{
        id:sBarHor
        visible:true
        width: chartview.width
        height:30
        anchors.top:chartview.bottom
        orientation: Qt.Horizontal


        contentItem: Rectangle {
            implicitHeight: 50
            color:"green"
        }

        background: Rectangle{
            color:"red"
        }

        onPositionChanged: {
            //How to move the chart
        }
    }        
}

1. I also found that there are ScrollDown, ScrollRight etc functions for the ChartView but I am not getting how to integrate those with scrollBar.

2. Is there any alternative to plot data in QML without using QT Charts?

Please suggest I am using QT 5.9.1.

Answer 1

@jpnurmi answer helped a lot to extend the code to use Flickable so that I can use scrollbar and also flick :

Window {
    id: window
    width: 640
    height: 480
    visible: true


    Flickable{
        id:flick
        width : parent.width
        height : 300
        contentHeight: chartview.height
        contentWidth:  chartview.width
        ChartView {
            id: chartview
            width: window.width * 2
            height: 300

            LineSeries {
                name: "LineSeries"
                axisX: ValueAxis {
                    min: 0
                    //max: 200
                    tickCount: 12
                    labelFormat: "%.0f"
                }
                XYPoint { x: 0; y: 0.0 }
                XYPoint { x: 1.1; y: 3.2 }
                XYPoint { x: 1.9; y: 2.4 }
                XYPoint { x: 2.1; y: 2.1 }
                XYPoint { x: 2.9; y: 2.6 }
                XYPoint { x: 3.4; y: 2.3 }
                XYPoint { x: 200.1; y: 3.1 }
            }
        }

        ScrollBar.horizontal: ScrollBar {
            id: hbar
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Horizontal
        }
    }
}

Answer 2

A) ScrollView

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtCharts 2.0

Window {
    id: window
    width: 640
    height: 480
    visible: true

    ScrollView {
        id: scrollview
        anchors.fill: parent

        contentWidth: chartview.width
        contentHeight: chartview.height

        ChartView {
            id: chartview

            width: 1024
            height: 960

            LineSeries {
                name: "LineSeries"
                axisX: ValueAxis {
                    min: 0
                    max: 20
                    tickCount: 12
                    labelFormat: "%.0f"
                }
                XYPoint { x: 0; y: 0.0 }
                XYPoint { x: 1.1; y: 3.2 }
                XYPoint { x: 1.9; y: 2.4 }
                XYPoint { x: 2.1; y: 2.1 }
                XYPoint { x: 2.9; y: 2.6 }
                XYPoint { x: 3.4; y: 2.3 }
                XYPoint { x: 200.1; y: 3.1 }
            }
        }
    }
}

B) ScrollBar

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtCharts 2.0

Window {
    id: window
    width: 640
    height: 480
    visible: true

    ChartView {
        id: chartview

        x: -hbar.position * width
        width: parent.width * 2
        height: parent.height

        LineSeries {
            name: "LineSeries"
            axisX: ValueAxis {
                min: 0
                max: 20
                tickCount: 12
                labelFormat: "%.0f"
            }
            XYPoint { x: 0; y: 0.0 }
            XYPoint { x: 1.1; y: 3.2 }
            XYPoint { x: 1.9; y: 2.4 }
            XYPoint { x: 2.1; y: 2.1 }
            XYPoint { x: 2.9; y: 2.6 }
            XYPoint { x: 3.4; y: 2.3 }
            XYPoint { x: 200.1; y: 3.1 }
        }
    }

    ScrollBar {
        id: hbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Horizontal
        size: window.width / chartview.width
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
}