Python Funnel Chart without Neck in Django

Download Python Django Chart Samples

Example shows Python Funnel Chart without a neck. Removing the neck in funnel chart, by setting both neck height & width to 0, will make it look like a inverted Pyramid Chart. Demo also includes Django source-code that you can run locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",{
      animationEnabled: true,
      title:{
        text: "Sales Analysis"
      },
      theme: "light2",
      data: [{
        type: "funnel",
        toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>",
        indexLabel: "{label} ({percentage}%)",
        neckWidth: 20,
				neckHeight: 0,
        dataPoints: {{ sales_data|safe }}
      }]
    });
    calculatePercentage();
    chart.render();

    function calculatePercentage() {
      var dataPoint = chart.options.data[0].dataPoints;
      var total = dataPoint[0].y;
      for(var i = 0; i < dataPoint.length; i++) {
        if(i == 0) {
          chart.options.data[0].dataPoints[i].percentage = 100;
        } else {
          chart.options.data[0].dataPoints[i].percentage = ((dataPoint[i].y / total) * 100).toFixed(2);
        }
      }
    }
  }
</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):
  sales_data = [
    { "y": 1400, "label": "Prospects" },
    { "y": 1212, "label": "Qualified Prospects" },
    { "y": 1080, "label": "Proposals" },
    { "y": 665,  "label": "Negotiation" },
    { "y": 578, "label": "Final Sales" }
  ]

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

Chart Customizations

You can customize the height of width of the neck using neckHeight and neckWidth properties. Some other commonly used customizations in Funnel Chart includes valueRepresents, explodeOnClick, reversed, etc.