Python Multi Series Step Line Chart using Django

Download Python Django Chart Samples

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.

  1. <!-- index.html -->
  2. {% load static %} 
  3. <html>
  4. <head>
  5. <script>
  6. window.onload = function () {
  7.   var chart= new CanvasJS.Chart("chartContainer", {
  8.     animationEnabled: true,
  9.     theme: "light2",
  10.     title:{
  11.       text: "Multi-Series StepLine Chart with Null Data"
  12.     },
  13.     axisX: {
  14.       valueFormatString: "DD MMM"
  15.     },
  16.     axisY: {
  17.     	lineThickness: 1
  18.     },
  19.     axisY2: {
  20.       minimum:25,
  21.       lineThickness: 1
  22.     },
  23.     toolTip: {
  24.       shared: true
  25.     },
  26.     data: [{
  27.       type: "stepLine",
  28.       connectNullData: true,
  29.       xValueFormatString: "MMM",
  30.       xValueType: "dateTime",
  31.       dataPoints: {{ datapoints1|safe }}
  32.     },{
  33.       type: "stepLine",  
  34.       axisYType: "secondary",
  35.       connectNullData: true,
  36.       xValueFormatString: "MMM",
  37.       xValueType: "dateTime",
  38.       dataPoints: {{ datapoints2|safe }}
  39.     }]
  40.   });
  41.   chart.render();
  42. }
  43. </script>    
  44. </head>
  45. <body>
  46.     <div id="chartContainer" style="width: 100%; height: 360px;"></div>
  47.     <script src="{% static 'canvasjs.min.js' %}"></script>
  48. </body>
  49. </html>                              
  1. from django.shortcuts import render
  2.  
  3. def index(request):
  4.  
  5.   datapoints1 = [
  6.     { "x": 1646073000000, "y": 15.00 },
  7.     { "x": 1648751400000, "y": 14.50 },
  8.     { "x": 1651343400000, "y": 14.00 },
  9.     { "x": 1654021800000, "y": 14.50 },
  10.     { "x": 1656613800000, "y": 14.75 },
  11.     { "x": 1659292200000, "y": "null"  },
  12.     { "x": 1661970600000, "y": 15.80 },
  13.     { "x": 1664562600000, "y": 17.50 }
  14.   ]
  15.  
  16.   datapoints2 = [
  17.     { "x": 1646073000000, "y": 41.00 },
  18.     { "x": 1648751400000, "y": 43.50 },
  19.     { "x": 1651343400000, "y": 41.00 },
  20.     { "x": 1654021800000, "y": "null"  },
  21.     { "x": 1656613800000, "y": 47.55 },
  22.     { "x": 1659292200000, "y": 45.00 },
  23.     { "x": 1661970600000, "y": 40.70 },
  24.     { "x": 1664562600000, "y": 37.00 }
  25.   ]
  26.   
  27.   return render(request, 'index.html', { "datapoints1": datapoints1, "datapoints2": datapoints2 })

Chart Customizations

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.