Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to implement 'Dynamic Spline Example' to a QMainWindow Project?



  • Qt's example is here Dynamix Spline Example

    I'm on a QMainWindow and i couldn't implemented the example into a widget. How to achieve this. I want to show that graphic in a widget in my QMainWindow project.


  • Qt Champions 2017

    @R_Irudezu said in How to implement 'Dynamic Spline Example' to a QMainWindow Project?:

    Dynamix Spline Example

    what is that you tried & what is not working ?



  • @dheerendra Here is the example that i edited a little bit:

    chart.cpp:

    #include "chart.h"
    #include <QtCharts/QAbstractAxis>
    #include <QtCharts/QSplineSeries>
    #include <QtCharts/QValueAxis>
    #include <QtCore/QRandomGenerator>
    #include <QtCore/QDebug>
    #include <QtCharts/QChartView>
    
    Chart::Chart(QGraphicsItem *parent, Qt::WindowFlags wFlags):
        QChart(QChart::ChartTypeCartesian, parent, wFlags),
        m_series(0),
        m_axis(new QValueAxis),
        m_step(0),
        m_x(5),
        m_y(1)
    {
    
        QObject::connect(&m_timer, &QTimer::timeout, this, &Chart::handleTimeout);
        m_timer.setInterval(2500);
    
        this->setTheme(QChart::ChartThemeDark);
        this->setDropShadowEnabled(true);
        this->setAnimationOptions(QChart::SeriesAnimations);
        this->legend()->hide();
        this->setTitle("Age Average Test");
        this->setAnimationOptions(QChart::AllAnimations);
    
        QLinearGradient backgroundGradient;
        backgroundGradient.setStart(QPointF(0, 0));
        backgroundGradient.setFinalStop(QPointF(0, 1));
        backgroundGradient.setColorAt(0.0, QRgb(0xd2d0d1));
        backgroundGradient.setColorAt(1.0, QRgb(0x4c4547));
        backgroundGradient.setCoordinateMode(QGradient::ObjectBoundingMode);
        this->setBackgroundBrush(backgroundGradient);
    
        QLinearGradient plotAreaGradient;
        plotAreaGradient.setStart(QPointF(0, 1));
        plotAreaGradient.setFinalStop(QPointF(1, 0));
        plotAreaGradient.setColorAt(0.0, QRgb(0x555555));
        plotAreaGradient.setColorAt(1.0, QRgb(0x55aa55));
        plotAreaGradient.setCoordinateMode(QGradient::ObjectBoundingMode);
        this->setPlotAreaBackgroundBrush(plotAreaGradient);
        this->setPlotAreaBackgroundVisible(true);
    
    
        m_series = new QSplineSeries(this);
        QPen green(Qt::white);
        green.setWidth(5);
        m_series->setPen(green);
        m_series->append(m_x, m_y);
    
    
        addSeries(m_series);
        createDefaultAxes();
        setAxisX(m_axis, m_series);
        m_axis->setTickCount(5);
        axisX()->setRange(0, 10);
        axisY()->setRange(0, 70);
    
        m_timer.start();
    }
    
    Chart::~Chart()
    {
    
    }
    
    void Chart::handleTimeout()
    {
        qreal x = plotArea().width() / m_axis->tickCount();
        qreal y = (m_axis->max() - m_axis->min()) / m_axis->tickCount();
        m_x += y;
        m_y = QRandomGenerator::global()->bounded(70);
        m_series->append(m_x, m_y);
        scroll(x, 0);
    }
    

    main.cpp:

    #include "chart.h"
    #include <QtWidgets/QApplication>
    #include <QtWidgets/QMainWindow>
    
    QT_CHARTS_USE_NAMESPACE
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
        QMainWindow window;
    
    
        Chart *chart = new Chart;
        QChartView chartView(chart);
        chartView.setRenderHint(QPainter::Antialiasing);
    
    
        window.setCentralWidget(&chartView);
    
        window.resize(400, 300);
        window.show();
        return a.exec();
    }
    
    

    Header is same, when it run, it's ok but i want to show same graphic in a QMainWindow widget.

    • QMainWindow project SS:
      0_1544243017617_s1.PNG

    • Dynamic Spline Example SS:
      0_1544243066736_s2.PNG

  • Qt Champions 2017

    Ok. understood. What is happening ? What is QChartView here ? What is it doing ? Is the Spline not visible in MainWIndow ? Where is it visible ?



  • @dheerendra as you see i put the 2nd screenshots code here, first screenshot is my simple QMainWindow project. The problem is i don't know how to insert graphic to widget. Graphic is doing only producing random numbers and draws it.

    Could you show me how to do that, if you know? I mean, show that graphic in that widget in first screenshot.


  • Qt Champions 2017

    Are you looking for QGraphicsProxyWidget ? If you want to place any graphic items it has to be through this widget or you need to use QGraphicsView & then set this to central widget.



  • @dheerendra I don't know, i am already asking for it. How to do that in a proper way......

    I just shared to code and i want to implement it into QMainWindow (first screenshot), can some show me how to do that.


  • Qt Champions 2017

    I'm just doing the straight copy from the example. You are also doing the same.  What is the issue you are facing. What is code available here is right.
    
    QMainWindow window;
    Chart *chart = new Chart;
    chart->setTitle("Dynamic spline chart");
    chart->legend()->hide();
    chart->setAnimationOptions(QChart::AllAnimations);
    QChartView chartView(chart);
    chartView.setRenderHint(QPainter::Antialiasing);
    window.setCentralWidget(&chartView);
    window.resize(400, 300);
    window.show();


  • Mr. @dheerendra i think you didn't understand the problem. Let's start again :)

    The code i shared here is belong to 'Qt Dynamic Spline Example' project. Nothing wrongs with it, it works. But if you check it out the link and check the project, there is no mainwindow.ui file in that example. But, in my simple project, i have mainwindow.ui file, like i shared in the first screenshot above.

    The code works, but i want to put that graphic example (Qt Dynamic Spline Example) into my simple project and i don't know how to do it, because the example of Qt's class structure seemed different to me.

    If you or someone can show me how to show that Qt example dynamc graphic in a mainwindow.ui widget i'd be glad so much. I want to run that Qt example's dynamic graphic in my widget.

    Here is a GIF:
    ![0_1544407331443_asd.gif](Uploading 100%)

    I exactly want include the animated Qt example into my project, to that what widget below, under "Age Average" label


  • Qt Champions 2017

    OK. You have mainwindow.ui and you have done drag&drop of all the visual elements in to it. Now you would like to place the Chart into this. Is this correct question ?




  • Qt Champions 2017

    Just see the following example. Our top layout is vbox. I have added the chart to that layout.

    This code is constructor.

    MainWindow::MainWindow(QWidget *parent) :
     QMainWindow(parent),
     ui(new Ui::MainWindow)
    {
     ui->setupUi(this);
     QtCharts::QChartView *chart = new QtCharts::QChartView;
     ui->verticalLayout->addWidget(chart);
    }
    
    MainWindow::~MainWindow()
    {
     delete ui;
    }
    


  • @dheerendra if you checked it out the Qt's example, constructor has kinda differend structure:

    Chart::Chart(QGraphicsItem *parent, Qt::WindowFlags wFlags):
        QChart(QChart::ChartTypeCartesian, parent, wFlags),
        m_series(0),
        m_axis(new QValueAxis),
        m_step(0),
        m_x(5),
        m_y(1)
    
    {
        //...
    }
    

    and in main.cpp there is

    Chart *chart = new Chart;
    QChartView chartView(chart);
    chartView.setRenderHint(QPainter::Antialiasing);
    

    the chart objects you wrote in code and i showed are different in my opinion.


  • Qt Champions 2017

    Yes. This is where I'm suggesting you to use the QChartView. QChart is QGraphicsItem. You will not be able to directly add in to widget based App. Please use the QChartView. Please add the QChartView to layout. Please look at the sample given by me.



  • @dheerendra said in How to implement 'Dynamic Spline Example' to a QMainWindow Project?:

    QChartView *chart = new QtCharts::QChartView;

    Thank you Mr. @dheerendra

    OK i am writing here how i solved:

    • First add chart.h and chart.cpp file to your project or whatever name you want.
    • Create an instance of Chart :
    Chart *sampleChart = new Chart;
    
    //default values
    sampleChart ->m_series = 0;
    sampleChart ->m_axis = new QValueAxis;
    sampleChart ->m_step = 0;
    sampleChart ->m_x = 5;
    sampleChart ->m_y = 1;
    
    //connection to the random value producer function
    QObject::connect(&sampleChart ->m_timer, &QTimer::timeout, sampleChart , &Chart::handleTimeout);
        sampleChart ->m_timer.setInterval(1250);
    
    • Set its customizing features if you want. such as:
     sampleChart ->setTheme(QChart::ChartThemeDark);
     sampleChart ->setDropShadowEnabled(true);
     sampleChart ->setAnimationOptions(QChart::SeriesAnimations);
    
    • Insert it into your widget layout:
    QChartView *chartView = new QChartView;
    chartView->setChart(m);
    chartView->setRenderHint(QPainter::Antialiasing);
    ui->verticalLayout->addWidget(chartView);
    
    sampleChart->m_timer.start();
    

    a screenshot here:
    0_1544407038588_asdd.PNG


  • Qt Champions 2017

    Cool. Yes, This is the right way of doing. This is what we suggested you from the beginning.


Log in to reply