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

R_Irudezu

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.

dheerendra

@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 ?

R_Irudezu

@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:

Dynamic Spline Example SS:

dheerendra

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

R_Irudezu

@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.

dheerendra

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.

R_Irudezu

@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.

dheerendra

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();

R_Irudezu

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

dheerendra

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 ?

R_Irudezu

@dheerendra YES!

dheerendra

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;
}

R_Irudezu

@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.

dheerendra

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.

R_Irudezu

@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:

dheerendra

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