qtqmlqt5qtcharts

draging a point on qtcharts in qml


I am trying to drag a point on LineSeries on qtcharts. Here is my code:

import QtQuick 2.0
import QtCharts 2.0

Item {
    anchors.fill: parent

    ChartView {
        title: "Two Series, Common Axes"
        anchors.fill: parent

        ValueAxis {
            id: axisX
            min: 0
            max: 10
            tickCount: 5
        }

        ValueAxis {
            id: axisY
            min: -0.5
            max: 1.5
        }

        LineSeries {
            id: series1
            axisX: axisX
            axisY: axisY
            onPressed: console.log("Pressed: " + point.x + ", " + point.y);   
            onReleased: console.log("Released: " + point.x + ", " + point.y);
        }


    }
    // Add data dynamically to the series
    Component.onCompleted: {
        for (var i = 0; i <= 10; i++) {
            series1.append(i, Math.random());
        }
    }
}

When I press a point on the Lineserie I can see x,y of the point I have pressed and released in the console. Both are the same though, so I cannot see the place where it released. I'd like to drag a point to another place, so if I press a point it follows the (mouse/finger on touch screen) pointer until I release on the graph. Anyone can help a bit where to start and which properties should I use?


Solution

  • Unfortunately both ChartView and LineSeries have no MouseMove event so it's hard to track dragging event. I have a workaround using MouseArea placing over the chart. Maybe a stupid solution but at least it works. I've adopted it to your example:

    ChartView {
        id: chart
        property var selectedPoint: undefined
        title: "Two Series, Common Axes"
        anchors.fill: parent
        antialiasing: true
        property real toleranceX: 0.05
        property real toleranceY: 0.05
    
        ValueAxis {
            id: axisX
            min: 0
            max: 10
            tickCount: 5
        }
    
        ValueAxis {
            id: axisY
            min: -0.5
            max: 1.5
        }
    
        LineSeries {
            id: series1
            axisX: axisX
            axisY: axisY
            pointsVisible: true            
        }
    
        MouseArea {
            anchors.fill: parent
            onPressed:
            {
                var cp = chart.mapToValue(Qt.point(mouse.x,mouse.y));
                for(var i = 0;i < series1.count;i ++)
                {
                    var p = series1.at(i);
                    if(Math.abs(cp.x - p.x) <= chart.toleranceX && Math.abs(cp.y - p.y) <= chart.toleranceY)
                    {
                        chart.selectedPoint = p;
                        break;
                    }
                }
            }
            onPositionChanged: {
                if(chart.selectedPoint != undefined) {
                    var p = Qt.point(mouse.x, mouse.y);
                    var cp = chart.mapToValue(p);
                    if(cp.x >= axisX.min && cp.x <= axisX.max && cp.y >= axisY.min && cp.y <= axisY.max) {
                        series1.replace(chart.selectedPoint.x, chart.selectedPoint.y, cp.x, cp.y);
                        chart.selectedPoint = cp;
                    }
                }
            }
    
            onReleased: {
                chart.selectedPoint = undefined;
            }
        }
    
    }
    // Add data dynamically to the series
    Component.onCompleted: {
        for (var i = 0; i <= 10; i++) {            
            series1.append(i, Math.random());
        }
    }