Basic Graph with Qt Data Visualisation

Graph QML

import QtQuick 2.12
import QtQuick.Window 2.12
import QtDataVisualization 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout {
        anchors.fill: parent

        Item {
            Layout.fillHeight: true
            Layout.fillWidth: true

            ColorGradient {
                id: surfaceGradient
                ColorGradientStop { position: 0.0; color: "darkslategray" }
                ColorGradientStop { id: middleGradient; position: 0.25; color: "peru" }
                ColorGradientStop { position: 1.0; color: "red" }
            }

            Surface3D {
                width: parent.width
                height: parent.height

                //flipHorizontalGrid: true

                Surface3DSeries {
                    itemLabelFormat: "f(x)"
                    flatShadingEnabled: false
                    drawMode: Surface3DSeries.DrawSurfaceAndWireframe
                    ItemModelSurfaceDataProxy {
                        itemModel: dataModel
                        // Mapping model roles to surface series rows, columns, and values.
                        rowRole: "yPos"
                        columnRole: "xPos"
                        yPosRole: "zPos"
                    }
                }
            }

            ListModel {
                property int width: 10
                property int height: 20

                id: dataModel


                function zsq( ) {
                    dataModel.clear();
                    for (var i = -width; i<width ; ++i) {
                        for (var j=-height;j<height; ++j) {
                            append( { xPos: i.toString(), yPos:j.toString(), zPos: (i * i  + j * j).toString() } );
                        }
                    }
                }
            }
        }

        RowLayout {
            Button {
                text: "Clear"
                onClicked: dataModel.clear()
            }
            Button {
                text: "x^2 + y^2"
                onClicked: dataModel.zsq();
            }
        }
    }

}