向 MPLFinance 图表添加第三个子图会导致重叠吗？

Question

I'm trying to create a candlestick chart that shows the candles in the top plot, the volume in the middle plot, and a technical indicator on the bottom plot (all 100% width, 3 rows of plots). I will be adding more than 3 plots, but I figured adding more would follow the same logic as adding the third.

I've created an MPLFinance candlestick chart with animation and an onClick play/pause functionality. The code below runs perfectly, however the plots seem to be overlapping with one another. It might be because of how I'm defining their shapes, but I'm not 100% sure and haven't found my answer yet.

Just change the line df = pd.read_csv("./data/SPY5m.csv") near the bottom to point to your own OHLCV file with Date, Open, High, Low, Close, Volume columns in it.

import mplfinance as mpf
import matplotlib.animation as animation
import pandas as pd

class ChartClass():

    def __init__(self, DF):

        self.DF = DF
        
        # Rename some columns for MPLFinance, and set the Datetime index
        new_names = {
            'Open': 'open',
            'High': 'high',
            'Low': 'low',
            'Close': 'close',
            'Volume': 'volume',
        }
        self.DF.rename(columns=new_names, inplace=True)
        self.DF['Date'] = pd.to_datetime(self.DF['Date'])
        self.DF.set_index('Date', inplace=True)

        # Create the fig and subplots
        fig = mpf.figure(style='charles', figsize=(9,8))
        self.ax1 = fig.add_subplot(2,1,1) # Candlesticks
        self.ax2 = fig.add_subplot(3,1,2) # Volume
        self.ax3 = fig.add_subplot(4,1,3) # For third indicator's subplot? These numbers are wrong I'm sure
        
        # Define an animation function for replaying the candlesticks
        # with pause onClick capabilities
        self.animation = animation.FuncAnimation(fig, self.update, interval=100) # frames=200, blit=True
        self.paused = False
        fig.canvas.mpl_connect('button_press_event', self.toggle_pause)
        mpf.show()
        
    # Function to toggle the pause/resume of the animation
    def toggle_pause(self, *args, **kwargs):
        if self.paused:
            self.animation.resume()
        else:
            self.animation.pause()
        self.paused = not self.paused

    # Function to update the plots each interval
    def update(self, ival):
        if (20+ival) > len(self.DF):
            print('no more data to plot')
            self.animation.event_source.interval *= 3
            if self.animation.event_source.interval > 12000:
                exit()
            return
        
        # Display the latest section of OHLCV data (and the indicator for the third subplot)
        data = self.DF.iloc[0:(20+ival)]
        self.ax1.clear()
        self.ax2.clear()
        self.ax3.clear()
        indicator_for_third_subplot = mpf.make_addplot(data["MA9"], ax=self.ax3)
        
        mpf.plot(data,
                 ax=self.ax1,
                 volume=self.ax2,
                 type='candle',
                 show_nontrading=False,
                 addplot=indicator_for_third_subplot,
                 )

# Import the dataframe
df = pd.read_csv("./data/SPY5m.csv")

# Create an indicator column. Yes, I'm aware MPLFinance has an
# moving average parameter builtin, however I will be using other
# indicators from TALIB that I'd like to subplot instead, so pretend
# that `mva`(?) parameter doesn't exist
df['MA9'] = df['Close'].rolling(9).mean()

# Start the animation
ChartClass(DF=df)

Notice the volume appears to be cut off at the bottom and doesn't show all the way to 0?

(Should mention, this is running on Windows 10 , Python 3.10.8 , mplfinance==0.12.9b1 , pandas==1.4.3 , and matplotlib==3.5.1 )

UPDATE

Here is the latest sort of working update, other than the chart doesn't expand with the replay like before. Could be because I'm re-using the self.axes defined in the __init__ down in the update function?

