matplotlib+wxpython does not show x-axe time string data

Question

I'm a newer of matplotlib, I used it to show data of a .csv file , the code is below, and when my mouse motion triggered, the xdata shows on status bar (the linked code func is as below: "onMotion") is not what I want(show a right time string as HH:MM:SS from original .csv file), I guess it's a float number but when I transform it to time, it's still NOT what I expected. What I should do to make it right? Any suggestion is much appreciated in advance.

CSV file data is below:
Time    CPU MEMEMORY    FLOW
21:41:45    7   2.065984885 0
21:41:49    24  2.143804486 207.1622516
21:41:53    18  2.099176758 254.0634666
21:41:57    16  2.148127797 546.959479
21:42:01    25  2.120096005 837.3973892
21:42:05    14  2.123164162 865.6367548
21:42:09    19  2.126511241 894.4122738
21:42:13    16  2.090111751 924.6048394
21:42:17    16  2.088717134 953.8266646
21:42:21    18  2.090948521 985.3669382

As u can see, the time format in this file is HH:MM:SS, but the matplotlib show it as in the following image.

import matplotlib.pyplot as plt
import pandas as pd
import wx
class CanvasFrame(wx.Frame): 
    orgData= None
    def __init__(self):

        self.pro = None
        wx.Frame.__init__(self,None,-1, 'App Detection',size=(800,350))  
        self.orgData =pd.read_csv('data.csv')
        self.orgData["Time"] = pd.to_datetime(self.orgData["Time"])
        self.SetBackgroundColour("WHITE")  

        self.figure = plt.figure() 
        self.axes = self.figure.add_subplot(111)  

        self.CPU, = self.axes.plot(self.orgData["Time"], self.orgData["CPU"])
        self.MEMEMORY, = self.axes.plot(self.orgData["Time"], self.orgData["MEMEMORY"], "m")

        plt.xlabel("Time")
        plt.ylabel("Usage(%)")
        plt.title("Usage of App")

        self.axes2 = self.axes.twinx()
        self.FLOW, = self.axes2.plot(self.orgData["Time"], self.orgData["FLOW"], "r")
        self.axes2.set_ylabel("FLOW(kb)")

        self.ins = (self.CPU,)+(self.MEMEMORY,)+(self.FLOW,)
        self.labs = [l.get_label() for l in self.ins]
        self.axes.legend(self.ins, self.labs, loc=2)

        self.canvas = FigureCanvas(self, -1, self.figure)

        self.statusbar = self.CreateStatusBar()  
        self.mouseMoveID = self.canvas.mpl_connect('motion_notify_event',self.onMotion)

        self.sizer = wx.BoxSizer(wx.VERTICAL)
        self.btnStart = wx.Button(self, -1, "Start")
        self.Bind(wx.EVT_BUTTON, self.getData, self.btnStart)

        self.btnGen = wx.Button(self, -1, "Gen Chart")
        self.Bind(wx.EVT_BUTTON, self.genFigure, self.btnGen)

        self.btnSave = wx.Button(self, -1, "Save")
        self.Bind(wx.EVT_BUTTON, self.savePic, self.btnSave)

        self.tip = wx.StaticText(self, -1, u"Tip: Tip string!")
        self.tip.SetForegroundColour("red")
        self.sizerH = wx.GridSizer(1,0)
        self.sizerH.Add(self.btnStart,10, wx.ALL, 10)
        self.sizerH.Add(self.btnGen,10, wx.ALL, 10)
        self.sizerH.Add(self.btnSave,10, wx.ALL, 10)   
        self.sizer.Add(self.sizerH)
        self.sizer.Add(self.tip)
        self.sizer.Add(self.canvas, 1, wx.LEFT | wx.TOP | wx.GROW)  
        self.SetSizer(self.sizer)  
        self.Fit()

    def onMotion(self, evt):
        x = evt.x
        y = evt.y
        inaxes = evt.inaxes
        xdata = evt.xdata
        ydata = evt.ydata
        self.statusbar.SetStatusText("%s, %s, %s, %s, %s" % (
        x, y, inaxes, xdata, ydata))

Answer 1

To format a date or time, you may use a matplotlib.dates.DateFormatter as shown e.g. in this example. Calling this dateformatter with the respective time would produce the desired formatted string.

dateformatter = mdates.DateFormatter('%H:%M:%S')
dateformatter(xdata)

The problem of showing the formatted time is actually independend on the GUI implementation. So I leave this out and just provide a solution that shows the formatted time within the axes. From the question it is clear how to provide the formatted string to the GUI's statusbar.

u = u"""Time    CPU MEMEMORY    FLOW
21:41:45    7   2.065984885 0
21:41:49    24  2.143804486 207.1622516
21:41:53    18  2.099176758 254.0634666
21:41:57    16  2.148127797 546.959479
21:42:01    25  2.120096005 837.3973892
21:42:05    14  2.123164162 865.6367548
21:42:09    19  2.126511241 894.4122738
21:42:13    16  2.090111751 924.6048394
21:42:17    16  2.088717134 953.8266646
21:42:21    18  2.090948521 985.3669382"""

import pandas as pd
import matplotlib.pyplot as plt
import matplotlib.dates as mdates
import io

df = pd.read_csv(io.StringIO(u), delim_whitespace=True)

df["Time"] = pd.to_datetime(df["Time"])

fig, ax = plt.subplots()

ax.plot(df["Time"], df["CPU"])
ax.plot(df["Time"], df["MEMEMORY"])

text = ax.text(0.02,0.98, "", transform=ax.transAxes, va="top")
dateformatter = mdates.DateFormatter('%H:%M:%S')

def onmousemove(evt):
    if evt.inaxes:
        xdata = evt.xdata
        xtime =  dateformatter(xdata)
        string = "%s" % (xtime)
        text.set_text(string)
        fig.canvas.draw_idle()

cid = fig.canvas.mpl_connect("motion_notify_event",onmousemove)

plt.show()