Matplotlib into a Django Template Matplotlib into a Django Template django django

Matplotlib into a Django Template


    from io import BytesIO    import base64    import matplotlib.pyplot as plt    import numpy as np    def graphic(request):        pos = np.arange(10)+ 2         fig = plt.figure(figsize=(8, 3))        ax = fig.add_subplot(111)        ax.barh(pos, np.arange(1, 11), align='center')        ax.set_yticks(pos)        ax.set_yticklabels(('#hcsm',            '#ukmedlibs',            '#ImmunoChat',            '#HCLDR',            '#ICTD2015',            '#hpmglobal',            '#BRCA',            '#BCSM',            '#BTSM',            '#OTalk',),             fontsize=15)        ax.set_xticks([])        ax.invert_yaxis()        ax.set_xlabel('Popularity')        ax.set_ylabel('Hashtags')        ax.set_title('Hashtags')        plt.tight_layout()        buffer = BytesIO()        plt.savefig(buffer, format='png')        buffer.seek(0)        image_png = buffer.getvalue()        buffer.close()        graphic = base64.b64encode(image_png)        graphic = graphic.decode('utf-8')        return render(request, 'graphic.html',{'graphic':graphic})

and in the template:

<img src="data:image/png;base64,{{ graphic|safe }}">

I have:

matplotlib==3.0.2 and Django==2.1.4


Edit:

try with

graphic = cStringIO.StringIO()canvas.print_png(graphic)return render(request, 'graphic.html',{'graphic':graphic})

You have to specify that your image is a binary string:

<img src="data:image/png;base64,{{graphic|safe}}">

Or actually save it to the filesystem and provide the path.

Alternatively you could use Bokeh which can give you the html + javascript to embed the plot directly in the template, then it is dynamically generated and brings nice features.


The final solution was to create a special view that returns the matplotlib plot in an empty template, like this:

def grafico (rquest):    pos = arange(10)+ 2     barh(pos,(1,2,3,4,5,6,7,8,9,10),align = 'center')    yticks(pos,('#hcsm','#ukmedlibs','#ImmunoChat','#HCLDR','#ICTD2015','#hpmglobal','#BRCA','#BCSM','#BTSM','#OTalk'))    xlabel('Popularidad')    ylabel('Hashtags')    title('Gráfico de Hashtags')    subplots_adjust(left=0.21)    buffer = io.BytesIO()    canvas = pylab.get_current_fig_manager().canvas    canvas.draw()    graphIMG = PIL.Image.fromstring('RGB', canvas.get_width_height(), canvas.tostring_rgb())    graphIMG.save(buffer, "PNG")    pylab.close()    return HttpResponse (buffer.getvalue(), content_type="Image/png")

The next step is to put in your template this:

<img src="url_of_the_graphic_view">

And thats all!