Python Pie Chart using Django

Download Python Django Chart Samples

Demo shows Python Pie Chart with Index Labels built using CanvasJS & Django framework. It also includes source-code that you can try locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
      exportEnabled: true,
      animationEnabled: true,
      title: {
        text: "Monthly Expenses"
      },
      data: [{
        type: "pie",
        legendText: "{label}",
        yValueFormatString: "#,###\"%\"",
        indexLabel: "{label} ({y})",
        dataPoints: {{ monthly_expense_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):
  monthly_expense_data = [
    { "label": "Accomodation", "y": 30 },
    { "label": "Food & Groceries", "y": 25 },
    { "label": "Utilities", "y": 5 },
    { "label": "Entertainment & Fun", "y": 20 },
    { "label": "Savings", "y": 10 },
    { "label": "Cellphone & Internet", "y": 10 }
  ]

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

Chart Customizations

exploded property can be used to set a pie slice to be exploded during initial render. Some other commonly used customizations are radius, startAngle, indexLabel, etc.