Python Chart with Data from Database

Download Python Django Chart Samples

Example shows Python Chart plotted using data that's fetched from database. It also includes Django MVT source-code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
    window.onload = function () { 
      var data = {{ datapoints|safe }};
      var dataPoints = []

      for(var i=0; i<data.length; i++) {
        dataPoints.push({x: data[i].fields.x, y: data[i].fields.y})
      }
      
      var chart = new CanvasJS.Chart("chartContainer", {
        title: {
          text: "Python Chart from Database",
          fontFamily: "Trebuchet MS, Helvetica, sans-serif"
        },
        data: [{
          type: "column",
          dataPoints: dataPoints
        }]
      });
      chart.render();
    }
</script>
</head>
<body>
    <div id="chartContainer" style="height: 320px; width: 570px;"></div>
    <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>                              
from django.shortcuts import render
from django.core import serializers

from .models import DataPoint


def index(request):
    datapoints = serializers.serialize('json', DataPoint.objects.all())
    return render(request, "index.html", { "datapoints": datapoints})                        
from django.db import models

class DataPoint(models.Model):
    x = models.IntegerField()
    y = models.IntegerField()

Chart Customizations

Chart title can be styled by setting fontColor, fontSize, fontStyle, fontWeight, fontFamily properties.