Python Multi Series Column Chart in Django

Download Python Django Chart Samples

Below demo shows Python Multi Series Column Chart. Multi Series Charts are useful for highlighting differences between two or more sets of data. Example also includes Django source-code that you can run locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
          animationEnabled: true,
          exportEnabled: true,
          title:{
            text: "Multi-series Column Chart"  
          },  
          legend: {
            cursor: "pointer",
            verticalAlign: "top",
            itemclick: hideUnhideDataSeries
          },
          data: [{
				    type: "column",
            name: "DataSeries 1",
            showInLegend: true,
            dataPoints: {{ datapoints|safe }}
          },{
				    type: "column",
            name: "DataSeries 2",
            showInLegend: true,
            dataPoints: {{ datapoints2|safe }}
          }]
        });
        chart.render();

        function hideUnhideDataSeries(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):
  datapoints = [
    { "x": 10, "y": 171 },
    { "x": 20, "y": 155},
    { "x": 30, "y": 150 },
    { "x": 40, "y": 165 },
    { "x": 50, "y": 195 },
    { "x": 60, "y": 168 },
    { "x": 70, "y": 128 },
    { "x": 80, "y": 134 },
    { "x": 90, "y": 114}
  ]

  datapoints2 = [
    { "x": 10, "y": 71 },
    { "x": 20, "y": 55},
    { "x": 30, "y": 50 },
    { "x": 40, "y": 65 },
    { "x": 50, "y": 95 },
    { "x": 60, "y": 68 },
    { "x": 70, "y": 28 },
    { "x": 80, "y": 34 },
    { "x": 90, "y": 14 }
  ]

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

Chart Customizations

You can use showInLegend property to show legend of each dataseries. You can also choose between different types of markers for legend using legendMarkerType property. Other commonly used customization options in multi-series chart includes shared tooltip, color, fillOpacity, etc.