QML Charts Calculate Difference between two points on X Axis

Viewed 217

I have a qml Line Chart with DateTime X Axis and I need to measure time difference(dx) between two points similar to this chart

enter image description here

Here is the Chart code with sample data

    ChartView {
    id:chart
    title: "Line"
    anchors.fill: parent
    antialiasing: true
   
    DateTimeAxis {
           id: axisX
           format: "hh:mm:ss,ms"
           tickCount: 10

       }

       ValueAxis {
           id: axisY
           min: 0
           max: 10
       }

    LineSeries {
        id:series1
        name: "LineSeries"
        axisX: axisX
        axisY: axisY
        pointsVisible: true
        XYPoint { x: Date.parse("2020-10-09 05:51:00:500"); y: 0 }
        XYPoint { x: Date.parse("2020-10-09 05:51:00:600"); y: 2 }
        XYPoint { x: Date.parse("2020-10-09 05:52:00:100"); y: 4 }
        XYPoint { x: Date.parse("2020-10-09 05:53:00:20"); y: 5 }
        XYPoint { x: Date.parse("2020-10-09 05:54:00:200"); y: 8 }
        XYPoint { x: Date.parse("2020-10-09 05:55:00:100"); y: 7 }
        XYPoint { x: Date.parse("2020-10-09 05:56:00:200"); y: 6 }
        XYPoint { x: Date.parse("2020-10-09 05:57:00:400"); y: 2 }

    }

}

Any idea how to achieve this using QML or C++?

1 Answers

enter image description here

I roughly did like this. You should adjust time difference handling better.

Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Hello World")
    
    
        property int rectangeXPosition: 0
        property int rectangleYPosition: 0
        property int rWidth: 0
        property int rHeight: 0
        property int minuteDiff: 0
    
    
        ChartView {
            id:chart
            title: "Line"
            anchors.fill: parent
            antialiasing: true
    
            Rectangle
            {
                x: rectangeXPosition
                y: rectangleYPosition
                width: rWidth
                height: rHeight
                color: "red"
                opacity: 0.2
    
                Text {
                    anchors.left: parent.right
                    anchors.top: parent.top
                    text: minuteDiff + " minutes"
                }
            }
    
            MouseArea
            {
                anchors.fill: parent
                onPositionChanged:
                {
                    rWidth = mouse.x - rectangeXPosition
                    rHeight = mouse.y - rectangleYPosition
                    var currentPoint = chart.mapToValue(Qt.point(mouse.x, mouse.y), series1)
                    var startPoint = chart.mapToValue(Qt.point(rectangeXPosition,rectangleYPosition),series1)
                    var dateTimeDiff = new Date(currentPoint.x - startPoint.x)
                    minuteDiff = dateTimeDiff.getMinutes()
                }
    
                onPressed:
                {
                    var point = Qt.point(mouse.x, mouse.y);
                    rectangeXPosition = point.x
                    rectangleYPosition = point.y
                }
    
                onReleased:
                {
                    rectangeXPosition = 0
                    rectangleYPosition = 0
                    rWidth = 0
                    rHeight = 0
                }
            }
    
            DateTimeAxis {
                id: axisX
                format: "hh:mm:ss,ms"
                tickCount: 10
    
            }
    
            ValueAxis {
                id: axisY
                min: 0
                max: 10
            }
    
            LineSeries {
                id:series1
                name: "LineSeries"
                axisX: axisX
                axisY: axisY
                pointsVisible: true
                XYPoint { x: Date.parse("2020-10-09 05:51:00:500"); y: 0 }
                XYPoint { x: Date.parse("2020-10-09 05:51:00:600"); y: 2 }
                XYPoint { x: Date.parse("2020-10-09 05:52:00:100"); y: 4 }
                XYPoint { x: Date.parse("2020-10-09 05:53:00:20"); y: 5 }
                XYPoint { x: Date.parse("2020-10-09 05:54:00:200"); y: 8 }
                XYPoint { x: Date.parse("2020-10-09 05:55:00:100"); y: 7 }
                XYPoint { x: Date.parse("2020-10-09 05:56:00:200"); y: 6 }
                XYPoint { x: Date.parse("2020-10-09 05:57:00:400"); y: 2 }
    
            }
    
        }
    }
Related