Regarding dynamic graph creation using Shape qml component.

[Savyasachi]

I tried to create a dynamic graph using Shape and PathPolyline. when it reaches to end of the graph area, it starts from left end of graph again clearing some space. My Issue is when it reaches right end and going to left end it drawing a line. I wanted to disconnect those two points without disturbing other points.

My QML code sample.

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.15

ApplicationWindow {
visible: true
width: 500
height: 300

Rectangle {
    id: graphContainer
    width: parent.width
    height: parent.height
    color: "black"

    Shape {
        id: graph
        anchors.fill: parent

        ShapePath{
            strokeWidth: 2
            strokeColor: "green"
            fillColor:"transparent"

            startX: 0
            startY: graphContainer.height / 2

            PathLine{
                id:line11
                x:graphContainer.width
                y:graphContainer.height/2
            }
        }

        ShapePath {
            id:line12
            strokeWidth: 2
            strokeColor: "red"
            fillColor: "transparent"
            startX: 0
            startY: graphContainer.height / 2

            PathPolyline {
                id: graphPath
                path: [] // Empty initially
            }
            PathMove{
                id:pathMove
                x:0
                y:graphContainer.height / 2
            }
        }
    }

    Connections {
        target: dataSender
        function onDataChanged() {
            if (!graphContainer || !dataSender) return;

            var xStep = graphContainer.width / 50; // Step size for X-axis
            var centerY = graphContainer.height / 2;

            if (graphPath.path.length === 0) {
                graphPath.path = [];
            }

            var lastX = graphPath.path.length > 0 ? graphPath.path[graphPath.path.length - 1].x : 0;

            var newX,newY;

            if (lastX >= graphContainer.width) {
                newX =0;
            }
            else{
                newX =lastX + xStep;
            }
            newY = centerY - dataSender.data[dataSender.data.length - 1] / 2;

            var newPath = graphPath.path.concat([Qt.point(newX, newY)]);

            if(newPath.length > 50){
                newPath.shift();
            }

            graphPath.path = newPath; // Assign updated path
        }
    }

}

}