Python Waterfall Charts using Django

Download Python Django Chart Samples

Python Waterfall Chart shows cumulative effect of sequential positive / negative values to an initial value. They are also referred to as Bridge Charts / Flying Brick Charts. Below example show Python Waterfall Chart along with Django source-code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
  window.onload = function () {
    var acmeSalesDps = {{ acme_sales_data|safe }}

    for(var i=0; i<acmeSalesDps.length; i++) {
      for (const key in acmeSalesDps[i]) {
        if(acmeSalesDps[i][key] === "True" || acmeSalesDps[i][key] === "False") {
          acmeSalesDps[i][key] = acmeSalesDps[i][key] === "True";
        }
      }
    }

    var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      title:{
        text: "Monthly Sales of ACME Corp.",
        fontFamily: "Trebuchet MS, Helvetica, sans-serif"
      },
      axisX: {
        interval: 1
      },
      axisY: {
        valueFormatString: "$#,##0,.M"
      },
      data: [{
        type: "waterfall",
        yValueFormatString: "$#,##0,.00M",
        indexLabelOrientation: "vertical",
        indexLabelFontColor: "black",
        fallingColor: "#C0504E",
        dataPoints: acmeSalesDps
      }]
    });
    chart.render();
  }
</script>
</head>
<body>
  <div id="chartContainer" style="height: 360px; width: 100%"></div>
  <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>                              
from django.shortcuts import render

def index(request):
    acme_sales_data = [
        { "label": "Initial", "y": 9545 },
        { "label": "Jan", "y": 2412 },
        { "label": "Feb", "y": 6065 },
        { "label": "Mar", "y": -3162 },
        { "label": "Apr", "y": 5604 },
        { "label": "May", "y": 5324 },
        { "label": "Jun", "y": -12543 },
        { "label": "July", "y": 4805 },
        { "label": "Aug", "y": 5683 },
        { "label": "Sep", "y": -5491 },
        { "label": "Oct", "y": 7654 },
        { "label": "Nov", "y": -3943 },
        { "label": "Dec", "y": 3324 },
        { "label": "Final", "isCumulativeSum": "True", "indexLabel": "{y}" }
    ]

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

Chart Customizations

You can define whether a particular datapoint represents intermediate sum or cumulative sum using isIntermediateSum & isCumulativeSum properties.