Python Multi-Series Chart using Django

Download Python Django Chart Samples

Example shows Python Multi Series Chart that lets you plot more than one dataseries in a single chart. It also includes Django MVT source code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        exportEnabled: true,
        animationEnabled: true,
        theme: "dark2",
        title: {
            text: "Website Audience Comparison"
        },
        axisX: {
            valueFormatString: "MMM"
        },
        axisY: {
            title: "User Count"
        },
        toolTip: {
            shared: true
        },
        legend: {
            cursor: "pointer",
            verticalAlign: "top",
            itemclick: toggleDataSeries
        },
        data: [{
            type: "line",
            name: "2020",
            showInLegend: true,
            yValueFormatString: "#,##0",
            dataPoints: {{ user_data_2020|safe }}
        },{
            type: "line",
            name: "2021",
            showInLegend: true,
            yValueFormatString: "#,##0",
            dataPoints: {{ user_data_2021|safe }}
        }]
    });
    chart.render();

    function toggleDataSeries(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):
    
    user_data_2020 = [
        { "label": "JAN", "y": 58200 },
        { "label": "FEB", "y": 59110 },
        { "label": "MAR", "y": 60320 },
        { "label": "APR", "y": 61440 },
        { "label": "MAY", "y": 62580 },
        { "label": "JUN", "y": 63190 },
        { "label": "JUL", "y": 64000 },
        { "label": "AUG", "y": 64290 },
        { "label": "SEP", "y": 65530 },
        { "label": "OCT", "y": 65300 },
        { "label": "NOV", "y": 65340 },
        { "label": "DEC", "y": 64530 }
    ]
    user_data_2021 = [
        { "label": "JAN", "y": 65100 },
        { "label": "FEB", "y": 66210 },
        { "label": "MAR", "y": 66540 },
        { "label": "APR", "y": 66680 },
        { "label": "MAY", "y": 67500 },
        { "label": "JUN", "y": 68850 },
        { "label": "JUL", "y": 69000 },
        { "label": "AUG", "y": 70130 },
        { "label": "SEP", "y": 71050 },
        { "label": "OCT", "y": 71500 },
        { "label": "NOV", "y": 72110 },
        { "label": "DEC", "y": 71820 }
    ]
    return render(request, 'index.html', { "user_data_2021": user_data_2021, "user_data_2020": user_data_2020 })

Chart Customizations

You can show information related to all the dataseries sharing same x-value within tooltip by setting shared property to true. Also, you can show legends for each dataseries by setting showInLegend property. Name of the dataseries can be set by using either name or legendText .