Monday, May 15, 2017

[Mpld3] Render Matplotlib chart to web using Mpld3

The following example is about rendering a matplotlib chart on web, which is based on Django framework to build up. I encountered some problems before, such as, not able to see chart on the web page or having a run-time error after reloading the page. But, all the problems are solved.

<< demo/views.py>>

import matplotlib.pyplot as plt
import numpy as np
import mpld3

def plot_test1(request):
context = {}
fig, ax = plt.subplots(subplot_kw=dict(axisbg='#EEEEEE'))
N = 100

"""
Demo about using matplotlib and mpld3 to rendor charts
"""
scatter = ax.scatter(np.random.normal(size=N),
np.random.normal(size=N),
c=np.random.random(size=N),
s=1000 * np.random.random(size=N),
alpha=0.3,
cmap=plt.cm.jet)
ax.grid(color='white', linestyle='solid')

ax.set_title("Scatter Plot (with tooltips!)", size=20)

labels = ['point {0}'.format(i + 1) for i in range(N)]
tooltip = mpld3.plugins.PointLabelTooltip(scatter, labels=labels)
mpld3.plugins.connect(fig, tooltip)
#figure = mpld3.fig_to_html(fig)
figure = json.dumps(mpld3.fig_to_dict(fig))
context.update({ 'figure' : figure })

"""
Demo about using tensorflow to predict the result
"""
num = np.random.randint(100)
prediction = predict_service.predict(num)
context.update({ 'num' : num })
context.update({ 'prediction' : prediction })

return render(request, 'demo/demo.html', context)


<<demo/demo.html>>

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.2.js"></script>
<style>
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<html>
<div id="fig01"></div>
<script type="text/javascript">

figure = {{ figure|safe }};
mpld3.draw_figure("fig01", figure);

</script>
</html>

So, we can see the result as follows:





3 comments:

Unknown said...
This comment has been removed by the author.
Unknown said...

hi , while rendering chart to template page in django , I encountered some problems such as, not able to see chart on the web page or having a run-time error after reloading the page , i searched quite a lot but unfortunately i couldn't find appropriate solution meanwhile fortunately i found your blog post , its helps me a lot but i couldn't understand some lines of code . here i mention those lines of code

"""
Demo about using tensorflow to predict the result
"""
num = np.random.randint(100)
prediction = predict_service.predict(num)
context.update({ 'num' : num })
context.update({ 'prediction' : prediction })

i thought predict_service.predict(num) predict is a method belongs to predict_service class . please provide me those codes as well for reference . it will help me to understand the concept . Thanks in advance !!!

TeYen (Danny) said...

Hi,
Sorry for replying late. You can check out my whole source code from this github repo:
https://github.com/teyenliu/r300/tree/master/demo