Python Chart with Multiple Axes

Download Python Django Chart Samples

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 })

Chart Customizations

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.