PyQtGraph opens its own window, not main app window

Question

I'm using Qt Designer to build an application in Python, which needs to show a graph in the main application window with buttons and the main program. I'm using PyQtGraph for the plot.

Here is the code:

from PyQt5 import QtCore, QtGui, QtWidgets
import pyqtgraph as pg

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(668, 458)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.labelx = QtWidgets.QLabel(self.centralwidget)
        self.labelx.setGeometry(QtCore.QRect(50, 20, 581, 231))
        self.labelx.setAutoFillBackground(True)
        self.labelx.setFrameShape(QtWidgets.QFrame.Panel)
        self.labelx.setFrameShadow(QtWidgets.QFrame.Sunken)
        self.labelx.setLineWidth(3)
        self.labelx.setMidLineWidth(3)
        self.labelx.setText("")
        self.labelx.setScaledContents(True)
        self.labelx.setObjectName("labelx")
        self.label_15 = QtWidgets.QLabel(self.centralwidget)
        self.label_15.setGeometry(QtCore.QRect(350, 280, 91, 16))
        self.label_15.setObjectName("label_15")
        self.lineEdit_13 = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit_13.setGeometry(QtCore.QRect(230, 280, 113, 20))
        self.lineEdit_13.setObjectName("lineEdit_13")
        self.lineEdit_14 = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit_14.setGeometry(QtCore.QRect(230, 310, 113, 20))
        self.lineEdit_14.setText("")
        self.lineEdit_14.setObjectName("lineEdit_14")
        self.label_16 = QtWidgets.QLabel(self.centralwidget)
        self.label_16.setGeometry(QtCore.QRect(350, 310, 91, 16))
        self.label_16.setObjectName("label_16")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(10, 390, 111, 23))
        self.pushButton.setObjectName("pushButton")
        self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_2.setGeometry(QtCore.QRect(120, 390, 111, 23))
        self.pushButton_2.setObjectName("pushButton_2")
        self.lineEdit_15 = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit_15.setGeometry(QtCore.QRect(440, 280, 113, 20))
        self.lineEdit_15.setText("")
        self.lineEdit_15.setObjectName("lineEdit_15")
        self.label_17 = QtWidgets.QLabel(self.centralwidget)
        self.label_17.setGeometry(QtCore.QRect(560, 280, 91, 16))
        self.label_17.setObjectName("label_17")
        self.pushButton_3 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_3.setGeometry(QtCore.QRect(550, 390, 111, 23))
        self.pushButton_3.setObjectName("pushButton_3")
        self.pushButton_4 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_4.setGeometry(QtCore.QRect(230, 340, 111, 23))
        self.pushButton_4.setObjectName("pushButton_4")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 668, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        self.pushButton_2.clicked.connect(self.lineEdit_13.clear)
        self.pushButton_2.clicked.connect(self.lineEdit_14.clear)
        self.pushButton_2.clicked.connect(self.lineEdit_15.clear)
        self.pushButton_4.clicked.connect(self.plotwid)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.label_15.setText(_translate("MainWindow", "Total Expenses"))
        self.label_16.setText(_translate("MainWindow", "Total Income"))
        self.pushButton.setText(_translate("MainWindow", "Add Expenses"))
        self.pushButton_2.setText(_translate("MainWindow", "Cleasr All"))
        self.label_17.setText(_translate("MainWindow", "Total Savings"))
        self.pushButton_3.setText(_translate("MainWindow", "Exit"))
        self.pushButton_4.setText(_translate("MainWindow", "Make Graph"))

    def plotwid(self):

        # define the data
        title = "Savings Calculator"
        t = int(8)
        # y values to plot by line 1
        y = [1, 5, 6, 8, 6, 11, 14, 13, 18, 30]

        # y values to plot by line 2
        y2 = [1, 1, 5, 8, 9, 11, 16, 17, 14, 30]
        x = range(0, 10)

        # create plot window object
        plt = pg.plot()
        # showing x and y grids
        plt.showGrid(x=True, y=True)

        # adding legend
        plt.addLegend()

        # set properties of the label for y axis
        plt.setLabel('left', 'Amount of savings and income', units='y')

        # set properties of the label for x axis
        plt.setLabel('bottom', 'Months to save', units='s')

        # setting horizontal range
        plt.setXRange(0, 12)

        # setting vertical range
        plt.setYRange(0, 1000)

        # setting window title
        plt.setWindowTitle(title)

        # ploting line in green color
        line1 = plt.plot(x, y, pen='g', symbol='x', symbolPen='g',
                         symbolBrush=0.2, name='green')

        # ploting line2 with blue color
        line2 = plt.plot(x, y2, pen='b', symbol='o', symbolPen='b',
                         symbolBrush=0.2, name='blue')

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

Problem

It always opens in its own window. How can I set it to open in a window within my application window?

score 0 · Answer 1 · answered Oct 07 '20 at 15:25

_{First of all, do not modify the code generated by QtDesigner (for more information read here and here) so you must regenerate the file: pyuic5 design.ui -o design.py -x`}

Considering the above, the solution is to place the PlotWidget inside "labelx" through a layout (another solution can be to promote the widget):

from PyQt5 import QtCore, QtGui, QtWidgets
import pyqtgraph as pg

from design import Ui_MainWindow


class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.setupUi(self)
        self.pushButton_2.clicked.connect(self.lineEdit_13.clear)
        self.pushButton_2.clicked.connect(self.lineEdit_14.clear)
        self.pushButton_2.clicked.connect(self.lineEdit_15.clear)
        self.pushButton_4.clicked.connect(self.plotwid)

        lay = QtWidgets.QVBoxLayout(self.labelx)
        lay.setContentsMargins(0, 0, 0, 0)
        self.plt = pg.plot()
        lay.addWidget(self.plt)

    def plotwid(self):

        title = "Savings Calculator"
        t = 8
        # y values to plot by line 1
        y = [1, 5, 6, 8, 6, 11, 14, 13, 18, 30]

        # y values to plot by line 2
        y2 = [1, 1, 5, 8, 9, 11, 16, 17, 14, 30]
        x = range(0, 10)

        self.plt.showGrid(x=True, y=True)

        # adding legend
        self.plt.addLegend()

        # set properties of the label for y axis
        self.plt.setLabel("left", "Amount of savings and income", units="y")

        # set properties of the label for x axis
        self.plt.setLabel("bottom", "Months to save", units="s")

        # setting horizontal range
        self.plt.setXRange(0, 12)

        # setting vertical range
        self.plt.setYRange(0, 1000)

        # setting window title
        self.plt.setWindowTitle(title)

        # ploting line in green color
        line1 = self.plt.plot(
            x, y, pen="g", symbol="x", symbolPen="g", symbolBrush=0.2, name="green"
        )

        # ploting line2 with blue color
        line2 = self.plt.plot(
            x, y2, pen="b", symbol="o", symbolPen="b", symbolBrush=0.2, name="blue"
        )


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)
    w = MainWindow()
    w.show()
    sys.exit(app.exec_())

thank you very much!, i am just learning how to use QTDesigner, and pyqtgraph. It's very powerful and will take me sometime to understand how they all work together. your information helped me. and its much appreciated.....also, why would i not modify the code? how else can i program the buttons etc.., and make the program i want to build? — incognito2880, Oct 07 '20 at 23:36

PyQtGraph opens its own window, not main app window

Problem

1 Answers1