class ChartClass():

    def __init__(self, DF):

        self.DF = DF
        
        # Rename some columns for MPLFinance, and set the datetime index
        new_names = {
            'Open': 'open',
            'High': 'high',
            'Low': 'low',
            'Close': 'close',
            'Volume': 'volume',
        }
        self.DF.rename(columns=new_names, inplace=True)
        self.DF['Date'] = pd.to_datetime(self.DF['Date'])
        self.DF.set_index('Date', inplace=True)
        
        # Create an indicator subplot on its own new panel
        subplot = [
            mpf.make_addplot(self.DF['MA9'], 
                             type='line', 
                             panel=2, 
                             color='lime', 
                             alpha=1, 
                             secondary_y=False,
                             ),
        ]
        
        s = mpf.make_mpf_style(base_mpf_style='charles',
                               rc={'figure.facecolor':'lightgray'})

        self.fig, self.axes = mpf.plot(self.DF,
                                       type='candle',
                                       addplot=subplot,
                                       figscale=1.5,
                                       figratio=(7,5),
                                       title='\n\nTITLE',
                                       style=s,
                                       volume=True,
                                       volume_panel=1,
                                       panel_ratios=(3,1,1),
                                       returnfig=True)

        # Deref the axes
        self.ax_main = self.axes[0]
        self.ax_volu = self.axes[1]
        self.ax_ma = self.axes[2]

        # Define an animation function for replaying the candlesticks
        # with pause onClick capabilities
        self.animation = animation.FuncAnimation(self.fig, self.update, interval=100) # frames=200, blit=True
        self.paused = False
        self.fig.canvas.mpl_connect('button_press_event', self.toggle_pause)
        mpf.show()
        
    # Function to toggle the pause/resume of the animation
    def toggle_pause(self, *args, **kwargs):
        if self.paused:
            self.animation.resume()
        else:
            self.animation.pause()
        self.paused = not self.paused

    # Function to update the plots each interval
    def update(self, ival):
        if (20+ival) > len(self.DF):
            print('no more data to plot')
            self.animation.event_source.interval *= 3
            if self.animation.event_source.interval > 12000:
                exit()
            return
        
        # .iloc the latest data
        data = self.DF.iloc[0:(20+ival)]

        # Subplot using the newly iloc'd data
        subplot = [
            mpf.make_addplot(data['MA9'], 
                             type='line', 
                             panel=2, 
                             color='lime', 
                             alpha=1, 
                             secondary_y=False,
                             ax=self.ax_ma,
                             ),
        ]

        # Clear the axes
        for ax in self.axes:
            ax.clear()

        mpf.plot(data.iloc[0:(20+ival)],
                 type='candle',
                 addplot=subplot,
                 ax=self.ax_main,
                 volume=self.ax_volu)

# Import the dataframe
df = pd.read_csv("./data/SPY5m.csv")

# Create an indicator column
df['MA9'] = df['Close'].rolling(9).mean()

# Start the animation
ChartClass(DF=df)

Answer 1

The simplest way to do this is to allow mplfinance to line up the subplots for you (although you can do it yourself, it is easier to let mplfinance do it for you). Read through the mplfinance tutorial on "panels" to see details on how to create three (or more) subplots.

After carefully reading the above mentioned tutorial, see also, this example of an animated MACD technical indicator similar to what you are trying to accomplish.

Answer 2

wildcat89 , wanted to say thanks for the elegant class structure example. I'll be strongly considering adopting this approach in some of my own work.

And Daniel, there's a big jump from doing simple matplotlib animations to using the dataframe approaches of mplfinance , so your examples gave me a HUGE "steam catapult" jump-start.

I have one follow-up question for both of you. I've noticed in both of your examples a section (in your update(...) method and Daniel's animate(...) method) that looks like this:

if (20+ival) > len(self.DF): 
    print('no more data to plot') 
    self.animation.event_source.interval *= 3 
    if self.animation.event_source.interval > 12000: 
        exit() 
    return

...and I've NOT seen that functionality in the non- mplfinance (ie straight-up matplotlib -based) animation examples I've looked into.

Trying to figure out that little section of these examples has led me down a rabbit hole of arcane, uhhh... how do I say it?.. zero good explanations.

It looks to me like it's intended to accelerate any loop processing and get a quicker exit when the dataframe runs out, but as I've looked into the animation... "stuffs", it seems like an increased interval would actually... slow the loop down?

So... uhhh.... I iz confuzed.

Is there a decent explanation anywhere as to what that little section of code is intended to do?

All the best!

Answer 3

@tanks_foda_helpz

That's a very good question, and I probably should add a comment to explain this part of the example code in the mplfinance repository .

Understand that the examples are simulations . The simulation aspect is perhaps somewhat more obvious in this particular example .

In a real-world (non-simulation) scenario one would continue getting real-time data from some API, and would not run out of data . Although , possibly one might encounter a situation where the market is closed or suspended, and therefore may want to write a block of code similar to the code you are questioning.

if nxt is None:
    print('no more data to plot')
    ani.event_source.interval *= 3
    if ani.event_source.interval > 12000:
        exit()

The purpose of this block of code is to indicate to the user running the simulation that the simulation is over. There is no more data to simulate, thus the user should not expect the plot to continue updating/growing.

I didn't want to exit immediately, lest users (as I myself did) want to continue looking over the plot to ensure that it was correct. At the same time, I also did not want to spew 'no more data to plot' four times a second to the console, so I gradually increased the time interval so that the no-more-data message would come out less and less frequently. Eventually we do exit the simulation (just in case the user has not yet aborted with <Ctrl>-C or some other mechanism).

That's it. Nothing particularly related to the idea of real-time updating of market data, except as mentioned: possibly, if you are able to determine when the market is closed, or that trading has been suspended, then you may want to write a message to the user indicating that the market is closed or suspended (and so don't expect any more updates to the plot).

Sorry for the confusion. Next time I am updating the library I will add a comment to the code there.