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 chartspython manage.py startapp chartspython 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 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})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})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 truetitle:{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>{% 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>{% 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 pathfrom . import viewsurlpatterns = [path('', views.index, name='index'),]from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), ]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
暂无评论内容