Python Multi Series Spline Area Chart lets you compare two or more dataseries in a single graph. Below example shows multi-series spline area chart along with 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", { animationEnabled: true, exportEnabled: true, theme: "light2", title: { text: "Annual Expenses" }, axisY: { prefix: "$", labelFormatter: addSymbols }, toolTip: { shared: true, content: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span>: <span style='\"'color: dimgrey;'\"'>${y}</span>" }, legend: { fontSize: 13, cursor: "pointer", itemclick: hideUnhideDataSeries }, data: [ { type: "splineArea", showInLegend: true, name: "Salaries", markerSize: 0, xValueType: "dateTime", dataPoints: {{ salaries_data|safe }} }, { type: "splineArea", showInLegend: true, name: "Office Cost", markerSize: 0, xValueType: "dateTime", dataPoints: {{ office_cost_data|safe }} }, { type: "splineArea", showInLegend: true, name: "Entertainment", markerSize: 0, xValueType: "dateTime", dataPoints: {{ entertainment_data|safe }} }, { type: "splineArea", showInLegend: true, name: "Maintenance", markerSize: 0, xValueType: "dateTime", dataPoints: {{ maintainance_data|safe }} } ] }); chart.render(); function addSymbols(e){ var suffixes = ["", "K", "M", "B"]; var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0); if(order > suffixes.length - 1) order = suffixes.length - 1; var suffix = suffixes[order]; return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix; } 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="height: 360px; width: 100%;"></div> <script src="{% static 'canvasjs.min.js' %}"></script> </body> </html>
from django.shortcuts import render def index(request): salaries_data = [ { "x": 1609439400000, "y": 3000000 }, { "x": 1612117800000, "y": 3500000 }, { "x": 1614537000000,"y": 3000000 }, { "x": 1617215400000, "y": 3040000 }, { "x": 1619807400000, "y": 2090000 }, { "x": 1622485800000, "y": 3100000 }, { "x": 1625077800000, "y": 3020000 }, { "x": 1627756200000, "y": 3000000 }, { "x": 1630434600000, "y": 3300000 }, { "x": 1633026600000, "y": 3800000 }, { "x": 1635705000000, "y": 3890000 }, { "x": 1638297000000, "y": 3900000 } ] office_cost_data = [ { "x": 1609439400000, "y": 2010000 }, { "x": 1612117800000, "y": 1600000 }, { "x": 1614537000000, "y": 1400000 }, { "x": 1617215400000, "y": 1800000 }, { "x": 1619807400000, "y": 1800000 }, { "x": 1622485800000, "y": 2100000 }, { "x": 1625077800000, "y": 2200000 }, { "x": 1627756200000, "y": 2500000 }, { "x": 1630434600000, "y": 2300000 }, { "x": 1633026600000, "y": 2500000 }, { "x": 1635705000000, "y": 2600000 }, { "x": 1638297000000, "y": 2500000 } ] entertainment_data = [ { "x": 1609439400000, "y": 1010000 }, { "x": 1612117800000, "y": 600000 }, { "x": 1614537000000, "y": 340000 }, { "x": 1617215400000, "y": 400000 }, { "x": 1619807400000, "y": 900000 }, { "x": 1622485800000, "y": 390000 }, { "x": 1625077800000, "y": 420000 }, { "x": 1627756200000, "y": 500000 }, { "x": 1630434600000, "y": 1430000 }, { "x": 1633026600000, "y": 1230000 }, { "x": 1635705000000, "y": 830000 }, { "x": 1638297000000, "y": 630000 } ] maintainance_data = [ { "x": 1609439400000, "y": 170000 }, { "x": 1612117800000, "y": 260000 }, { "x": 1614537000000, "y": 100000 }, { "x": 1617215400000, "y": 140000 }, { "x": 1619807400000, "y": 90000 }, { "x": 1622485800000, "y": 100000 }, { "x": 1625077800000, "y": 120000 }, { "x": 1627756200000, "y": 500000 }, { "x": 1630434600000, "y": 130000 }, { "x": 1633026600000, "y": 230000 }, { "x": 1635705000000, "y": 280000 }, { "x": 1638297000000, "y": 130000 } ] return render(request, 'index.html', { "salaries_data" : salaries_data, "office_cost_data" : office_cost_data, "entertainment_data": entertainment_data, "maintainance_data": maintainance_data})
Legends can be enabled for different dataseries by setting showInLegend to true. Color & type of the legend-marker can be changed using legendMarkerColor & legendMarkerType properties.