Python Pyramid Chart using Django

Download Python Django Chart Samples

Example shows Python Pyramid Chart with indexlabels placed inside each section. It's also referred to as Inverted Funnel Chart & sometimes Triangular Chart because of it's shape. 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",{
      animationEnabled: true,
      exportEnabled: true,
      theme: "light2",
      title:{
        text: "Advertisement Risk Pyramid"
      },
      data: [{
        type: "pyramid",
        toolTipContent: "<b>{label}</b>: {y}%",
        indexLabel: "{label}({y}%)",
        indexLabelPlacement: "inside",
        indexLabelFontColor: "#fff",
        dataPoints: {{ ads_risk_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):
  ads_risk_data = [
    { "y": 15, "label": "Pay Per Click Advertising" },
    { "y": 25, "label": "Website Sponsorship" },
    { "y": 25, "label": "Banner Advertising" },
    { "y": 40, "label": "Interactive Advertising" },
    { "y": 60, "label": "Traditional Media" }
  ]

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

Chart Customizations

You can change the color of each datapoint by using color property. Some other commonly used customization in pyramid chart includes exploded, explodeOnClick, etc.