DEV Community

Cover image for Data Visualization using CanvasJS in Django Apps
Vishwas R
Vishwas R

Posted on

Data Visualization using CanvasJS in Django Apps

Data visualization is the process of representing data in a graphical or pictorial format to understand and interpret data better. In today's digital age, web applications are the primary medium for information exchange. Therefore, it's essential to integrate data visualization into web applications to make them more effective.

In this article, we'll explore how to integrate CanvasJS Python chart into Django applications to create interactive and visually appealing data visualizations.

CanvasJS Python Line Chart

Prerequisites

We assume that you have a basic understanding of Django and have already set up a Django project. We will also assume that you have installed the latest version of CanvasJS by downloading the library from the official website.

Create a Django App

First, create a new Django app within your project by running the following command:



python manage.py startapp charts


Enter fullscreen mode Exit fullscreen mode

This will create a new directory called "charts" in your project.

Create a View

Next, create a view in the "charts/views.py" file to render the chart on a web page. Here is a sample view that creates a line chart using the CanvasJS library:



from django.shortcuts import render

def chart(request):
    dataPoints = [
        {"x": 10, "y": 21},
        {"x": 20, "y": 25},
        {"x": 30, "y": 20},
        {"x": 40, "y": 35},
        {"x": 50, "y": 38},
        {"x": 60, "y": 45},
        {"x": 70, "y": 50},
        {"x": 80, "y": 55},
        {"x": 90, "y": 60},
        {"x": 100, "y": 58}
    ]
    return render(request, 'index.html', {'dataPoints': dataPoints})


Enter fullscreen mode Exit fullscreen mode

This view creates a list of datapoints and passes it to the chart template using the render() function. Note that we are using the "index.html" template where chart is rendered.

Create a template

Now create the "index.html" template in the "charts/templates/charts" directory. This template will contain the HTML and JavaScript code to render the chart using the CanvasJS library. Here is a sample template that creates a line chart:



{% load static %}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        theme: "light1", // "light2", "dark1", "dark2"
        animationEnabled: false, // change to true                
        title:{
            text: "Python Line Chart"
        },
        data: [{
            // Change type to "bar", "area", "spline", "pie",etc.
            type: "line",
            dataPoints: {{ data_points | safe }}
        }]
    });
    chart.render();
}
</script>    
</head>
<body>
    <div id="chartContainer" style="width: 100%; height: 360px;"></div>
</body>
</html>


Enter fullscreen mode Exit fullscreen mode

Configure URLs & Run the Application

Finally, add a URL to the "charts/urls.py" file to map the "chart" view to a URL. Here is a sample URL configuration:



from django.urls import path
from . import views

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


Enter fullscreen mode Exit fullscreen mode

Run the Django server python manage.py runserver. Navigate to "http://localhost:8000/charts/" in your web browser, and you should see a line chart generated by the CanvasJS library.

Github: https://github.com/vishwas-r/CanvasJS-Samples/tree/main/canvasjs-django-sample

Top comments (0)