Below demo shows Python Multi Series Column Chart. Multi Series Charts are useful for highlighting differences between two or more sets of data. Example also includes Django source-code that you can run locally.
<!-- index.html --> {% load static %} <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, exportEnabled: true, title:{ text: "Multi-series Column Chart" }, legend: { cursor: "pointer", verticalAlign: "top", itemclick: hideUnhideDataSeries }, data: [{ type: "column", name: "DataSeries 1", showInLegend: true, dataPoints: {{ datapoints|safe }} },{ type: "column", name: "DataSeries 2", showInLegend: true, dataPoints: {{ datapoints2|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): datapoints = [ { "x": 10, "y": 171 }, { "x": 20, "y": 155}, { "x": 30, "y": 150 }, { "x": 40, "y": 165 }, { "x": 50, "y": 195 }, { "x": 60, "y": 168 }, { "x": 70, "y": 128 }, { "x": 80, "y": 134 }, { "x": 90, "y": 114} ] datapoints2 = [ { "x": 10, "y": 71 }, { "x": 20, "y": 55}, { "x": 30, "y": 50 }, { "x": 40, "y": 65 }, { "x": 50, "y": 95 }, { "x": 60, "y": 68 }, { "x": 70, "y": 28 }, { "x": 80, "y": 34 }, { "x": 90, "y": 14 } ] return render(request, 'index.html', { "datapoints" : datapoints, "datapoints2": datapoints2 })
You can use showInLegend property to show legend of each dataseries. You can also choose between different types of markers for legend using legendMarkerType property. Other commonly used customization options in multi-series chart includes shared tooltip, color, fillOpacity, etc.