MORE WITH GRAPH AND GUI PYTHON

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

TWO AXES IN ONE FIGURE GUI WITH CERTAIN OPACITY LEVELS

In this case, you will display two graphs on each axis, where each graph will be filled with a certain color and opacity level. Modify the utama.py script, so use the fill() method, as shown below:

#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.dsAlpha.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()
        alfa = self.dsAlpha.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.fill(x, y1, 'b', x, y2, 'r', alpha=alfa)
        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, 5)     
        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.fill(x, y11, 'b', x, y21, 'r', alpha=alfa)
        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_())

It can be noted that the alpha opacity level is controlled by the Double Spin Box widget named dsAlpha. The method gambar_grafik() is then attached to the valueChanged() event of dsAlpha so that any change in value on dsAlpha will call the method citra_grafik().

CHOOSING THE COLOR OF LINE FROM COMBO BOX WIDGET

In this case, you place a number of colors in two combo boxes. The gambar_grafik() method is then attached to the currentIndexChanged() event of the two Combo Box widgets (cbWarnaGaris1 and cbWarnaGaris2), so that each time the user changes the selected index from one or both of the combo boxes, the citra_grafik() method will be called.

#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
from matplotlib import colors as mwarna

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))
        self.isi_combo_box()
        self.cbWarnaGaris1.currentIndexChanged.connect(self.gambar_grafik)
        self.cbWarnaGaris2.currentIndexChanged.connect(self.gambar_grafik)

    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, str(self.cbWarnaGaris1.currentText()),\
                                              x, y2, str(self.cbWarnaGaris2.currentText()),\
                                              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, str(self.cbWarnaGaris1.currentText()),\
                                              x, y21, str(self.cbWarnaGaris2.currentText()),\
                                              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', 'kosinus'),loc='upper right')
        self.widgetTampil.canvas1.sumbu2.grid()
        
        
        self.widgetTampil.canvas1.draw()

    def isi_combo_box(self):        
        # Mengisi combo box warna
        warna = dict(mwarna.BASE_COLORS, **mwarna.CSS4_COLORS)

        # Mengurutkan warna berdasarkan hue, saturation, value dan nama.
        by_hsv = sorted((tuple(mwarna.rgb_to_hsv(mwarna.to_rgba(color)[:3])), nama)
        for nama, color in warna.items())
        nama_urut = [nama for hsv, nama in by_hsv]

        for nama in nama_urut:
            self.cbWarnaGaris1.addItem(nama)
            self.cbWarnaGaris2.addItem(nama)
        
if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ex = GambarGrafikGUI()
    ex.show()
    sys.exit(app.exec_())