draging a point on qtcharts in qml

Question

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?

There are points that are parts of the lines that join the points that belong to the series, what should happen if you press those points? Should they move? Moving these points implies creating new points in the curve. — eyllanesc, Feb 14 '18 at 15:22
Yes they should move, and as you said it would lead to creating new points in the graph — PHA, Feb 14 '18 at 16:03

folibis · Accepted Answer · 2018-02-15T13:12:30.197

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());
    }
}

thank you so much for a working answer, I my case I should increase toleranceX to 0.5 to be able to grab the points on the chart. There are two small issues remained though with this code. First I can drag the points outside the axis X and axi Y I mean the gridLines on the chart. The other issue is, since I do have two LineSeries, series1 and series2 some times the two points on two graphs are too close to each other, so when I try to drag one of them, they stick together and there is no way to scape from it. Do you have some suggestions to fix these issue? — PHA, Feb 15 '18 at 12:57
I've updated the example to solve the issue with moving a point out of field. As for selecting series I have no idea, maybe you can select necessary series by key modifies or whatever — folibis, Feb 15 '18 at 13:26

draging a point on qtcharts in qml

1 Answers1

Linked