Python Pareto Chart using Django

Download Python Django Chart Samples

Python Pareto Charts are combination of Column & Line Charts where individual values are shown in descending order by column & the cumulative sum shown by the line. Pareto Charts are generally used to highlight the common problems or defects. Below example shows Python Pareto Chart along with Django 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: "Refund in Software Sales"
      },
      exportEnabled: true,
      axisY: {
        title: "Count",
        lineColor: "#4F81BC",
        tickColor: "#4F81BC",
        labelFontColor: "#4F81BC",
        gridColor: "#D3D1D1"
      },
      axisY2: {
        title: "Cumulative Percent",
        suffix: "%",
        lineColor: "#C0504E",
        tickColor: "#C0504E",
        labelFontColor: "#C0504E",
        includeZero: true
      },
      axisX: {
        labelAngle: 0,
        labelTextAlign: "center"
      },
      data: [{
        type: "column",
        dataPoints: {{ refund_data|safe }}
      }]
    });
    chart.render();
    createPareto();

    function createPareto() {
      var dps = [];
      var yValue, yTotal = 0, yPercent = 0;

      for (var i = 0; i < chart.data[0].dataPoints.length; i++)
        yTotal += chart.data[0].dataPoints[i].y;
      console.log(yTotal);
      for (var i = 0; i < chart.data[0].dataPoints.length; i++) {
        yValue = chart.data[0].dataPoints[i].y;
        yPercent += (yValue / yTotal * 100);
        dps.push({ label: chart.data[0].dataPoints[i].label, y: yPercent });
      }
      chart.addTo("data", { type: "line", axisYType: "secondary", yValueFormatString: "0.##\"%\"", indexLabel: "{y}", indexLabelFontColor: "#C0504E", color: "#C0504E", dataPoints: dps });
      chart.axisY[0].set("maximum", yTotal, false);
      chart.axisY2[0].set("maximum", 100, false);
      chart.axisY2[0].set("interval", 25);
    }

  }
</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):
    refund_data = [
        { "label": "Not Compatible", "y": 63 },
        { "label": "Not as expected", "y": 45 },
        { "label": "Available at Low Price", "y": 32 },
        { "label": "Changed Mind", "y": 25 },
        { "label": "Too Complicated", "y": 19 },
        { "label": "Poor Manual", "y": 16 }
    ]

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

Chart Customizations

Color of axis elements like axis line, grid, ticks & labels can be customized as per your app theme using lineColor, gridColor, tickColor & labelFontColor properties respectively.