Chapter 5 - Add a chart viewΒΆ

A table is nice to present data, but a chart is even better. For this, you need the QtGraphs module that provides many types of plots and options to graphically represent data.

The relevant class for a plot is the GraphsView QML type, to which axes and data series can be added. As a first step, try including then without any data to plot.

Make the following highlighted changes to main_widget.py from the previous chapter to add a chart:

 1from PySide6.QtWidgets import (QWidget, QHeaderView, QHBoxLayout, QTableView,
 2                               QSizePolicy)
 3from PySide6.QtQuickWidgets import QQuickWidget
 4from PySide6.QtGraphs import QLineSeries, QDateTimeAxis, QValueAxis, QGraphsTheme
 5
 6from table_model import CustomTableModel
 7
 8
 9class Widget(QWidget):
10    def __init__(self, data):
11        super().__init__()
12
13        # Getting the Model
14        self.model = CustomTableModel(data)
15
16        # Creating a QTableView
17        self.table_view = QTableView()
18        self.table_view.setModel(self.model)
19
20        # QTableView Headers
21        self.horizontal_header = self.table_view.horizontalHeader()
22        self.vertical_header = self.table_view.verticalHeader()
23        self.horizontal_header.setSectionResizeMode(QHeaderView.ResizeMode.ResizeToContents)
24        self.vertical_header.setSectionResizeMode(QHeaderView.ResizeMode.ResizeToContents)
25        self.horizontal_header.setStretchLastSection(True)
26
27        # Create QGraphView via QML
28        self.series = QLineSeries()
29        self.axis_x = QDateTimeAxis()
30        self.axis_y = QValueAxis()
31        self.quick_widget = QQuickWidget(self)
32        self.quick_widget.setResizeMode(QQuickWidget.ResizeMode.SizeRootObjectToView)
33        self.theme = QGraphsTheme()
34        initial_properties = {"theme": self.theme,
35                              "axisX": self.axis_x,
36                              "axisY": self.axis_y,
37                              "seriesList": self.series}
38        self.quick_widget.setInitialProperties(initial_properties)
39        self.quick_widget.loadFromModule("QtGraphs", "GraphsView")
40
41        # QWidget Layout
42        self.main_layout = QHBoxLayout(self)
43        size = QSizePolicy(QSizePolicy.Policy.Preferred, QSizePolicy.Policy.Preferred)
44
45        # Left layout
46        size.setHorizontalStretch(1)
47        self.table_view.setSizePolicy(size)
48        self.main_layout.addWidget(self.table_view)
49
50        # Right Layout
51        size.setHorizontalStretch(4)
52        self.quick_widget.setSizePolicy(size)
53        self.main_layout.addWidget(self.quick_widget)