Python Stacked Bar Chart using Django

Download Python Django Chart Samples

Example shows Python Stacked Bar Chart. Stacked Bar Chart represents the proportional contribution of individual datapoints to the total.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
          animationEnabled: true,
          title:{
            text:"Production of Two Wheelers (India)"
          },
          axisY: {
            title: "Production Count (in Millions)",
            valueFormatString: "0,.,.##M"
          },
          axisX: {
            reversed: true
          },
          toolTip: {
            shared: true
          },
          legend: {
            verticalAlign: "top",
            cursor: "pointer",
            itemclick: toggleDataSeries
          },
          data: [{
            type: "stackedBar",
            name: "Scooter",
            showInLegend: true,
            dataPoints: {{ scooter_production_data|safe }}
          },{
            type: "stackedBar",
            name: "Motorcycles",
            showInLegend: true,
            dataPoints: {{ motorcycle_production_data|safe }}
          },{
            type: "stackedBar",
            name: "Mopeds",
            showInLegend: true,
            dataPoints: {{ mopeds_production_data|safe }}
          }]
        });
        chart.render();

        function toggleDataSeries(e) {
            if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
            }
            e.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):
  scooter_production_data = [
    { "label": "2005-06", "y": 1021013 },
    { "label": "2006-07", "y": 943974 },
    { "label": "2007-08", "y": 1074933 },
    { "label": "2008-09", "y": 1161276 },
    { "label": "2009-10", "y": 1494409 },
    { "label": "2010-11", "y": 2144765 },
    { "label": "2011-12", "y": 2659340 },
    { "label": "2012-13", "y": 3025014 }
  ]
  motorcycle_production_data = [
    { "label": "2005-06", "y": 6207690 },
    { "label": "2006-07", "y": 7112225 },
    { "label": "2007-08", "y": 6503532 },
    { "label": "2008-09", "y": 6798118 },
    { "label": "2009-10", "y": 8444857 },
    { "label": "2010-11", "y": 10527111 },
    { "label": "2011-12", "y": 11982669 },
    { "label": "2012-13", "y": 11904212 }
  ]
  mopeds_production_data = [
    { "label": "2005-06", "y": 379994 },
    { "label": "2006-07", "y": 379987 },
    { "label": "2007-08", "y": 430827 },
    { "label": "2008-09", "y": 436219 },
    { "label": "2009-10", "y": 571070 },
    { "label": "2010-11", "y": 704575 },
    { "label": "2011-12", "y": 785523 },
    { "label": "2012-13", "y": 791954 }
  ]
  return render(request, 'index.html', { "scooter_production_data" : scooter_production_data, "motorcycle_production_data": motorcycle_production_data, "mopeds_production_data": mopeds_production_data })

Chart Customizations

Dataseries name can be shown in legends by setting showInLegend property to true. You can change the name of the dataseries shown in legend by setting either name or legendText properties.