- Qt 6.10
- Qt Graphs
- Graphs 2D in Qt Widgets
- Qt Graphs | Commercial or GPLv3

# 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

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.

        ...
        public:
        ...
            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