Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to use ScrolLeft and ScrollRight Methods of QML Charts

How to use ScrolLeft and ScrollRight Methods of QML Charts

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qtchartscrollbar
1 Posts 1 Posters 897 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    pra7
    wrote on 26 Oct 2017, 11:35 last edited by
    #1

    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.

    1 Reply Last reply
    0

    1/1

    26 Oct 2017, 11:35

    • Login

    • Login or register to search.
    1 out of 1
    • First post
      1/1
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved