How to Integrate Highcharts into a Django Web Application

by Ather Rashid

A web application, no matter how useful it is, doesn’t attract people if it doesn’t have any graphical representation such as images or any other form of media. An image representation can make a website interactive thus giving a user a nice overview. A basic example of using multimedia in our application can be the use of highcharts.

Highcharts is a chart library that has been written in pure javascript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports many chart types, including line, spline, area, areaspline, column bar to name a few. For flexibility, highcharts even provides option to merge different types of charts in a single chart. The charts can be directly converted to any of the image formats or can be simply taken from the website.

Now to understand usage of highcharts we can consider the example of creating a high chart, let’s say of type – bar. We need two files,

  • highcharts.js
  • jquery depending on usage of developer.

These two files need to be included in html page where we want to display our charts and can be embedded in the script tag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

Alternatively we can use these from our local machine as static files:

<script src="{% static "/js/jquery.min.js" %}"></script> <script src="{% static "/js/highcharts.js" %}"></script>

Now lets create a webpage for our charts and name it as charts.html

<pre>/*charts.html*/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="chart_container" style="width:100%; height:400px;"></div>
</body>
<!--javascript for charts
-->
<script>
$(function () {
$('#chart_container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Monthly Sales'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar','Apr']
},
yAxis: {
title: {
text: 'numbers'
}
},
series: [{
name: 'John',
data: [1, 0, 4]
}, {
name: 'King',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>

Once we run this page in a web browser we can see the result as in the image below.

Screenshot from 2015-09-17 17:52:09

Similarly, we can try other charts also and give different shapes to our data in graphical forms depending on need. Highcharts provide a great way of providing data in an interactive way to users by using minimal amount of code. So in a simple way we can integrate any number of charts in our website depending upon the choice of data representation.

2 thoughts on “How to Integrate Highcharts into a Django Web Application”

Leave a Reply

Your email address will not be published. Required fields are marked *

Tools & Practices

Tools and Technologies we use at Applied

Contact us now

Popular Posts