Why is the Matplotlib graph not showing up in my Django webpage?

Question

I've been working on a project in Python using Matplotlib in tandem with Django. Right now I just want to display the graph in the webpage. Before, I saved the figure as a PNG, and the graph showed up. Unfortunately, this disables some interactive features that I had planned on including. In order to work around this, I used MPLD3's function, fig_to_html, which I saw worked in other examples. However, when I used the line in my own code, nothing appeared on the screen.

Here is my code:

def index(request):
    # template = loader.get_template('')

    noaaNmbr='11809'
    #for right now, this is the only active region that I'm pulling data for. When I get the graph up and running, I will make it more interactive for the user so that he can 

    urlData = "http://www.lmsal.com/hek/hcr?cmd=search-events3&outputformat=json&instrument=IRIS&noaanum="+ noaaNmbr +"&hasData=true"

    webUrl = urlopen(urlData)
    counter = 0
    data = webUrl.read().decode('utf-8')
    hekJSON = json.loads(data)
    getInfo(counter, hekJSON)

    sort()
    # Sorts the data from earliest to most recent
    chart = plt.figure()
    fig, ax = plt.subplots(figsize=(30, 30))
    circle = Circle((0, 0), 980, facecolor='none', edgecolor=(0, 0.8, 0.8), linewidth=3, alpha=0.5)
    ax.add_patch(circle)
# Creates circular representation of the sun on the graph because that's all I really need for now

    plt.plot(xcen, ycen, color="red")
    plt.plot(xcen, ycen, 'ro', color = 'blue')
    #first plots the points in red, then draws lines between the points in blue


    plt.xlim([setXMin(hekJSON), setXMax(hekJSON)])
    plt.ylim([setYMin(hekJSON), setYMax(hekJSON)])

#sets the boundaries of the graph

    ax.set_xticks(np.arange(round_multiple(setXMin(hekJSON),50), round_multiple(setXMax(hekJSON), 50), 50))
    ax.set_yticks(np.arange(round_multiple(setYMin(hekJSON),50), round_multiple(setYMax(hekJSON), 50), 50))
#sets the ticks

    for i in range(getNumberOfEntries(hekJSON)):
        if xfov[i] != 0:
            xStart = xcen[i] - xfov[i]/14
            yStart = ycen[i] - yfov[i]/14
            ax.add_patch(Rectangle((xStart, yStart), xfov[i]/7, yfov[i]/7, facecolor='none'))

    plt.grid()

    g = mpld3.fig_to_html(chart)

    return HttpResponse(g)

My current theory is that by setting chart = plt.figure() but also using "subplots" is causing plt.figure to include nothing. However, if I remove the line and instead put

g = mpld3.fig_to_html(fig)

I receive the error

TypeError at /charts/
350 is not JSON serializable

Could somebody help me understand what is going wrong?

Picture of graph included: