Python Chart with Date-Time Data from Database

Download Python Django Chart Samples

Example shows Python Chart rendered with date-time values fetched from database. Library supports numeric, date-time & category axis. Demo also includes Django source-code that you can run locally.

  1. <!-- index.html -->
  2. {% load static %}
  3. <html>
  4. <head>
  5. <title>CanvasJS Python Charts</title>
  6. <script>
  7.     window.onload = function () { 
  8.       var data = {{ datapoints|safe }};
  9.       var dataPoints = []
  10.  
  11.       for(var i=0; i<data.length; i++) {
  12.         dataPoints.push({x: data[i].fields.x, y: data[i].fields.y})
  13.       }
  14.       
  15.       var chart = new CanvasJS.Chart("chartContainer", {
  16.         theme: "light2",
  17.         exportEnabled: true,
  18.         animationEnabled: true,
  19.         title: {
  20.           text: "Site Traffic"
  21.         },
  22.         subtitles: [{
  23.           text: "Chart with DateTime Data from Database"
  24.         }],
  25.         axisY: {
  26.           title: "No. of Visits"
  27.         },
  28.         data: [{
  29.           type: "line",
  30.           xValueType: "dateTime",
  31.           xValueFormatString: "MMM YYYY",
  32.           dataPoints: dataPoints
  33.         }]
  34.       });
  35.       chart.render();
  36.     }
  37. </script>
  38. </head>
  39. <body>
  40.     <div id="chartContainer" style="height: 360px; width: 100%;"></div>
  41.     <script src="{% static 'canvasjs.min.js' %}"></script>
  42. </body>
  43. </html>                              
  1. from django.shortcuts import render
  2. from datetime import datetime
  3. from django.core import serializers
  4.  
  5. from .models import DataPoint
  6.  
  7.  
  8. def index(request):
  9.     datapoint_query_set = DataPoint.objects.all().order_by('x')
  10.     
  11.     for data in datapoint_query_set:
  12.         data.x = int(datetime.timestamp(data.x)) * 1000
  13.  
  14.     datapoints = serializers.serialize('json', datapoint_query_set)
  15.     return render(request, "index.html", { "datapoints": datapoints})                        
  1. from django.db import models
  2. from datetime import datetime
  3.  
  4. class DataPoint(models.Model):
  5.     x = models.DateTimeField(default=datetime.now)
  6.     y = models.IntegerField()

Chart Customizations

In the above example, xValueType property is used to define the type of the x-values. xValueFormatString, yValueFormatString & zValueFormatString properties can be used to define the format of x, y & z-values respectively.