Python Line Chart with Stripline / Trendline

Download Python Django Chart Samples

Example shows Python Line Chart with stripline / trend-line. Trendlines are used to highlight or mark a certain region in the plot-area. Demo 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.     theme: "light2",
  9.     title: {
  10.       text: "Step Count Over a Week"
  11.     },
  12.     axisY: {
  13.       title: "Number of Steps",
  14.       stripLines: [{
  15.         value: 10000,
  16.         label: "Goal"
  17.       }]
  18.     },
  19.     data: [{
  20.       type: "line",
  21.       yValueFormatString: "#,### Steps",
  22.       dataPoints: {{ stepcount|safe }}
  23.     }]
  24.   });
  25.   chart.render();
  26. }
  27. </script>    
  28. </head>
  29. <body>
  30.     <div id="chartContainer" style="width: 100%; height: 360px;"></div>
  31.     <script src="{% static 'canvasjs.min.js' %}"></script>
  32. </body>
  33. </html>                              
  1. from django.shortcuts import render
  2.  
  3. def index(request):
  4.  
  5.   stepcount = [
  6.     { "y": 10560, "label":"Sunday" },
  7.     { "y": 9060, "label":"Monday" },
  8.     { "y": 6650, "label":"Tuesday" },
  9.     { "y": 8305, "label":"Wednesday" },
  10.     { "y": 8531, "label":"Thursday" },
  11.     { "y": 10150, "label":"Friday" },
  12.     { "y": 8921, "label":"Saturday" }
  13.   ]
  14.   
  15.   return render(request, 'index.html', { "stepcount": stepcount })

Chart Customizations

In line chart, dash-type of the line can be changed using lineDashType property in dataseries level. Similarly, dash-type of striplines also be changed using lineDashType property in stripline.