Python Multi Series Bar Chart

Download Python Django Chart Samples

Example shows Python Multi Series Bar Chart. Multi Series Bar Charts are used to highlight differences between two or more datapoints. Demo also includes Django MVT code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    title:{
      text: "Production of Major Crops in India"
    },
    toolTip: {
      shared: true
    },
    axisY: {
      title: "Production in Million Tonnes",
      valueFormatString: "#,###MT"
    },
    legend: {
      cursor: "pointer",
      itemclick: toggleDataSeries
    },
    data: [
      {
        type: "bar",
        name: "2014-15",
        showInLegend: true,
        yValueFormatString: "#,###MT",
        dataPoints: {{ production_data_2014|safe }}
      },
      {
        type: "bar",
        name: "2015-16",
        showInLegend: true,
        yValueFormatString: "#,###MT",
        dataPoints: {{ production_data_2015|safe }}
      },
      {
        type: "bar",
        name: "2016-17",
        showInLegend: true,
        yValueFormatString: "#,###MT",
        dataPoints: {{ production_data_2016|safe }}
      }
    ]
  });
  chart.render();

  function toggleDataSeries(e) {
      if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
          e.dataSeries.visible = false;
      } else {
          e.dataSeries.visible = true;
      }
      e.chart.render();
  }
}
</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):
  production_data_2014 = [
    { "y": 105.48, "label": "Rice"},
    { "y": 86.53, "label": "Wheat"},
    { "y": 42.86, "label": "Coarse Cereals"},
    { "y": 17.15, "label": "Total Pulses"}
  ]
  production_data_2015 = [
    { "y": 104.41, "label": "Rice"},
    { "y": 92.29, "label": "Wheat"},
    { "y": 38.52, "label": "Coarse Cereals"},
    { "y": 16.35, "label": "Total Pulses"}
  ]
  production_data_2016 = [
    { "y": 108.86, "label": "Rice"},
    { "y": 96.64, "label": "Wheat"},
    { "y": 44.34, "label": "Coarse Cereals"},
    { "y": 22.14, "label": "Total Pulses"}
  ]
  return render(request, 'index.html', { "production_data_2014" : production_data_2014, "production_data_2015": production_data_2015, "production_data_2016": production_data_2016 })

Chart Customizations

You can change color of each data series to make them visually distinct from each other. Shared tooltip helps you show information of all the datapoints sharing same x-value in a single tooltip. You can enable legends for each dataseries by setting showInLegend to true.