Python Range Column Chart using Django

Download Python Django Chart Samples

Python Range Column Charts are same as column chart except that they are plotted between a given range of y-values. They are also referred to as Floating Column Charts. Demo shows Python Range Chart & 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 Range in Auckland"
      },
      colorSet: "colorSet2",
      axisY: {
        valueFormatString: "#0.##°C",
        title: "Temperature (°C)"
      },
      axisX: {
        interval: 1,
        intervalType: "month",
        valueFormatString: "MMM"
      },
      toolTip: {
        content: "{x} </br> Min: {y[0]}, Max: {y[1]}"
      },
      data: [{
          type: "rangeColumn",
          yValueFormatString: "#0.##°C",
          xValueFormatString: "MMM YYYY",
          xValueType: "dateTime",
          dataPoints: {{ auckland_temperature_data|safe }}
      }]
    });
    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):
	auckland_temperature_data = [
		{ "x": 1609459200000, "y": [12.278, 27.5] },
		{ "x": 1612137600000, "y": [12.778, 27.222] },
		{ "x": 1614556800000, "y": [11.2, 26.111] },
		{ "x": 1617235200000, "y": [9.6, 24.3] },
		{ "x": 1619827200000, "y": [4.778, 20.5] },
		{ "x": 1622505600000, "y": [1, 20] },
		{ "x": 1625097600000, "y": [1.389, 19.111] },
		{ "x": 1627776000000, "y": [2.278, 19] },
		{ "x": 1630454400000, "y": [5.7, 21.111] },
		{ "x": 1633046400000, "y": [6.778, 23.111] },
		{ "x": 1635724800000, "y": [8.2, 25] },
		{ "x": 1638316800000, "y": [12, 27.611] }
	]

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

Chart Customizations

The text shown in the toolTip can be customized using toolTipContent property. Format of x & y-value shown in tooltip can be defined by setting xValueFormatString & yValueFormatString properties.