Python Box & Whisker Charts using Django

Download Python Django Chart Samples

Python Box & Whisker Chart uses boxes & lines to depict the distributions of data through their quartiles along with highlighting the mean / median. Below example shows Python Box & Whisker Chart along with Django MVT source-code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
      theme: "light2",
      title: {
        text: "Turn Around Time for Printed Circuit Boards"
      },
      axisX: {
        labelAngle: 0,
        labelTextAlign: "center"
      },
      axisY: {
        title: "Turn Around Time in Days"
      },
      data: [{
        type: "boxAndWhisker",
        yValueFormatString: "#,##0.## Days",
        dataPoints: {{ board_print_tat_data|safe }}
      }]
    });
    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):
    board_print_tat_data = [
        { "label": "1 to 2 Layer Board", "y": [5, 8.5, 14, 20, 12] },
        { "label": "4 to 6 Layer Board", "y": [8, 12, 23, 28, 18] },
        { "label": "8 to 10 Layer Board", "y": [8, 12, 21, 30, 16] },
        { "label": "12 to 14 Layer Board", "y": [8, 12, 22, 30, 18] },
        { "label": "16 to 14 Layer Board", "y": [10, 14, 24, 32, 20] }
    ]

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

Chart Customizations

Color of lower & upper box can be changed using lowerBoxColor & upperBoxColor properties respectively. Color of whisker & stem can be changed by setting whiskerColor & stemColor properties.