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 })
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.