How to drag the graph series in QML

[Vijaykarthikeyan]

I've created splineseries graph in chartview in QML..As,the graph x point gone beyond the x axis range, it is shifting..so the graph appears like running..all things till this logic is working perfectly...my question is what if i want to see the past graph points for reference.For that i want to drag the graph series by mouse dragging on the chartview mouse area

[Vijaykarthikeyan]

@lemons

onMouseYChanged: {
 if ((mouse.buttons & Qt.LeftButton) == Qt.LeftButton) 
{
      graph_2d2.scrollUp(mouseY - verticalScrollMask.y);
     verticalScrollMask.y = mouseY;
 }
}
onMouseXChanged:
  {
     if ((mouse.buttons & Qt.LeftButton) == Qt.LeftButton) {
  graph_2d2.scrollLeft(mouseX - horizantalScrollMask.x);
horizantalScrollMask.y = mouseX;
}
  }

onPressed: {
                     if (mouse.button == Qt.LeftButton)
                           {
                               verticalScrollMask.y = mouseY;                      
                               horizantalScrollMask.x=mouse.x;
                              }
                     }

[Bob64]

@Vijaykarthikeyan add a MouseArea to the plotArea of your ChartView and implement whatever logic you need in the mouse event handlers. You will probably want to tie it somehow to the min and max of your axes.

[Vijaykarthikeyan]

@Bob64 is there any drag handlers in mouseArea for chartview

[Bob64]

@Vijaykarthikeyan you could make use of the drag property group, or implement the drag handling yourself based on pressed, positionChanged and released mouse events. I think the latter might work better if you are implementing this in terms of updating the axis range.

[Vijaykarthikeyan]

@Bob64 any minimal example please

[lemons]

@Vijaykarthikeyan

ChartView {
    id: chart
    anchors.fill: parent

    LineSeries {
        name: "LineSeries"
        XYPoint { x: 0; y: 0 }
        XYPoint { x: 1.1; y: 2.1 }
        XYPoint { x: 1.9; y: 3.3 }
        XYPoint { x: 2.1; y: 2.1 }
        XYPoint { x: 2.9; y: 4.9 }
        XYPoint { x: 3.4; y: 3.0 }
        XYPoint { x: 4.1; y: 3.3 }
    }

    MouseArea {
        anchors.fill: parent

        property int xStart: 0

        onPressed: {
            xStart = mouseX
        }
        onPositionChanged: {
            let dx = xStart - mouseX

            if (dx < 0)
                chart.scrollLeft(dx * -1)
            else
                chart.scrollRight(dx)

            xStart = mouseX
        }
    }
}

[Vijaykarthikeyan]

@lemons

onMouseYChanged: {
 if ((mouse.buttons & Qt.LeftButton) == Qt.LeftButton) 
{
      graph_2d2.scrollUp(mouseY - verticalScrollMask.y);
     verticalScrollMask.y = mouseY;
 }
}
onMouseXChanged:
  {
     if ((mouse.buttons & Qt.LeftButton) == Qt.LeftButton) {
  graph_2d2.scrollLeft(mouseX - horizantalScrollMask.x);
horizantalScrollMask.y = mouseX;
}
  }

onPressed: {
                     if (mouse.button == Qt.LeftButton)
                           {
                               verticalScrollMask.y = mouseY;                      
                               horizantalScrollMask.x=mouse.x;
                              }
                     }