LINE GRAPH WITH LINE EDIT WIDGET

You need to see introduction of how to plot simple line graph using GUI Python in this link.

You will develop an existing GUI by adding several Line Edit widgets to read input, which are used to set the range and step of the graph (signal). Follow the steps below:

1. Open the gui_grafik.ui file with Qt Designer. Add four Label widgets and four Line Edit widgets on the form.
2. Name the text property of the four Label widgets with Batas Awal, Batas Akhir, Langkah, and Frek.
3. Set the objectName property of the four Line Edit widgets to be leBatasAwal, leBatasAkhir, leLangkah, and leFrekuensi.
4. Save the form with the same name. The form now looks like this:





5. Define the GUI_Grafik class (according to the class name from widgetTampil) as before:



from PyQt5.QtWidgets import*
from matplotlib.backends.backend_qt5agg import FigureCanvas
from matplotlib.figure import Figure
    
class GUI_Grafik(QWidget):    
    def __init__(self, parent = None):
        QWidget.__init__(self, parent)        
        self.canvas = FigureCanvas(Figure())
       
        vertical_layout = QVBoxLayout()
        vertical_layout.addWidget(self.canvas)
        
        self.canvas.sumbu1 = self.canvas.figure.add_subplot(111)
        self.canvas.figure.set_facecolor("xkcd:wheat")
        self.setLayout(vertical_layout)



6. Modify the GambarGrafikGUI class in the utama.py so that it involves the four Line Edit widgets that are used to read the initial boundary, end, step, and signal frequency values:



#utama.py
from PyQt5.QtWidgets import*
from PyQt5.uic import loadUi
from matplotlib.backends.backend_qt5agg import (NavigationToolbar2QT as NavigationToolbar)

import numpy as np
     
class GambarGrafikGUI(QMainWindow):   
    def __init__(self):
        
        QMainWindow.__init__(self)
        loadUi("gui_grafik.ui",self)

        self.setWindowTitle("Contoh GUI Dengan PyQt5 & Matplotlib")
        self.pbTampil.clicked.connect(self.gambar_grafik)
        self.addToolBar(NavigationToolbar(self.widgetTampil.canvas, self))

    def gambar_grafik(self):
        batasAwal = self.leBatasAwal.text()
        batasAkhir = self.leBatasAkhir.text()
        langkah = self.leLangkah.text()
        x = np.arange(float(batasAwal), float(batasAkhir), float(langkah))
        
        Fs = self.leFrekuensi.text()
        y = np.sin(2*np.pi*float(Fs)*x)
        
        self.widgetTampil.canvas.sumbu1.clear()
        self.widgetTampil.canvas.sumbu1.plot(x, y, color='blue', linewidth=3.0)
        self.widgetTampil.canvas.sumbu1.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas.sumbu1.set_xlabel('X', color='blue')
        self.widgetTampil.canvas.sumbu1.set_title('Grafik Sinusoidal')
        self.widgetTampil.canvas.sumbu1.set_facecolor('xkcd:wheat')
        self.widgetTampil.canvas.sumbu1.grid()
        self.widgetTampil.canvas.draw()
               
if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ex = GambarGrafikGUI()
    ex.show()
    sys.exit(app.exec_())





7. Run the program in utama.py. You will find all four Label widgets and all four Line Edit widgets on the form. Now, you can assign values ​​to each Line Edit widget, as desired:

TWO OR MORE GRAPHS IN ONE AXIS

Using the same gui_grafik.ui file, you can use it to display other signals (graphs) on the same axis. What you need to do is define two y functions and place them in the plot() method:

#utama.py
from PyQt5.QtWidgets import*
from PyQt5.uic import loadUi
from matplotlib.backends.backend_qt5agg import (NavigationToolbar2QT as NavigationToolbar)

import numpy as np
     
class GambarGrafikGUI(QMainWindow):   
    def __init__(self):
        
        QMainWindow.__init__(self)
        loadUi("gui_grafik.ui",self)

        self.setWindowTitle("Grafik Dua Garis")
        self.pbTampil.clicked.connect(self.gambar_grafik)
        self.addToolBar(NavigationToolbar(self.widgetTampil.canvas, self))

    def gambar_grafik(self):
        batasAwal = self.leBatasAwal.text()
        batasAkhir = self.leBatasAkhir.text()
        langkah = self.leLangkah.text()
        x = np.arange(float(batasAwal), float(batasAkhir), float(langkah))
        
        Fs = self.leFrekuensi.text()
        y1 = np.sin(2*np.pi*float(Fs)*x)
        y2 = np.cos(2*np.pi*float(Fs)*x)
        
        self.widgetTampil.canvas.sumbu1.clear()
        self.widgetTampil.canvas.sumbu1.plot(x, y1, x, y2, 'r--', linewidth=2.0)
        self.widgetTampil.canvas.sumbu1.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas.sumbu1.set_xlabel('X', color='blue')
        self.widgetTampil.canvas.sumbu1.set_title('Grafik Sinus dan Kosinus')
        self.widgetTampil.canvas.sumbu1.set_facecolor('xkcd:wheat')
        self.widgetTampil.canvas.sumbu1.legend(('sinus', 'kosinus'),loc='upper right')
        self.widgetTampil.canvas.sumbu1.grid()
        self.widgetTampil.canvas.draw()
               
