Python Multi Series Range Column Chart using Django

Download Python Django Chart Samples

Example shows Python Multi Series Range Column Chart where floating columns from different series are placed one next to another. It also includes Django 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", {
      title: {
        text: "Monthly Temperature Comparison"
      },
      theme: "dark2",
      exportEnabled: true,
      axisY: {
        valueFormatString: "#0.##°C",
        title: "Temperature (°C)"
      },
      axisX: {
        interval: 1,
        intervalType: "month",
        valueFormatString: "MMM"
      },
      toolTip: {
        shared: true
      },
      legend: {
        dockInsidePlotArea: true,
        cursor: "pointer",
        itemclick: hideUnhideDataSeries
      },
      data: [{
          type: "rangeColumn",
          name: "Perth",
          showInLegend: true,
          yValueFormatString: "#0.##°C",
          xValueFormatString: "MMM YYYY",
          xValueType: "dateTime",
          content: "<b>{name}</b> Min: {y[0]}, Max: {y[1]}",
          dataPoints: {{ perth_weather_data|safe }}
      },{
          type: "rangeColumn",
          name: "Hobart",
          showInLegend: true,
          yValueFormatString: "#0.##°C",
          xValueFormatString: "MMM YYYY",
          xValueType: "dateTime",
          content: "<b>{name}</b> Min: {y[0]}, Max: {y[1]}",
          dataPoints: {{ hobart_weather_data|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):
    hobart_weather_data = [
        { "x": 1609459200000, "y": [-1.8, 37.5] },
        { "x": 1612137600000, "y": [-0.3, 32.8] },
        { "x": 1614556800000, "y": [-1.611, 30.611] },
        { "x": 1617235200000, "y": [-3.8, 32.3] },
        { "x": 1619827200000, "y": [-5.1, 24.611] },
        { "x": 1622505600000, "y": [-4.6, 18.5] },
        { "x": 1625097600000, "y": [-5.611, 17.778] },
        { "x": 1627776000000, "y": [-5.722, 19.722] },
        { "x": 1630454400000, "y": [-6.3, 26.611] },
        { "x": 1633046400000, "y": [-4.8, 24.611] },
        { "x": 1635724800000, "y": [-5.8, 28.3] },
        { "x": 1638316800000, "y": [-1.9, 33.222] }
    ]

    perth_weather_data = [
        { "x": 1609459200000, "y": [11.389, 43] },
        { "x": 1612137600000, "y": [9.278, 42] },
        { "x": 1614556800000, "y": [7.5, 42] },
        { "x": 1617235200000, "y": [7, 35.222] },
        { "x": 1619827200000, "y": [4.389, 29.5] },
        { "x": 1622505600000, "y": [0, 22.4] },
        { "x": 1625097600000, "y": [3.389, 21.722] },
        { "x": 1627776000000, "y": [2, 26.111] },
        { "x": 1630454400000, "y": [3, 30.4] },
        { "x": 1633046400000, "y": [2.389, 33.611] },
        { "x": 1635724800000, "y": [6, 37.4] },
        { "x": 1638316800000, "y": [8.7, 43.722] }
    ]

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

Chart Customizations

You can show dataseries name in legend by setting showInLegend property to true. Text shown in legend can be changed by setting name or legendText properties.