Nested Donuts Example

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

Creating Nested Donut Charts

Let's start by creating a QChartView instance and enabling the Antialiasing on it. A QChart object is then obtained from the QChartView instance. The legend is disabled and the title of the chart is set. Last line enables the animations of the chart.

 QChartView *chartView = new QChartView;
 chartView->setRenderHint(QPainter::Antialiasing);
 QChart *chart = chartView->chart();
 chart->legend()->setVisible(false);
 chart->setTitle("Nested donuts demo");
 chart->setAnimationOptions(QChart::AllAnimations);

Three variables are defined that will be used to define the donut chart. Min and max size define the relative size of the whole donut. minSize is the relative inner size of the smallest donut. maxSize is the relative outer size of the biggest donut.

 qreal minSize = 0.1;
 qreal maxSize = 0.9;
 int donutCount = 5;

The following block of code defines the individual donuts and their slices. First a new QPieSeries object is created. The number of slices in each donut is randomized. The internal for loop creates the slices with a random value and label same as the value. Next the label of the slice is set to be visible and its color is set to white. To make the example more interesting the hovered signal of the slice is connected to widget's slot, of which the inner workings are explained later. Finally the slice is added to the donut. The donut's size is adjusted to achieve the nesting of the donuts. Then the donut is added to the widget's list of donuts and to the chart.

 for (int i = 0; i < donutCount; i++) {
     QPieSeries *donut = new QPieSeries;
     int sliceCount =  3 + QRandomGenerator::global()->bounded(3);
     for (int j = 0; j < sliceCount; j++) {
         qreal value = 100 + QRandomGenerator::global()->bounded(100);
         QPieSlice *slice = new QPieSlice(QString("%1").arg(value), value);
         slice->setLabelVisible(true);
         slice->setLabelColor(Qt::white);
         slice->setLabelPosition(QPieSlice::LabelInsideTangential);
         connect(slice, &QPieSlice::hovered, this, &Widget::explodeSlice);
         donut->append(slice);
         donut->setHoleSize(minSize + i * (maxSize - minSize) / donutCount);
         donut->setPieSize(minSize + (i + 1) * (maxSize - minSize) / donutCount);
     }
     m_donuts.append(donut);
     chartView->chart()->addSeries(donut);
 }

Finally the widget is placed in a layout used by the application.

 QGridLayout *mainLayout = new QGridLayout;
 mainLayout->addWidget(chartView, 1, 1);
 setLayout(mainLayout);

To make the example more interesting the donuts are rotated randomly every 1.25 sec.

 updateTimer = new QTimer(this);
 connect(updateTimer, &QTimer::timeout, this, &Widget::updateRotation);
 updateTimer->start(1250);

The widget's updatedRotation slot is defined below. It goes through all of the donuts and modifies their current rotation by a random value.

 void Widget::updateRotation()
 {
     for (int i = 0; i < m_donuts.count(); i++) {
         QPieSeries *donut = m_donuts.at(i);
         qreal phaseShift =  -50 + QRandomGenerator::global()->bounded(100);
         donut->setPieStartAngle(donut->pieStartAngle() + phaseShift);
         donut->setPieEndAngle(donut->pieEndAngle() + phaseShift);
     }
 }

The earlier mentioned explodeSlice slot code is provided below. If the slice is set to exploded, then stop the timer that controls the donuts rotation. Then the slice's start and end angles are obtained from the slice. To highlight the selected slice all the other donuts that lie outward from the one that contains the selected slice have their start and end angles modified so that they wouldn't "block" the way for the hightlighted slice. If the slice is no longer selected return to the original state.

 void Widget::explodeSlice(bool exploded)
 {
     QPieSlice *slice = qobject_cast<QPieSlice *>(sender());
     if (exploded) {
         updateTimer->stop();
         qreal sliceStartAngle = slice->startAngle();
         qreal sliceEndAngle = slice->startAngle() + slice->angleSpan();

         QPieSeries *donut = slice->series();
         qreal seriesIndex = m_donuts.indexOf(donut);
         for (int i = seriesIndex + 1; i < m_donuts.count(); i++) {
             m_donuts.at(i)->setPieStartAngle(sliceEndAngle);
             m_donuts.at(i)->setPieEndAngle(360 + sliceStartAngle);
         }
     } else {
         for (int i = 0; i < m_donuts.count(); i++) {
             m_donuts.at(i)->setPieStartAngle(0);
             m_donuts.at(i)->setPieEndAngle(360);
         }
         updateTimer->start();
     }
     slice->setExploded(exploded);
 }

Example project @ code.qt.io