Python Error Bar Chart using Django

Download Python Django Chart Samples

Python Error Bar Chart helps you show margin of errors or standard deviations. Library supports combining error chart with any other charts with axis like bar, column, line, area, etc. Below example shows Python Error Bar Chart along with Django MVT code that you can try out locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
      theme: "dark1",
      animationEnabled: true,
      title: {
        text: "Lifespan of Appliances",
        fontFamily: "Trebuchet MS, Helvetica, sans-serif"
      },
      axisX: {
        interval: 1
      },
      axisY: {
        title: "Lifespan",
        suffix: " Years"
      },
      toolTip: {
        shared: true
      },
      data: [{
        type: "bar",
        name: "Average",
        toolTipContent: "<b>{label}</b><br><span style=\"color:#4F81BC\">{name}</span>: {y} Years",
        dataPoints: {{ appliance_lifespan_average_data|safe }}
      },
      {
        type: "error",
        name: "Variance",
        toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y[0]} - {y[1]} Years",
        dataPoints: {{ appliance_lifespan_variance_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):
    appliance_lifespan_average_data = [
        { "y": 10, "label": "Air-Conditioners" },
        { "y": 4, "label": "Computers" },
        { "y": 20, "label": "Furnaces" },
        { "y": 16, "label": "Electric Ranges" },
        { "y": 6, "label": "Packaging Machines" },
        { "y": 11, "label": "Refrigerators" },
        { "y": 10, "label": "Washing Machine" },
        { "y": 11, "label": "Water Heaters" }
    ]

    appliance_lifespan_variance_data = [
        { "y": [8, 15], "label": "Air-Conditioners" },
        { "y": [3, 5], "label": "Computers" },
        { "y": [15, 25], "label": "Furnaces" },
        { "y": [13, 20], "label": "Electric Ranges" },
        { "y": [3, 7], "label": "Packaging Machines" },
        { "y": [9, 13], "label": "Refrigerators" },
        { "y": [5, 15], "label": "Washing Machine" },
        { "y": [8, 12], "label": "Water Heaters" }
    ]

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

Chart Customizations

linkedDataSeriesIndex property lets you define to which dataseries should the error chart be attached. Whisker of error chart can be customized by setting whiskerColor, whiskerLength, whiskerThickness & whiskerDashType properties.