title: How to plot a graph with time on axis
body: <p>I am trying to write some code to plot some values in real time, I found below example and it works, but I want to show times on axis 12:30:20, 12:30:21..... instead of showing 10, 20, 30.</p>
  <p>Is there any solution or where can I read about it?</p>
  <pre><code>import sys
  import random
  import matplotlib
  matplotlib.use('Qt5Agg')
  
  from PyQt5 import QtCore, QtWidgets
  
  from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
  from matplotlib.figure import Figure
  
  
  class MplCanvas(FigureCanvas):
  
      def __init__(self, parent=None, width=5, height=4, dpi=100):
          fig = Figure(figsize=(width, height), dpi=dpi)
          self.axes = fig.add_subplot(111)
          super(MplCanvas, self).__init__(fig)
  
  
  class MainWindow(QtWidgets.QMainWindow):
  
      def __init__(self, *args, **kwargs):
          super(MainWindow, self).__init__(*args, **kwargs)
  
          self.canvas = MplCanvas(self, width=5, height=4, dpi=100)
          self.setCentralWidget(self.canvas)
  
          n_data = 50
          self.xdata = list(range(n_data))
          self.ydata = [random.randint(0, 10) for i in range(n_data)]
          self.update_plot()
  
          self.show()
  
          # Setup a timer to trigger the redraw by calling update_plot.
          self.timer = QtCore.QTimer()
          self.timer.setInterval(100)
          self.timer.timeout.connect(self.update_plot)
          self.timer.start()
  
      def update_plot(self):
          # Drop off the first y element, append a new one.
          self.ydata = self.ydata[1:] + [random.randint(0, 10)]
          self.canvas.axes.cla()  # Clear the canvas.
          self.canvas.axes.plot(self.xdata, self.ydata, 'r')
          # Trigger the canvas to update and redraw.
          self.canvas.draw()
  
  
  app = QtWidgets.QApplication(sys.argv)
  w = MainWindow()
  app.exec_()
  </code></pre>