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
Forum Updated to NodeBB v4.3 + New Features

How to use ScrolLeft and ScrollRight Methods of QML Charts

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qtchartscrollbar
1 Posts 1 Posters 938 Views 1 Watching
  • 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