Python Animated Chart using Django

Download Python Django Chart Samples

Example shows Python Chart that animates smoothly in circular manner, built using Django framework. It also includes view & template code that you can run locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script src="{% static 'canvasjs.min.js' %}"></script>
<script>
    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "light2",
            animationEnabled: true,
            title:{
                text: "Monthly Sales Analysis"
            },
            data: [{
                type: "pie",
                startAngle: -90,
                yValueFormatString: "#,###'%'",
                dataPoints: {{ datapoints | safe }}
            }]
        });
        chart.render();
    }
</script>
    
</head>
<body>
    <div id="chartContainer" style="width: 100%; height: 360px;"></div>
</body>
</html>                              
#views.py
from django.http import HttpResponse
from django.shortcuts import render
from django.template import loader

def index(request):
    datapoints = [
        { "label": "Online Store",  "y": 27  },
        { "label": "Offline Store", "y": 25  },        
        { "label": "Discounted Sale",  "y": 30  },
        { "label": "B2B Channel", "y": 8  },
        { "label": "Others",  "y": 10  }
    ]
    return render(request, 'index.html', { "datapoints" : datapoints })

Chart Customizations

Duration of animation can be changed by setting animationDuration property. The datapoint can be exploded in the initial render by setting exploded property in charts like pie, doughnut, funnel & pyramid. At the same time, you can disable exploding of the datapoint by setting explodeOnClick property.