Python Step Line Chart using Django

Download Python Django Chart Samples

Python Step Line Chart is a line chart where the line between the datapoints are connected by horizontal & vertical lines. It's also referred to as Staircase Chart due to it's shape. Below example shows python step line chart built using Django MVT framework along with 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,
    exportEnabled: true,
    title: {
      text: "Stock Movement"
    },
    axisY: {
      title: "Stock in Hand",
      interlacedColor: "#F4F8FF",
      gridThickness: 0
    },
    data: [{
      type: "stepLine",
      xValueType: "dateTime",
      dataPoints: {{ stock_movement_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):

  stock_movement_data = [
    { "x": 1609439400000, "y": 1892 },
    { "x": 1612117800000, "y": 1426 },
    { "x": 1614537000000, "y": 1315 },
    { "x": 1617215400000, "y": 1527 },
    { "x": 1619807400000, "y": 1685 },
    { "x": 1622485800000, "y": 1523 },
    { "x": 1625077800000, "y": 1257 },
    { "x": 1627756200000, "y": 1520 },
    { "x": 1630434600000, "y": 1953 },
    { "x": 1633026600000, "y": 1738 },
    { "x": 1635705000000, "y": 1854 },
    { "x": 1638297000000, "y": 1724 }
  ]
  
  return render(request, 'index.html', { "stock_movement_data": stock_movement_data })

Chart Customizations

In the above example, interlacedColor is set to make plot area background color alternate between the interval. Thickness of the grids can be customized by setting gridThickness property. Setting it to 0, will hide the grids.