Example shows Python Chart with Multiple Axes. Multiple axis makes it easier to compare data with different range of values in the same graph.
<!-- index.html --> {% load static %} <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { theme: "light1", animationEnabled: true, exportEnabled: true, title:{ text: "Gravity Vs Escape Velocity of Planets" }, axisX: { reversed: true }, axisY: { title: "Escape Velocity (km/s)", titleFontColor: "#6D78AD", lineColor: "#6D78AD", labelFontColor: "#6D78AD", tickColor: "#6D78AD" }, axisY2: { title: "Gravity (m/s²)", includeZero: true, titleFontColor: "#51CDA0", lineColor: "#51CDA0", labelFontColor: "#51CDA0", tickColor: "#51CDA0" }, toolTip: { shared: true }, legend: { cursor: "pointer", itemclick: function (e) { if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } e.chart.render(); } }, data: [{ type: "bar", name: "Gravity", axisYType: "secondary", showInLegend: true, color: "#51CDA0", yValueFormatString: "#,##0.0 m/s²", dataPoints: {{ gravity_data | safe }} },{ type: "bar", name: "Escape Velocity", axisYType: "primary", showInLegend: true, color: "#6D78AD", yValueFormatString: "#,##0.0 km/s", dataPoints: {{ escape_velocity_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): gravity_data = [ { "label": "Mercury", "y": 3.7 }, { "label": "Venus", "y": 8.9 }, { "label": "Earth", "y": 9.8 }, { "label": "Mars", "y": 3.7 }, { "label": "Jupiter", "y": 23.1 }, { "label": "Saturn", "y": 9 }, { "label": "Uranus", "y": 8.7 }, { "label": "Neptune", "y": 11 } ] escape_velocity_data = [ { "label": "Mercury", "y": 4.3 }, { "label": "Venus", "y": 10.4 }, { "label": "Earth", "y": 11.2 }, { "label": "Mars", "y": 5 }, { "label": "Jupiter", "y": 59.5 }, { "label": "Saturn", "y": 35.5 }, { "label": "Uranus", "y": 21.3 }, { "label": "Neptune", "y": 23.5 } ] return render(request, 'index.html', { "gravity_data": gravity_data, "escape_velocity_data": escape_velocity_data })
You can attach dataseries to either primary or secondary by using axisXType & axisYType properties. You can even have multiple axes on the same side of the chart & attach different series using axisXIndex & axisYIndex properties.