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

Scrollable QML Charts

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qtchartsscrollbar
2 Posts 2 Posters 1.6k Views 2 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 last edited by
    #1

    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.

    1 Reply Last reply
    0
    • K Offline
      K Offline
      Kenz Dale
      wrote on last edited by
      #2

      Worth linking this topic to the answer documented on StackOverflow: https://stackoverflow.com/questions/46886443/scrollable-qml-charts

      1 Reply Last reply
      0

      • Login

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