Note: this example assumes that you already have a barebones PySide6/QML project set up.

Let’s start with the QML part. Create a ChartView object inside the QML layout of your choice. Within the ChartView, we will need to create two ValueAxis objects (one for X and one for Y) and an AbstractSeries object. There are a number of different AbstractSeries types to choose from, but we’ll go with a ScatterSeries for now. Within the ScatterSeries, designate the ValueAxes as the X and Y axes.

ChartView { //Plot
        id: mainPlot

        //Layout-specific parameters
        Layout.row: 0
        Layout.rowSpan: 2
        Layout.column: 1
        Layout.columnSpan: 2
        Layout.fillHeight: true
        Layout.fillWidth: true
        Layout.preferredWidth: Layout.columnSpan
        Layout.preferredHeight: Layout.rowSpan

        title: "Example Plot"
        legend.visible: false

        ValueAxis {
            id: axisY
            min: 0
            max: 1
            titleText: "Y-Values"
        }

        ValueAxis {
            id: axisX
            min: 0
            max: 20
            titleText: "X-Values"
        }

        ScatterSeries {
            id: plotSeries
            name: "ScatterSeries"
            axisX: axisX
            axisY: axisY
        }
    }

When you run your application, the ChartView should look something like this: 

Looks pretty good so far, but there’s one major component missing: the data! Python is great for number-crunching and data management, so your application will very likely implement some kind of data model in Python that we will then visualize on our QML UI. For this example, we will make three Qt Signals, one each for adding data, removing data, and scaling the axes.  

new_point_added = Signal(QPointF) # add point to graph on test screen from DAQ
clear_graph_requested = Signal() # clear all points from graph
scale_graph_requested = Signal(float, float, int) # send axis scaling to graph

Then, in the QML file, we will define connections to those Signals. I chose to make these connections in a GridLayout object that contains the ChartView, but it can be done anywhere, as long as the connect() methods execute before the user interacts with the UI. When the GUI receives a “new_point_added” Signal with a QPointF payload, it will append that point to the ScatterSeries. When it receives a “clear_graph_requested” Signal, it will clear all the points in the ScatterSeries. Finally, when it receives a “scale_graph_requested” Signal with a payload of X and Y axis ranges, it will apply those ranges to the ValueAxis objects.  

The Python object that will emit those signals can be an instance of any class that inherits QObject. For QML to have access to a Python object, you will also need to set it as a “context property.” For example, the code below allows QML to access a QObject-derived object called my_object using the string “main.” 

qml_app_engine = QQmlApplicationEngine()
qml_context = qml_app_engine.rootContext()
qml_context.setContextProperty("main", my_object)

Now we can connect the signals main.new_point_added, main.clear_graph, and main.scale_graph to slots in QML to manipulate the series and axes. An easy place to make those connections is in the Component.onCompleted slot of some object related to them.

ChartView { //Plot
    Component.onCompleted: {
        main.new_point_added.connect(function (p) {
            plotSeries.append(p.x, p.y)
        })
        main.clear_graph.connect(function() {plotSeries.clear()})
        main.scale_graph.connect(function(ymax, ymin, xmax) {
            axisY.max = ymax
            axisY.min = ymin
            axisX.max = xmax
        })
    }
…

Those signals need to be emitted from the Python object that serves as your context property. As an example, the class method below takes in a list of numeric values, scales the graph, and sends the data as a series of points to the QML GUI.

@Slot(list) #clear, scale, and display new data
    def send_data_to_ui(self, dataList):
        self.clear_graph.emit() #clear plot before adding new data

        ySpan = max(dataList) - min(dataList) #calculate x and y axis ranges
        yMid = (max(dataList) + min(dataList)) / 2
        yMax = yMid + (ySpan/2)
        yMin = yMid - (ySpan/2)
        xMax = len(dataList)
        self.scale_graph.emit(yMax, yMin, xMax)

        for i in range(len(dataList)): #loop through data, send each point
            self.new_point_added.emit(QPointF(i, dataList[i]))

With all the pieces in place, we just need a way to call the send_data_to_ui method from the GUI. In the QML file, create a Button on the UI that we can use to populate the graph. You can get your data from anywhere, but, for this example, I made a simple start_test function in Python that generates random numbers and feeds it to send_data_to_ui.

Button { //Measure Button
    id: startButton
    Layout.fillHeight: true
    Layout.fillWidth: true
    text: qsTr("Start Test")
    onClicked: main.start_test()
}

Again, notice that we use “main,” the name that we gave the context property, to access a method of the object on the Python side. When you run your application and click that button, you’ll see something like this in your ChartView:

Wow, a genuine counterfeit Jackson Pollock painting. Now try playing around with the ChartView parameters. For example, let’s change the ScatterSeries to a LineSeries and observe the difference:

Congratulations, you can now create flexible, resizable, dynamically updating charts and graphs on (almost) any platform!

Learn more about our PC Application Development and our Test & Measurement Automation expertise, and contact us today for your next project.

The post Using QtCharts in a PySide/QML Application appeared first on DMC, Inc..