Python Stacked Column Chart using Django

Download Python Django Chart Samples

Example shows Python Stacked Column Chart that is formed by vertically stacking several column dataseries one on top of another. They are sometimes referred to as Advanced Cumulative Column Chart. Demo also includes Django source code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
      exportEnabled: true,
      title: {
        text: "Fitness & Exercise"
      },
      subtitles: [{
        text: "Weekly Scorecard"
      }],
      axisY: {
        title: "Time in Minutes"
      },
      toolTip: {
        shared: true,
        reversed: true
      },
      legend: {
        cursor: "pointer",
        itemclick: hideUnhideDataSeries
      },
      data: [{
        type: "stackedColumn",
        name: "Running",
        showInLegend: true,
        yValueFormatString: "#,##0 min",
        dataPoints: {{ running_data|safe }}
      },{
        type: "stackedColumn",
        name: "Swimming",
        showInLegend: true,
        yValueFormatString: "#,##0 min",
        dataPoints: {{ swimming_data|safe }}
      },{
        type: "stackedColumn",
        name: "Cycling",
        showInLegend: true,
        yValueFormatString: "#,##0 min",
        dataPoints: {{ cycling_data|safe }}
      }]
    });
    chart.render();

    function hideUnhideDataSeries(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):
  running_data = [
    { "label": "Sunday", "y": 60 },
    { "label": "Monday", "y": 30 },
    { "label": "Tuesday", "y": 25 },
    { "label": "Wednesday", "y": 30 },
    { "label": "Thursday", "y": 35 },
    { "label": "Friday", "y": 20 },
    { "label": "Saturday", "y": 30 }
  ]

  swimming_data = [
    { "label": "Sunday", "y": 45 },
    { "label": "Monday", "y": 20 },
    { "label": "Tuesday", "y": 25 },
    { "label": "Wednesday", "y": 20 },
    { "label": "Thursday", "y": 25 },
    { "label": "Friday", "y": 20 },
    { "label": "Saturday", "y": 20 }
  ]

  cycling_data = [
    { "label": "Sunday", "y": 0 },
    { "label": "Monday", "y": 25 },
    { "label": "Tuesday", "y": 20 },
    { "label": "Wednesday", "y": 25 },
    { "label": "Thursday", "y": 45 },
    { "label": "Friday", "y": 25 },
    { "label": "Saturday", "y": 35 }
  ]

  return render(request, 'index.html', { "running_data" : running_data, "swimming_data": swimming_data, "cycling_data": cycling_data })

Chart Customizations

Enabling legend by setting showInLegend will increase the readability of the chart. The text shown in the legend can be changed by setting name property in dataseries level.