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.
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
Top comments (0)