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.


First, we need to install and setup Django.

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

<script src=""></script>

Integrating Highcharts.js with Django

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

In 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) :-

from django.db import models

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

        (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 we have to migrate it. To migrate write this code on command prompt or ternimal :-

python 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

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 You can write like this “AppName_ClassName”.

After importing CSV file we will edit

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

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))) \
    return render(request, 'index.html', {'dataset': dataset})

After setting up we have to create in apps folder and edit inside project directory. in project directory :-

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

urlpatterns = [
    path('charts/', include('charts.urls'))
] 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=''></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'

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

Write this URL for Output

Output :-


For whole Project you can go through this GitHub Repository.