if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ex = GambarGrafikGUI()
    ex.show()
    sys.exit(app.exec_())

Run the program above. You will find two graphs (sine and cosine) with a lower limit, an upper limit, a step, and a frequency that can be controlled through the four Line Edit widgets provided.

TWO AXES ON ONE FIGURE

In this case, you will create two axes in one figure. Each axis is then filled with two line graphs. What you need to do is modify the Python file so that it defines the two axes on the canvas figure, as shown below:

#gui_grafik.py
from PyQt5.QtWidgets import*
from matplotlib.backends.backend_qt5agg import FigureCanvas
from matplotlib.figure import Figure
    
class GUI_Grafik(QWidget):    
    def __init__(self, parent = None):
        QWidget.__init__(self, parent)        
        self.canvas1 = FigureCanvas(Figure())
       
        vertical_layout = QVBoxLayout()
        vertical_layout.addWidget(self.canvas1)
        
        self.canvas1.sumbu1 = self.canvas1.figure.add_subplot(211)
        self.canvas1.sumbu2 = self.canvas1.figure.add_subplot(212)
        self.canvas1.figure.set_facecolor(color='bisque')
        self.setLayout(vertical_layout)

Then, in the main file. You define a signal or graph that will be placed on each axis. In the script below, signals y1 and y2 are placed on sumbu1 and signals y11 and y21 are placed on sumbu2:

#utama.py
from PyQt5.QtWidgets import*
from PyQt5.uic import loadUi
from matplotlib.backends.backend_qt5agg import (NavigationToolbar2QT as NavigationToolbar)

import numpy as np
import random

class GambarGrafikGUI(QMainWindow):   
    def __init__(self):
        
        QMainWindow.__init__(self)
        loadUi("gui_grafik.ui",self)

        self.setWindowTitle("Grafik Dua Garis")
        self.pbTampil.clicked.connect(self.gambar_grafik)
        self.dsLebarGaris.valueChanged.connect(self.gambar_grafik)
        self.addToolBar(NavigationToolbar(self.widgetTampil.canvas1, self))

    def gambar_grafik(self):
        batasAwal = self.leBatasAwal.text()
        batasAkhir = self.leBatasAkhir.text()
        langkah = self.leLangkah.text()
        x = np.arange(float(batasAwal), float(batasAkhir), float(langkah))      
        Fs = self.leFrekuensi.text()
        lebarGaris = self.dsLebarGaris.value()
        
        #Subplot1
        y1 = np.sin(2*np.pi*float(Fs)*x)
        y2 = np.cos(2*np.pi*float(Fs)*x)
        
        self.widgetTampil.canvas1.sumbu1.clear()
        self.widgetTampil.canvas1.sumbu1.plot(x, y1, x, y2, 'r--', linewidth=lebarGaris)
        self.widgetTampil.canvas1.sumbu1.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas1.sumbu1.set_xlabel('X', color='blue')
        self.widgetTampil.canvas1.sumbu1.set_title('Grafik Sinus dan Kosinus')
        self.widgetTampil.canvas1.sumbu1.set_facecolor('xkcd:wheat')
        self.widgetTampil.canvas1.sumbu1.legend(('sinus', 'kosinus'),loc='upper right')
        self.widgetTampil.canvas1.sumbu1.grid()

        #Subplot2
        FsAcak = random.randint(1, 20)     
        y11 = np.sin(2*np.pi*FsAcak*x)
        y21 = np.cos(2*np.pi*FsAcak*x)
        
        self.widgetTampil.canvas1.sumbu2.clear()
        self.widgetTampil.canvas1.sumbu2.plot(x, y11, x, y21, 'r--', linewidth=lebarGaris)
        self.widgetTampil.canvas1.sumbu2.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas1.sumbu2.set_xlabel('X', color='blue')
        self.widgetTampil.canvas1.sumbu2.set_title('Grafik Sinus dan Kosinus Frekuensi Acak')
        self.widgetTampil.canvas1.sumbu2.set_facecolor('xkcd:lightblue')
        self.widgetTampil.canvas1.sumbu2.legend(('sinus acak', 'kosinus acak'),loc='upper right')
        self.widgetTampil.canvas1.sumbu2.grid()    
        
        self.widgetTampil.canvas1.draw()
               
if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ex = GambarGrafikGUI()
    ex.show()
    sys.exit(app.exec_())