Python OHLC Chart using Django

Download Python Django Chart Samples

Python OHLC (Open-High-Low-Close) Charts are typically used for showing price movements over a period of time. Below example shows Python OHLC Chart along with Django source-code that can be run locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
      theme: "light1",
      exportEnabled: true,
      zoomEnabled: true,
      title: {
        text: "ACME Corp. Stock"
      },
      axisY: {
        prefix: "$",
        title: "Price (in USD)"
      },
      data: [{
        type: "ohlc",
        yValueFormatString: "$#,##0.00",
        xValueFormatString: "MMM DD, YYYY",
        xValueType: "dateTime",
        dataPoints: {{ acme_stock_data|safe }}
      }]
    });
    chart.render();
  }
</script>
</head>
<body>
  <div id="chartContainer" style="height: 360px; width: 100%"></div>
  <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>                              
from django.shortcuts import render

def index(request):
    acme_stock_data = [
        { "x":1640975400000, "y":[22.6,23.55,22.01,22.64] },
        { "x":1643653800000, "y":[22.97,24.95,22.45,24.68] },
        { "x":1646073000000, "y":[25.37,25.8,22.16,23.59] },
        { "x":1648751400000, "y":[23.65,24.35,22.26,23.34] },
        { "x":1651343400000, "y":[23.52,24.31,22.09,22.41] },
        { "x":1654021800000, "y":[22.48,24.67,22.07,24.26] },
        { "x":1656613800000, "y":[24.46,25.11,23.61,24.12] },
        { "x":1659292200000, "y":[24.29,25.35,23.12,23.89] },
        { "x":1661970600000, "y":[23.9,25.64,22.75,25.34] },
        { "x":1664562600000, "y":[25.46,27.98,25.12,27.39] },
        { "x":1667241000000, "y":[27.64,28.72,25.81,28.17] },
        { "x":1669833000000, "y":[28.25,30.03,27.5,29.52] }
    ]

    return render(request, 'index.html', { "acme_stock_data" : acme_stock_data })

Chart Customizations

OHLC charts can be converted to candlestick charts by changing the type to "candlestick". Stiplines / Trendlines can be used to highlight or mark a certain region in the plotarea.