How to Integrate Highcharts.js with Django?

Highcharts.js is a pure JavaScript charting Library. Highcharts.js provide variety of charts like line charts, spine charts, pie charts and many more.

And on the other hand, Django is high level web framework of python with clean and rapid development.

In this Tutorial we are going to learn how to Integrate Highcharts.js with Django.

For GitHub Repository Scroll Down.

Installation

First, we need to install and setup Django.

And for Highcharts.js you can either download or use there CDN :-

<script src="https://code.highcharts.com/highcharts.js"></script>

Integrating Highcharts.js with Django

After installing Django we have to edit models.py which is in the “app_name” folder. In this file we will create database with our requirements of data.

In models.py we have to import some models. We will create a class name Passenger and add some fields into class.(Note:- Classes are the name of your Tables)

models.py :-

from django.db import models

class Passenger(models.Model):
    MALE = 'M'
    FEMALE = 'F'
    SEX_CHOICES = (
        (MALE, 'male'),
        (FEMALE, 'female')
    )

    CHERBOURG = 'C'
    QUEENSTOWN = 'Q'
    SOUTHAMPTON = 'S'
    PORT_CHOICES = (
        (CHERBOURG, 'Cherbourg'),
        (QUEENSTOWN, 'Queenstown'),
        (SOUTHAMPTON, 'Southampton'),
    )

    name = models.CharField(max_length=100, blank=True)
    sex = models.CharField(max_length=1, choices=SEX_CHOICES)
    survived = models.BooleanField()
    age = models.FloatField(null=True)
    Pclass = models.PositiveSmallIntegerField()
    embarked = models.CharField(max_length=1, choices=PORT_CHOICES)

After setting up models.py we have to migrate it. To migrate models.py write this code on command prompt or ternimal :-

python manage.py migrate

And then we have to import a CSV(Comma Separated Value) file. It is a file which contains data for our table.

Importing CSV File

For importing CSV file first we need to download a CSV data File which contains any relevant data.

In this Tutorial we are using “titanic.csv“. Put “titanic.csv” in projects folder. We will Import this file in models.py.

We will use Sqlite3 for importing CSV file in db.sqlite3 file in Projects Folder.

Now we have to download sqlite3.

After downloading sqlite3 put “sqlite3.exe” in projects folder and run command prompt or terminal in project folder.

Then write these commands on command prompt or terminal :-

sqlite3.exe db.sqlite3
.mode csv
.import titanic.csv charts_passenger

Note:- charts_passenger is my table. In this table “charts” is apps name and “Passenger” is Class name in models.py. You can write like this “AppName_ClassName”.

After importing CSV file we will edit views.py.

We will specify Data fields in views.py. So we can make our Charts with respected Fields.

views.py :-

import json

from django.db.models import Count, Q
from django.shortcuts import render
from django.http import JsonResponse

from .models import Passenger

def ticket_class_view(request):
    dataset = Passenger.objects \
        .values('Pclass') \
        .annotate(survived_count=Count('Pclass', filter=Q(survived=True)),
                  not_survived_count=Count('Pclass', filter=Q(survived=False))) \
        .order_by('Pclass')
    return render(request, 'index.html', {'dataset': dataset})

After setting up views.py we have to create urls.py in apps folder and edit urls.py inside project directory.

urls.py in project directory :-

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('charts/', include('charts.urls'))
]

urls.py in apps folder :-

from django import views
from django.urls import path
from . import views

urlpatterns = [
    path('ticket_class_view', views.ticket_class_view, name='ticket_class_view')
]

And Lastly, we create our “index.html” file.

Create a templates folder in apps folder. We will create “index.html” in templates folder.

index.html :-

<div id='container'></div>
<script src='https://code.highcharts.com/highcharts.src.js'></script>
<script>
  Highcharts.chart('container', {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Titanic Survivors by Ticket Class'
      },
      xAxis: {
          categories: [
            {% for entry in dataset %}'{{ entry.Pclass }} Class'{% if not forloop.last %}, {% endif %}{% endfor %}
          ]
      },
      series: [{
          name: 'Survived',
          data: [
            {% for entry in dataset %}{{ entry.survived_count }}{% if not forloop.last %}, {% endif %}{% endfor %}
          ],
          color: 'blue'
      }, {
          name: 'Not survived',
          data: [
            {% for entry in dataset %}{{ entry.not_survived_count }}{% if not forloop.last %}, {% endif %}{% endfor %}
          ],
          color: 'orange'
      }]
  });
</script>

And then you can simply run this project by using “python manage.py runserver” in terminal or command prompt.

Write this URL for Output http://127.0.0.1:8000/ticket_class_view

Output :-

For whole Project you can go through this GitHub Repository.