Insert QChartView to ui

Question

I am trying to put plot candlestick and 5-days average line on a same qtchart but give two x axis plot code into a UI loader

import sys
from PyQt5.QtWidgets import QApplication, QWidget
from PyQt5.QtGui import QIcon
from PyQt5 import uic
import sys
from PyQt5.QtChart import QCandlestickSeries, QChart, QChartView, QCandlestickSet
from PyQt5.QtWidgets import QApplication, QMainWindow
from PyQt5.QtCore import Qt, QPointF
from PyQt5 import QtChart as qc

# load both ui file
uifile_1 = 'UI/main.ui'
form_1, base_1 = uic.loadUiType(uifile_1)

uifile_2 = 'UI/main1.ui'
form_2, base_2 = uic.loadUiType(uifile_2)


class Example(base_1, form_1):
    def __init__(self):
        super(base_1, self).__init__()
        self.setupUi(self)
        self.pushButton_2.clicked.connect(self.change)

    def change(self):
        self.main = MainPage()
        self.main.show()
        # self.close()


class MainPage(base_2, form_2):
    def __init__(self):
        super(base_2, self).__init__()
        self.setupUi(self)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Example()
    ex.show()
    sys.exit(app.exec_())

I have tried putting a widget but have no idea what are promoted class name and header file for candlesticks.

The reason I want to do this is that I want to update this candlestick chart at a regular interval of time and also insert some buttons on that window.

UI

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QPushButton" name="pushButton">
    <property name="geometry">
     <rect>
      <x>210</x>
      <y>280</y>
      <width>88</width>
      <height>33</height>
     </rect>
    </property>
    <property name="text">
     <string>PushButton</string>
    </property>
   </widget>
   <widget class="QPushButton" name="pushButton_2">
    <property name="geometry">
     <rect>
      <x>340</x>
      <y>80</y>
      <width>88</width>
      <height>33</height>
     </rect>
    </property>
    <property name="text">
     <string>Test Trade</string>
    </property>
   </widget>
   <widget class="PlotWidget" name="widget" native="true">
    <property name="geometry">
     <rect>
      <x>140</x>
      <y>100</y>
      <width>120</width>
      <height>80</height>
     </rect>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>25</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <customwidgets>
  <customwidget>
   <class>PlotWidget</class>
   <extends>QWidget</extends>
   <header>qtgraph</header>
   <container>1</container>
  </customwidget>
 </customwidgets>
 <resources/>
 <connections/>
</ui>

I just want to add it to main1.ui, for which I have added the code — ooo, Jan 13 '20 at 18:10

score 7 · Accepted Answer · answered Jan 13 '20 at 18:12

It is not necessary to promote a class, although it is a valid option, so that it can be displayed in a window generated based on a .ui since you can use empty QWidget (without promoting it) as a container, then place a layout, and within the layout the QChartView.

The image shows an empty QWidget whose name is "chart_container" where the QChartView will be placed:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QPushButton" name="pushButton">
    <property name="geometry">
     <rect>
      <x>210</x>
      <y>280</y>
      <width>88</width>
      <height>33</height>
     </rect>
    </property>
    <property name="text">
     <string>PushButton</string>
    </property>
   </widget>
   <widget class="QPushButton" name="pushButton_2">
    <property name="geometry">
     <rect>
      <x>340</x>
      <y>80</y>
      <width>88</width>
      <height>33</height>
     </rect>
    </property>
    <property name="text">
     <string>Test Trade</string>
    </property>
   </widget>
   <widget class="QWidget" name="chart_container" native="true">
    <property name="geometry">
     <rect>
      <x>29</x>
      <y>29</y>
      <width>291</width>
      <height>231</height>
     </rect>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>24</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

The code is then implemented by adding the QChartView to the container through a layout:

import sys

from PyQt5 import QtCore, QtWidgets, uic, QtChart

# load both ui file
uifile_1 = "UI/main.ui"
form_1, base_1 = uic.loadUiType(uifile_1)


class Example(base_1, form_1):
    def __init__(self):
        super(base_1, self).__init__()
        self.setupUi(self)

        data = (
            (1, 7380, 7520, 7380, 7510, 7324),
            (2, 7520, 7580, 7410, 7440, 7372),
            (3, 7440, 7650, 7310, 7520, 7434),
            (4, 7450, 7640, 7450, 7550, 7480),
            (5, 7510, 7590, 7460, 7490, 7502),
            (6, 7500, 7590, 7480, 7560, 7512),
            (7, 7560, 7830, 7540, 7800, 7584),
        )

        series = QtChart.QCandlestickSeries()
        series.setDecreasingColor(QtCore.Qt.red)
        series.setIncreasingColor(QtCore.Qt.green)

        ma5 = QtChart.QLineSeries()  # 5-days average data line
        tm = []  # stores str type data

        # in a loop,  series and ma5 append corresponding data
        for num, o, h, l, c, m in data:
            series.append(QtChart.QCandlestickSet(o, h, l, c))
            ma5.append(QtCore.QPointF(num, m))
            tm.append(str(num))

        chart = QtChart.QChart()
        chart.addSeries(series)  # candle
        chart.addSeries(ma5)  # ma5 line

        chart.setAnimationOptions(QtChart.QChart.SeriesAnimations)
        chart.createDefaultAxes()
        chart.legend().hide()

        chart.axisX(series).setCategories(tm)
        chart.axisX(ma5).setVisible(False)

        chartview = QtChart.QChartView(chart)

        self.chart_container.setContentsMargins(0, 0, 0, 0)
        lay = QtWidgets.QHBoxLayout(self.chart_container)
        lay.setContentsMargins(0, 0, 0, 0)
        lay.addWidget(chartview)


if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    ex = Example()
    ex.show()
    sys.exit(app.exec_())

You are awesome, can you recommend some resource for learning pyqt5 I am trying to build a financial data analysis dashboard kind of system. — ooo, Jan 13 '20 at 18:15

Insert QChartView to ui

1 Answers1

Linked