Qt/C++ - Lesson 031. QCustomPlot – The build of charts with time

график, QDateTime, Qt, время, QCustomPlot

QCustomPlot Library has the ability to charting the scale of time, which is useful in analyzing the data, which change over time. To do this, you need to install a signature style to the time axis as QCPAxis::ltDateTime. And then set the date and time format. That is, it is possible to display on the axes or the date or time, or simultaneously do both, depending on what you specify formatting. Formatting Rules for QCustomPlot used are the same as for QDateTime , QDate , QTime , classes.

Time coordinate is transmitted in the form of a double number that starts the countdown in seconds from time 1970-01-01T00:00:00 . What to consider when plotting.

I propose to write an application that will build a pseudo-random schedule of income and rubles according to the current time coordinate. At the same time the schedule will be to communicate, that is, zoom and remove it, and move, but only on the horizontal axis. That is, the height of the graph display will not change. Also, we make it possible to change the time format in the coordinate dependence of the visible area of ​​the chart for the time axis. That is, if the visible part of the graph in less than one day, the time-axis signature format will be as follows: hh: mm. Otherwise, the format is " dd MMM yy ".

Building a graph

We create a project and connect it to the library QCustomPlot . Modifications will be subject only mainwindow.h and mainwindow.cpp files. New files will not be added.

mainwindow.h

We declare an instance of QCustomPlot , together with a copy of the schedule. And declare the slot in which the signal is transmitted to change the display area on the time axis.

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
 
#include <QMainWindow>
#include "qcustomplot.h"
 
namespace Ui {
class MainWindow;
}
 
class MainWindow : public QMainWindow
{
    Q_OBJECT
 
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
 
private:
    Ui::MainWindow *ui;
    QCustomPlot *customPlot;    
    QCPGraph *graphic;          
 
private slots:
    void slotRangeChanged (const QCPRange &newRange);
};
 
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
 
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    customPlot = new QCustomPlot(); 
    ui->gridLayout->addWidget(customPlot,0,0,1,1); 
 
    customPlot->setInteraction(QCP::iRangeZoom,true);   
    customPlot->setInteraction(QCP::iRangeDrag, true);  
    customPlot->axisRect()->setRangeDrag(Qt::Horizontal);   // Enable only drag along the horizontal axis
    customPlot->axisRect()->setRangeZoom(Qt::Horizontal);   // Enable zoom only on the horizontal axis
    customPlot->xAxis->setTickLabelType(QCPAxis::ltDateTime);   // Labl coordinates along the X axis as the Date and Time
    customPlot->xAxis->setDateTimeFormat("hh:mm");  // Set the date and time format
 
    // Customizable fonts on the axes
    customPlot->xAxis->setTickLabelFont(QFont(QFont().family(), 8));
    customPlot->yAxis->setTickLabelFont(QFont(QFont().family(), 8));
 
    // Automatic scaling ticks on the X-axis
    customPlot->xAxis->setAutoTickStep(true);
 
    /* We are making visible the X-axis and Y on the top and right edges of the graph, 
     * but disable them tick and labels coordinates
     * */
    customPlot->xAxis2->setVisible(true);
    customPlot->yAxis2->setVisible(true);
    customPlot->xAxis2->setTicks(false);
    customPlot->yAxis2->setTicks(false);
    customPlot->xAxis2->setTickLabels(false);
    customPlot->yAxis2->setTickLabels(false);
 
    customPlot->yAxis->setTickLabelColor(QColor(Qt::red));  
    customPlot->legend->setVisible(true);   // Enable Legend 
    // Set the legend in the upper left corner of the chart
    customPlot->axisRect()->insetLayout()->setInsetAlignment(0, Qt::AlignLeft|Qt::AlignTop);
 
    // Initialize the chart and bind it to the axes
    graphic = new QCPGraph(customPlot->xAxis, customPlot->yAxis);
    customPlot->addPlottable(graphic);  
    graphic->setName("Доход, Р");       
    graphic->setPen(QPen(QColor(Qt::red))); 
    graphic->setAntialiased(false);        
    graphic->setLineStyle(QCPGraph::lsImpulse); // Charts in a pulse ticks view
 
    connect(customPlot->xAxis, SIGNAL(rangeChanged(QCPRange)),
            this, SLOT(slotRangeChanged(QCPRange)));
 
    // We will build schedule with today's day and the current second in a future
    double now = QDateTime::currentDateTime().toTime_t();
    // We declare a vector of time and income
    QVector <double> time(400), income(400);
 
    srand(15); // Initialize the random number generator
 
    // ЗFill in the values of the graph
    for (int i=0; i<400; ++i)
      {
        time[i] = now + 3600*i;
        income[i] = qFabs(income[i-1]) + (i/50.0+1)*(rand()/(double)RAND_MAX-0.5);
      }
 
    graphic->setData(time, income); 
    customPlot->rescaleAxes();      
    customPlot->replot();           
}
 
MainWindow::~MainWindow()
{
    delete ui;
}
 
void MainWindow::slotRangeChanged(const QCPRange &newRange)
{
    /* If a scope chart is less than one day, 
     * then display the hours and minutes in the Axis X, 
     * otherwise display the date "Month Day Year"
     * */
    customPlot->xAxis->setDateTimeFormat((newRange.size() <= 86400)? "hh:mm" : "dd MMM yy");
}

Result

As a result, you should get a graph similar to that shown in the following figure. Note that when you scroll the mouse wheel and moving the mouse the chart, graph itself will only be changed on the Axes X, as was intended in this example.

Download Project

Video