Graphs 2D in Qt Widgets

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

1. The PieWidget class implements the main view of the demo application. In the PieWidget class, 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;
       ...

2. The PieGraph class is used to handle logic for adding and removing slices, and have other functionalities.

   m_pieGraph = new PieGraph;
       ...

3. For QQuickWidget, set source and resizeMode, and set the context property. The Context property 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);

4. 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.

1. In the PieGraph class, declare a pieSeries property.

       ...
   Q_PROPERTY(QPieSeries *pieSeries READ pieSeries WRITE setPieSeries NOTIFY pieSeriesChanged FINAL)
       ...

2. 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();
       ...

3. 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);
       ...

4. The appendSlice function 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 to true on 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);

5. In the removeSlice function, call QPieSeries::remove().
6. In the explodeSlices function, loop through all slices and set QPieSlice::setExploded() to true or false depending on current state.
7. In the clearSeries function, 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
    }
}

Example project @ code.qt.io