Implementing charts and graphs

Qt makes drawing different types of diagrams easy by putting the complex drawing algorithms behind different abstraction layers, and providing us with a set of classes and functions that can be used to easily create these diagrams without knowing how the drawing algorithm works behind the scenes. These classes and functions are all included in the chart module that comes together with Qt.

Let's create a new Qt Widgets Application project and try to create our first chart in Qt.

After you have created the new project, open up the project file (.pro) and add the charts module to your project, like so:

QT += core gui charts 

Then, open up mainwindow.h and add the following to include the header files that are required for using the charts module:

#include <QtCharts> 
#include <QChartView> 
#include <QBarSet> 
#include <QBarSeries> 

The QtCharts and QtChartView headers are both essential for Qt's charts module. You must include both of them for any type of chart to work at all. The other two headers, namely QBarSetand QBarSeries, are used here because we're going to create a bar chart. The headers that get included in your project will be different depending on the type of chart you want to create.

Next, open mainwindow.ui and drag either Vertical Layout or Horizontal Layout to the central widget. Then, select the central widget and click either Layout Horizontally or Layout Vertically. The layout direction is not particularly important, as we will only create a single chart here:

After that, right-click on the layout widget you just dragged to the central widget, and select Morph into | QFrame. This will change the layout widget into a QFrame widget while still maintaining its layout properties. If you create a QFrame from Widget Box, it won't have the layout properties that we need. This step is important so that we can set it as the parent of our chart later:

Now open up mainwindow.cpp and add the following code:

MainWindow::MainWindow(QWidget *parent) : 
   QMainWindow(parent), 
   ui(new Ui::MainWindow) 
{ 
   ui->setupUi(this); 
 
   QBarSet *set0 = new QBarSet("Jane"); 
   QBarSet *set1 = new QBarSet("John"); 
   QBarSet *set2 = new QBarSet("Axel"); 
   QBarSet *set3 = new QBarSet("Mary"); 
   QBarSet *set4 = new QBarSet("Samantha"); 
 
   *set0 << 10 << 20 << 30 << 40 << 50 << 60; 
   *set1 << 50 << 70 << 40 << 45 << 80 << 70; 
   *set2 << 30 << 50 << 80 << 13 << 80 << 50; 
   *set3 << 50 << 60 << 70 << 30 << 40 << 25; 
   *set4 << 90 << 70 << 50 << 30 << 16 << 42; 
 
   QBarSeries *series = new QBarSeries(); 
   series->append(set0); 
   series->append(set1); 
   series->append(set2); 
   series->append(set3); 
   series->append(set4); 
} 

The code above initializes all the categories that will be displayed in the bar chart. Then, we also added six different items of data to each category, which will later be represented in the form of bars/rectangular shapes.

The QBarSet class represents a set of bars in the bar chart. It groups several bars into a bar set, which can then be labeled. QBarSeries, on the other hand, represents a series of bars grouped by category. In other words, bars that have the same color belong to the same series.

Next, initiate the QChart object and add the series to it. We also set the chart's title and enable animation:

QChart *chart = new QChart(); 
chart->addSeries(series); 
chart->setTitle("Student Performance"); 
chart->setAnimationOptions(QChart::SeriesAnimations); 

After that, we create a bar chart category axis and apply it to the bar chart's x axis. We used a QStringList variable, which is similar to an array, but explicitly for storing strings. The QBarCategoryAxis will then take the string list and populate it over the x axis:

QStringList categories; 
categories << "Jan" << "Feb" << "Mar" << "Apr" << "May" << "Jun"; 
QBarCategoryAxis *axis = new QBarCategoryAxis(); 
axis->append(categories); 
chart->createDefaultAxes(); 
chart->setAxisX(axis, series); 

Then, we create a chart view for Qt to render the bar chart and set it as a child of the frame widget in the main window; otherwise, it won't be rendered on the main window:

QChartView *chartView = new QChartView(chart); 
chartView->setParent(ui->verticalFrame); 

Click the Run button in Qt Creator, and you should see something like this:

Next, let's do a pie chart; it's really easy. First, instead of QBarSet and QBarSeries, we include QPieSeries and QPieSlice:

#include <QPieSeries> 
#include <QPieSlice> 

Then, create a QPieSeries object and set up the name and value of each data. After that, set one of the slices to a different visual style and make it pop out from the rest. Then, create a QChart object and link it with the QPieSeriesobject that we have created:

QPieSeries *series = new QPieSeries(); 
series->append("Jane", 10); 
series->append("Joe", 20); 
series->append("Andy", 30); 
series->append("Barbara", 40); 
series->append("Jason", 50); 
 
QPieSlice *slice = series->slices().at(1); 
slice->setExploded(); // Explode this chart 
slice->setLabelVisible(); // Make label visible 
slice->setPen(QPen(Qt::darkGreen, 2)); // Set line color 
slice->setBrush(Qt::green); // Set slice color 
 
QChart *chart = new QChart(); 
chart->addSeries(series); 
chart->setTitle("Students Performance"); 

Last, but not least, create the QChartView object and link it with the QChart object we just created. Then, set it as a child of the frame widget, and we're good to go!

QChartView *chartView = new QChartView(chart);
chartView->setParent(ui->verticalFrame);

Press the Run button now, and you should be able to see something like this:

Now that we've seen that it is easy to create graphs and charts with Qt, let's expand the project we started in the previous chapters and create a dashboard for it!