Python Chart with Zooming & Panning

Download Python Django Chart Samples

Example shows Python Chart with Zooming & Panning feature that gives ability to select a range of data out of large set of datapoints. Demo also includes Django MVT code that you can try out locally.

<!— index.html —>
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script src="{% static 'canvasjs.min.js' %}"></script>
<script>
    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "light2", // "light1", "dark1", "dark2"
            animationEnabled: true,
            title:{
                text: "Try Zooming and Panning"
            },
            data: [{
                type: "area",
                dataPoints: {{ datapoints | safe }}
            }]
        });
        chart.render();
    }
</script>
</head>
<body>
    <div id="chartContainer" style="width: 100%; height: 360px;"></div>
</body>
</html>                              
from django.shortcuts import render
import random

def index(request):
    datapoints = []
    count, y = 1000, 100;

    for i in range(count):
        y += round(5 + random.random() * (-5-5))
        datapoints.append({ &quot;x&quot;: i, &quot;y&quot;: y })
    
    return render(request, &quot;index.html&quot;, { &quot;datapoints&quot; : datapoints })

Chart Customizations

You can zoom along X, Y or both the axes by setting zoomType property. You can synchronize zooming & panning across multiple charts with the help of rangeChanged event.