Below example shows Python Range Area Chart to represent High-Low values along with Line Chart to show the average. It also includes Django source-code that you can run locally.
<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
window.onload = function () {
var avgTemperatureDps = [];
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Temperature Variation"
},
subtitles: [{
text: "Munich, DE"
}],
theme: "light2",
axisY: {
valueFormatString: "#0.##°C",
title: "Temperature (°C)"
},
axisX: {
interval: 1,
intervalType: "month",
valueFormatString: "MMM"
},
toolTip: {
shared: true
},
data: [{
type: "rangeArea",
name: "Temperature Range",
legendText: "Min-Max",
xValueFormatString: "MMM YYYY",
yValueFormatString: "#0.##°C",
xValueType: "dateTime",
showInLegend: true,
toolTipContent: "{x}<br><span style=\"color:#6D77AC\">{name}</span><br>Min: {y[0]} °C<br>Max: {y[1]} °C",
markerSize: 0,
dataPoints: {{ munich_high_low_temp_data|safe }}
}]
});
addAverageSeries();
function addAverageSeries() {
var dps = [];
for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
dps.push({
x: chart.options.data[0].dataPoints[i].x,
y: (chart.options.data[0].dataPoints[i].y[0] + chart.options.data[0].dataPoints[i].y[1]) / 2
});
}
chart.options.data.push({
type: "line",
name: "Average",
showInLegend: true,
markerSize: 0,
color: "#EF5350",
yValueFormatString: "##.0°C",
toolTipContent: "<span style='\"'color:{color}'\"'>{name}</span>: {y}",
dataPoints: dps
});
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):
munich_high_low_temp_data = [
{ "x": 1609459200000, "y": [-13.6, 14.5] },
{ "x": 1612137600000, "y": [-18.4, 20.2] },
{ "x": 1614556800000, "y": [-8.3, 22.9] },
{ "x": 1617235200000, "y": [-6.4, 23.3] },
{ "x": 1619827200000, "y": [-2.2, 30.7] },
{ "x": 1622505600000, "y": [2.3, 32.3] },
{ "x": 1625097600000, "y": [7.6, 31.5] },
{ "x": 1627776000000, "y": [8.9, 31.2] },
{ "x": 1630454400000, "y": [1.8, 27.6] },
{ "x": 1633046400000, "y": [-3.9, 27.5] },
{ "x": 1635724800000, "y": [-6.3, 15.3] },
{ "x": 1638316800000, "y": [-11.3, 15.6] }
]
return render(request, 'index.html', { "munich_high_low_temp_data" : munich_high_low_temp_data })
You can add as many subtitles as you want to the chart by adding subtitles to the chart. You can enable legends for dataseries present in the chart by setting showInLegend to true. The text shown in the legends can also be changed using legendText property.