I want to show image created by matplotlib
dynamically in a panel. The server side code is this:
...
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
...
def lineCurve2D(request):
x = np.linspace(-10, 10, 50)
y = np.linspace(-10, 10, 50)
x,y = np.meshgrid(x, y)
z = x**2 + 3*y**2 + x*y - 5*x + 3*y
fig = Figure()
plt.contour(x, y, z)
canvas = FigureCanvas(fig)
response = HttpResponse(content_type='image/png')
canvas.print_png(response)
return response
I should say, that if I do it in python shell and instead use plt.show()
then I see a nice image.
Next, on the client side my code looks like this:
function lineCurve2D(me){
Ext.Ajax.request({
url:'/myapp/lineCurve2D',
method:'GET',
success:function(res,req){
var plot=me.down('#LineCurve2D'); // it is a fieldset inside my panel
plot.items.each(function(el){
el.destroy(); // I destroy what was previously added
});
plot.add({xtype:'panel',layout:'fit',html:'<img src="data:image/png;base64,'+res.responseText+'"/>'}) // main problem
}
});
}
This is the function that triggers django to return an image. On return it creates image inside my panel. However, what I see now is an "empty" image, as if its source is incorrect.