Python Spline Area Chart using Django

Download Python Django Chart Samples

Example shows Python Spline Area Chart with label formatting. Library supports defining custom formats for axis labels, index labels, tooltip content. It also supports globalization features like customizing thousand, decimal separator, etc. Demo also includes Django MVC source-code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",{
      animationEnabled: true,
      title:{
        text: "Site Traffic"
      },
      axisX: {
        valueFormatString: "DD MMM"
      },
      axisY: {
        title: "Total Number of Visits",
        maximum: 1200
      },
      data: [{
        type: "splineArea",
        xValueType: "dateTime",
        xValueFormatString: "DD MMM",
        yValueFormatString: "#,##0 Visits",
        dataPoints: {{ website_visit_data|safe }}
      }]
    });
    chart.render();
  }
</script>    
</head>
<body>
    <div id="chartContainer" style="width: 100%; height: 360px;"></div>
    <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>                              
from django.shortcuts import render

def index(request):
  website_visit_data = [
    { "x": 1483381800000,"y": 650 },
    { "x": 1483468200000,"y": 650 },
    { "x": 1483554600000,"y": 710 },
    { "x": 1483641000000,"y": 658 },
    { "x": 1483727400000,"y": 734 },
    { "x": 1483813800000,"y": 963 },
    { "x": 1483900200000,"y": 847 },
    { "x": 1483986600000,"y": 853 },
    { "x": 1484073000000,"y": 869 },
    { "x": 1484159400000,"y": 943 },
    { "x": 1484245800000,"y": 943 },
    { "x": 1484332200000,"y": 869 },
    { "x": 1484418600000,"y": 890 },
    { "x": 1484505000000,"y": 930 },
  ]

  return render(request, 'index.html', { "website_visit_data" : website_visit_data })

Chart Customizations

Format of axis labels can be defined using valueFormatString property. The format of x & y values shown in the tooltip can be changed using xValueFormatString & yValueFormatString properties respectively.