Example shows Python Multi Series Step Line Chart with null data. Library provides an option to connect adjacent non-null datapoints or to break whenever null datapoint is encountered. Below demo shows connecting adjacent non-null data. 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", title:{ text: "Multi-Series StepLine Chart with Null Data" }, axisX: { valueFormatString: "DD MMM" }, axisY: { lineThickness: 1 }, axisY2: { minimum:25, lineThickness: 1 }, toolTip: { shared: true }, data: [{ type: "stepLine", connectNullData: true, xValueFormatString: "MMM", xValueType: "dateTime", dataPoints: {{ datapoints1|safe }} },{ type: "stepLine", axisYType: "secondary", connectNullData: true, xValueFormatString: "MMM", xValueType: "dateTime", dataPoints: {{ datapoints2|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): datapoints1 = [ { "x": 1646073000000, "y": 15.00 }, { "x": 1648751400000, "y": 14.50 }, { "x": 1651343400000, "y": 14.00 }, { "x": 1654021800000, "y": 14.50 }, { "x": 1656613800000, "y": 14.75 }, { "x": 1659292200000, "y": "null" }, { "x": 1661970600000, "y": 15.80 }, { "x": 1664562600000, "y": 17.50 } ] datapoints2 = [ { "x": 1646073000000, "y": 41.00 }, { "x": 1648751400000, "y": 43.50 }, { "x": 1651343400000, "y": 41.00 }, { "x": 1654021800000, "y": "null" }, { "x": 1656613800000, "y": 47.55 }, { "x": 1659292200000, "y": 45.00 }, { "x": 1661970600000, "y": 40.70 }, { "x": 1664562600000, "y": 37.00 } ] return render(request, 'index.html', { "datapoints1": datapoints1, "datapoints2": datapoints2 })
connectNullData property lets you decide whether to break the line whenever null datapoint is encountered or to connect adjacent non-null datapoints. You can customize the dash-type of the line connecting adjacent non-null data using nullDataLineDashType property. Dataseries can be attached to either primary or secondary y-axis using axisYType property.