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({ "x": i, "y": y }) return render(request, "index.html", { "datapoints" : datapoints })
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.