Graphs 2D in Qt Widgets
Using Graphs for 2D in a Widget based application.
Graphs 2D support only Qt Quick applications. This example shows how to display a simple 2D pie graph in a Qt Widgets applications using a QQuickWidget.

Running the Example
To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, see Qt Creator: Tutorial: Build and run.
Main View
- The
PieWidgetclass implements the main view of the demo application. In thePieWidgetclass, instantiate the widgets used to implement the application layout and UI elements.m_quickWidget = new QQuickWidget; m_widget = new QWidget; m_vLayout = new QVBoxLayout(m_widget); m_hLayout = new QHBoxLayout; ...
- The
PieGraphclass is used to handle logic for adding and removing slices, and have other functionalities.m_pieGraph = new PieGraph; ...
- For QQuickWidget, set source and resizeMode, and set the
contextproperty. TheContextproperty allows data to be exposed to QML components instantiated by the QML engine.QQmlContext *context = m_quickWidget->engine()->rootContext(); context->setContextProperty("pieGraph", m_pieGraph); m_quickWidget->setSource(QUrl("qrc:/qml/quickwidgetgraphs/main.qml")); m_quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
- Initialize buttons and add them to layout.
void PieWidget::initializeButtons() { QPushButton *addButton = new QPushButton("Add Slice"); QPushButton *removeButton = new QPushButton("Remove Slice"); QPushButton *explodeButton = new QPushButton("Explode All"); QPushButton *clearButton = new QPushButton("Clear Series"); m_hLayout->addWidget(addButton); m_hLayout->addWidget(removeButton); m_hLayout->addWidget(explodeButton); m_hLayout->addWidget(clearButton); QObject::connect(addButton, &QPushButton::clicked, m_pieGraph, &PieGraph::onAddSlice); QObject::connect(removeButton, &QPushButton::clicked, m_pieGraph, &PieGraph::onRemoveSlice); QObject::connect(explodeButton, &QPushButton::clicked, m_pieGraph, &PieGraph::onExplode); QObject::connect(clearButton, &QPushButton::clicked, m_pieGraph, &PieGraph::onClearSeries); ...
Manipulating Graph data
The PieGraph class implements all the logic for manipulating Graph data in this example.
- In the
PieGraphclass, declare apieSeriesproperty.... Q_PROPERTY(QPieSeries *pieSeries READ pieSeries WRITE setPieSeries NOTIFY pieSeriesChanged FINAL) ... - Create functions for adding, removing, exploding slices, and clearing pie series.
... void appendSlice(); void removeSlice(); void explodeSlices(); void clearSeries(); void fillSliceInfo(); public Q_SLOTS: void onAddSlice(); void onRemoveSlice(); void onExplode(); void onClearSeries(); ... - Instantiate a pie series and add several slices in your constructor.
... m_pieSeries = new QPieSeries; fillSliceInfo(); for (int i = 1; i < 5; ++i) { QPieSlice *slice = new QPieSlice; slice->setValue(m_sliceInfo.value.at(QRandomGenerator::global()->bounded(0, 6))); slice->setLabel(m_sliceInfo.label.at(QRandomGenerator::global()->bounded(0, 6))); slice->setLabelColor(m_sliceInfo.color.at(QRandomGenerator::global()->bounded(0, 6))); m_pieSeries->append(slice); } m_pieSeries->setLabelsVisible(true); ... - The
appendSlicefunction creates a QPieSlice, sets some of its properties and then appends it to the pie series.Notice that even if you have set labels visibility to
true, this does not work on slices added later to the pie series. You need to set visibility totrueon creation for every added slice.QPieSlice *slice = new QPieSlice; slice->setValue(m_sliceInfo.value.at(QRandomGenerator::global()->bounded(0, 6))); slice->setLabel(m_sliceInfo.label.at(QRandomGenerator::global()->bounded(0, 6))); slice->setLabelColor(m_sliceInfo.color.at(QRandomGenerator::global()->bounded(0, 6))); slice->setLabelVisible(true); m_pieSeries->append(slice);
- In the
removeSlicefunction, call QPieSeries::remove(). - In the
explodeSlicesfunction, loop through all slices and set QPieSlice::setExploded() totrueorfalsedepending on current state. - In the
clearSeriesfunction, call QPieSeries::clear(). This will delete all slices from your pie series. Note that this function does not delete a pie series itself.
Declare a GraphView in Qml
Declare a GraphsView element and set the seriesList property to a pie series created in C++ code.
To customize the GraphsView theme, set a custom GraphsTheme.
Item { id: mainView width: 1280 height: 720 GraphsView { id: graphsView anchors.fill: parent theme: GraphsTheme { id: graphsTheme theme: GraphsTheme.Theme.BlueSeries labelBorderVisible: true labelBackgroundVisible: true backgroundColor: "black" } seriesList: pieGraph.pieSeries } }