Python Multi Series Spline Charts allows you to render multiple dataseries in the same chart. Example shows multi-series spline chart where each series is plotted with different color. 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", { animationEnabled: true, theme: "light2", exportEnabled: true, title:{ text: "Speed And Distance Time Graph" }, toolTip: { shared: true }, axisX: { title: "Time", suffix : " s" }, axisY: { title: "Speed", titleFontColor: "#6D78AD", suffix : " m/s", lineThickness: 1, lineColor: "#6D78AD", tickColor: "#6D78AD" }, axisY2: { title: "Distance", titleFontColor: "#51CDA0", suffix : " m", lineThickness: 1, lineColor: "#51CDA0", tickColor: "#51CDA0" }, data: [{ type: "spline", name: "speed", xValueFormatString: "#### sec", yValueFormatString: "#,##0.00 m/s", dataPoints: {{ speed_data|safe }} },{ type: "spline", axisYType: "secondary", name: "distance covered", yValueFormatString: "#,##0.# m", dataPoints: {{ distance_covered_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): speed_data = [ { "x": 0, "y": 0 }, { "x": 11, "y": 8.2 }, { "x": 47, "y": 41.7 }, { "x": 56, "y": 16.7 }, { "x": 120, "y": 31.3 }, { "x": 131, "y": 18.2 }, { "x": 171, "y": 31.3 }, { "x": 189, "y": 61.1 }, { "x": 221, "y": 40.6 }, { "x": 232, "y": 18.2 }, { "x": 249, "y": 35.3 }, { "x": 253, "y": 12.5 }, { "x": 264, "y": 16.4 }, { "x": 280, "y": 37.5 }, { "x": 303, "y": 24.3 }, { "x": 346, "y": 23.3 }, { "x": 376, "y": 11.3 }, { "x": 388, "y": 8.3 }, { "x": 430, "y": 1.9 }, { "x": 451, "y": 4.8 } ] distance_covered_data = [ { "x": 0, "y": 0 }, { "x": 11, "y": 90 }, { "x": 47, "y": 1590 }, { "x": 56, "y": 1740 }, { "x": 120, "y": 3740 }, { "x": 131, "y": 3940 }, { "x": 171, "y": 5190 }, { "x": 189, "y": 6290 }, { "x": 221, "y": 7590 }, { "x": 232, "y": 7790 }, { "x": 249, "y": 8390 }, { "x": 253, "y": 8440 }, { "x": 264, "y": 8620 }, { "x": 280, "y": 9220 }, { "x": 303, "y": 9780 }, { "x": 346, "y": 10780 }, { "x": 376, "y": 11120 }, { "x": 388, "y": 11220 }, { "x": 430, "y": 11300 }, { "x": 451, "y": 11400 } ] return render(request, 'index.html', { "speed_data" : speed_data, "distance_covered_data" : distance_covered_data })
Commonly used customization in spline charts include lineThickness, lineColor, markerSize, markerType, etc.