Posted onFeb 17, 2023 • Edited onMar 20

Data Visualization using CanvasJS in Django Apps

#django #python #canvasjs #datavisualization

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 integrateCanvasJS Python chart into Django applications to create interactive and visually appealing data visualizations.

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 renderdef 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></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 pathfrom . import viewsurlpatterns = [    path('', views.index, name='index'),]

Run the Django serverpython 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