Integrating the image into a Django template

To display the chart in our home page, we can modify the home page template at {Project_folder}/crypto_stats/src/templates/home.html.

We would need to modify the lines after the comment sentence <!-- Benefits of the Django application --> to the following:

{% block container %}
<!-- Benefits of the Django application -->
<a name="about"></a>

<div class="container">
<div class="row">
<div class="col-lg-8">
<h2>Bitcoin pricing trend</h2>
<img src="/bitcoin/30/" alt="Bitcoin prices" style="width:100%">
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
</div>

{% endblock container %}

Basically, our bitcoin_chart view is loaded as an image through the line <img src="/bitcoin/30/" alt="Bitcoin prices" style="width:100%">. I have also reduced the number of columns in the container section from 3 to 2, and adjusted the size of the first column by setting the class to  col-lg-8 instead.

If you go to the home page (that is, http://localhost:8000), you will see the following screen when you scroll to the bottom:

There are a few caveats of this implementation. First, each page visit would incur an API call to Quandl, so your free API quota will be consumed quickly. A better way would be to fetch the prices daily and record the data in a proper database model. 

Second, the image output in its current form is not integrated into the app-specific template. This is out of the scope of this Matplotlib-focused book. However, interested readers can refer to the instructions in the online documentation (https://docs.djangoproject.com/en/2.0/topics/templates/).

Lastly, the images are static. There are third-party packages such as mpld3 and Plotly that can turn a Matplotlib chart into an interactive Javascript-based chart. The use of these packages may further enhance the user experience.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.160.42