Python Stacked Area Chart using Django

Download Python Django Chart Samples

Python Stacked Area Charts are formed by stacking multiple dataseries & are used to compare contribution of each datapoint to the total. Given example shows Python Stacked Area Chart along with Django view & template source-code that you can run locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
      title: {
        text: "Productivity by Day"             
      },
      animationEnabled: true,
      axisY: {
        title: "Hours"
      },
      toolTip: {
        shared: true
      },
      legend: {
        cursor: "pointer",
        itemclick: function(e) {
          if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
            e.dataSeries.visible = false;
          }
          else {
            e.dataSeries.visible = true;
          }
          chart.render();
        }
      },
      data: [{
        type: "stackedArea",
        name: "Very Distracting",
        showInLegend: true,
        yValueFormatString: "0.#hrs",
        markerSize: 0,
        dataPoints: {{ very_distracting_data|safe }}
      },{
        type: "stackedArea",        
        name: "Distracting",
        showInLegend: true,
        yValueFormatString: "0.#hrs",
        markerSize: 0,
        dataPoints: {{ distracting_data|safe }}
      },{
        type: "stackedArea",
        name: "Productive",
        showInLegend: true,
        yValueFormatString: "0.#hrs",
        markerSize: 0,
        dataPoints: {{ productive_data|safe }}
      },{
        type: "stackedArea",
        name: "Very Productive",
        showInLegend: true,
        yValueFormatString: "0.#hrs",
        markerSize: 0,
        dataPoints: {{ very_productive_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):
    very_distracting_data = [
        { "label": "Sunday", "y": 2.4 },
        { "label": "Monday", "y": .6 },
        { "label": "Tuesday", "y": .8 },
        { "label": "Wednesday", "y": 1.6 },
        { "label": "Thursday", "y": 1.4 },
        { "label": "Friday", "y": 1.4 },
        { "label": "Saturday", "y": 2.6 }
    ]

    distracting_data = [
        { "label": "Sunday", "y": 3.3 },
        { "label": "Monday", "y": 1.6 },
        { "label": "Tuesday", "y": 2.1 },
        { "label": "Wednesday", "y": 1.6 },
        { "label": "Thursday", "y": 1.4 },
        { "label": "Friday", "y": 1.7 },
        { "label": "Saturday", "y": 4.6 }
    ]

    productive_data = [
        { "label": "Sunday", "y": 2.4 },
        { "label": "Monday", "y":  2 },
        { "label": "Tuesday", "y": 2.8 },
        { "label": "Wednesday", "y": 1.6 },
        { "label": "Thursday", "y": 1.4 },
        { "label": "Friday", "y": 1.4 },
        { "label": "Saturday", "y": 1.6 }
    ]
    
    very_productive_data = [
        { "label": "Sunday", "y": .4 },
        { "label": "Monday", "y": 7 },
        { "label": "Tuesday", "y": 6.8 },
        { "label": "Wednesday", "y": 4.6 },
        { "label": "Thursday", "y": 6.4 },
        { "label": "Friday", "y": 7.4 },
        { "label": "Saturday", "y": 1.6 }
    ]

    return render(request, 'index.html', { "very_distracting_data" : very_distracting_data, "distracting_data": distracting_data, "productive_data": productive_data, "very_productive_data": very_productive_data })

Chart Customizations

The size & type of markers can be changed using markerSize and markerType properties. Some other commonly used customization options in Python Stacked Area Chart includes indexLabel, fillOpacity, color, etc.