How to use ScrolLeft and ScrollRight Methods of QML Charts



  • I need to scroll a QT Graph using a scrollbar and for that, i have created my own custom scrollbar using Rectangle and MouseArea which can be dragged.

    When i tried to scroll a Chart using ScrollRight and ScrollLeft Methods i am not able to link/bind the ScrollBar X with the ChartView content X.Following is the code :

    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
            width: parent.width
            height: 300
    
            LineSeries {
                name: "LineSeries"
                axisX: ValueAxis {
                    min: 0
                    max: 100
                    tickCount: 12
                    labelFormat: "%.0f"
                }
    
                axisY: ValueAxis {
                    min: 0
                    max: 70
                    tickCount: 5
                    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 }
            }
        }
    
        /* Rectangle base for horizontal scroll bar */
        Rectangle{
            id:rectHorScrollBase
            width:parent.width
            height:parent.height * 0.10
            anchors.top:chartview.bottom
            anchors.topMargin: (parent.height * 0.01)
            color:"transparent"
            visible: true
    
            /* Rectangle indicating scroll path*/
            Rectangle {
                id:rectHorScrollPath
                width: parent.width
                height: parent.height
                anchors.left:parent.left
    
                radius: 2
                color: "lightblue"
            }
    
            /* Actual scroll rectaangle which will be dragged */
            Rectangle {
                id: rectHorScroll
                property var prevX : 0
    
                anchors.top : parent.top
                width: 50
                height: parent.height
                color: "green"
    
                /* Mouser area to drag the rectangle and to move Chart */
                MouseArea {
                    id:mouseAreaHorScroll
    
                    anchors.fill: parent
                    drag.target: parent
                    drag.minimumX: 0
                    drag.maximumX: chartview.width - width
                    drag.axis: Drag.XAxis
    
                    onReleased: {
                        console.log("x in Released ===",rectHorScroll.x)
                        rectHorScroll.prevX = rectHorScroll.x
                    }
                }
    
                onXChanged: {
    
                    // HOW TO HANDLE THE SCROLL BASED ON x ? 
                    if(mouseAreaHorScroll.drag.active)
                    {
                        if(x > prevX)
                        {
                            chartview.scrollRight(x) // NOT WORKING
                        }
                        else
                        {
                            chartview.scrollLeft(x) //NOT WORKING
                        }
                    }
                }
            }
        }
    }
    
    1. How to map scrollBar X with ChartView Content X ?

    2. The scrollbar should not go beyond maximum and minimum Value of X Axis. How to do that?

    3. There should be a sync between ScrollBar and ChartView.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.