Example shows Python Multi Series Range Area Charts that are used to compare range of temperatures in two different cities. Demo 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: "Temperature Variation"
},
exportEnabled: true,
axisY: {
valueFormatString: "#0.##°C",
title: "Temperature (°C)"
},
axisX: {
interval: 1,
intervalType: "month",
valueFormatString: "MMM"
},
toolTip: {
shared: true,
contentFormatter: function(e) {
var content = " ";
content += CanvasJS.formatDate(new Date(e.entries[0].dataPoint.x), "MMM YYYY") + "<br/>";;
for (var i = 0; i < e.entries.length; i++) {
content += "<strong><span style='color:" + e.entries[i].dataSeries.color + "'>" + e.entries[i].dataSeries.name + "</span></strong>" + ": " + CanvasJS.formatNumber(e.entries[i].dataPoint.y[0], "#0.##°C") + " - "+ CanvasJS.formatNumber(e.entries[i].dataPoint.y[1], "#0.##°C");
content += "<br/>";
}
return content;
}
},
legend: {
dockInsidePlotArea: true,
cursor: "pointer",
itemclick: hideUnhideDataSeries
},
data: [{
type: "rangeArea",
name: "Indore",
showInLegend: true,
legendText: "Indore, IN",
xValueType: "dateTime",
markerSize: 0,
dataPoints: {{ indore_weather_data|safe }}
},{
type: "rangeArea",
name: "Rio de Janeiro",
showInLegend: true,
legendText: "Rio de Janeiro, BR",
xValueType: "dateTime",
markerSize: 0,
dataPoints: {{ rio_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):
indore_weather_data = [
{ "x": 1609459200000, "y": [5, 29.778] },
{ "x": 1612137600000, "y": [8, 33.611] },
{ "x": 1614556800000, "y": [12, 40] },
{ "x": 1617235200000, "y": [16, 40.611] },
{ "x": 1619827200000, "y": [20, 39.222] },
{ "x": 1622505600000, "y": [21, 38.111] },
{ "x": 1625097600000, "y": [21, 35.611] },
{ "x": 1627776000000, "y": [20, 31] },
{ "x": 1630454400000, "y": [20.7, 32] },
{ "x": 1633046400000, "y": [13, 37] },
{ "x": 1635724800000, "y": [13, 30] },
{ "x": 1638316800000, "y": [6.5, 27.389] }
]
rio_weather_data = [
{ "x": 1609459200000, "y": [21, 42.222] },
{ "x": 1612137600000, "y": [19, 41] },
{ "x": 1614556800000, "y": [20, 39] },
{ "x": 1617235200000, "y": [17.278, 39] },
{ "x": 1619827200000, "y": [14.722, 38] },
{ "x": 1622505600000, "y": [14, 35] },
{ "x": 1625097600000, "y": [11, 35] },
{ "x": 1627776000000, "y": [12, 38] },
{ "x": 1630454400000, "y": [13.278, 41] },
{ "x": 1633046400000, "y": [15.5, 39] },
{ "x": 1635724800000, "y": [15, 38] },
{ "x": 1638316800000, "y": [18.889, 37] }
]
return render(request, 'index.html', { "indore_weather_data" : indore_weather_data, "rio_weather_data": rio_weather_data })
Color of the filled region can be changed by setting color property. The color of the lines enclosing the area can be changed using lineColor property. Other commonly used customization options include markerSize, markerColor, etc.