Data Visualization using CanvasJS in Django Apps
Tags: django, python, canvasjs, datavisualization
Published: 2023-02-17 07:04:26


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](https://canvasjs.com/python-charts/) into Django applications to create interactive and visually appealing data visualizations.


![CanvasJS Python Line Chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21tmqshq05aozpol7agv.jpeg)

### 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
```
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})
```
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>
```
### 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'),
]
```
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](https://github.com/vishwas-r/CanvasJS-Samples/tree/main/canvasjs-django-sample)