Python OHLC Chart with JSON Data Source

Download Python Django Chart Samples

Example shows Python OHLC Chart plotted with data from JSON source. Charts can also be plotted with data from CSV, XML, etc. Chart demo also includes Django source-code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
  window.onload = function () {
    var data = {{ msft_stock_data|safe }};
    var msftStockDps = [];

    for(var i=0; i<data.length; i++) {
      var dataDate = data[i].date;
      msftStockDps.push({ 
        x: new Date(parseInt(dataDate.split("-")[0]),parseInt(dataDate.split("-")[1]),parseInt(dataDate.split("-")[2])), 
        y: [ data[i].open, data[i].high, data[i].low, data[i].close ],
        color: data[i].open < data[i].close ? "#77A034" : "#C0504E"
      });
    }
    
    var chart = new CanvasJS.Chart("chartContainer", {
      theme: "dark2",
      exportEnabled: true,
      zoomEnabled: true,
      title: {
        text: "MSFT Stock Price"
      },
      axisX: {
        crosshair: {
          enabled: true,
          snapToDataPoint: true,
          valueFormatString: "MMM DD, YYYY"
        }
      },
      axisY: {
        prefix: "$",
        crosshair: {
          enabled: true,
          snapToDataPoint: true,
          valueFormatString: "$#,##0.00"
        }
      },
      data: [{
        type: "ohlc",
        yValueFormatString: "$#,##0.00",
        xValueFormatString: "MMM DD, YYYY",
        dataPoints: msftStockDps
      }]
    });
    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
import json
import os 

def index(request):
    dir_path = os.path.dirname(os.path.realpath(__file__))
    data = open(dir_path + "/static/msft-data.json").read()
    msft_stock_data = json.loads(data)
    return render(request, "index.html", { "msft_stock_data": msft_stock_data})

Chart Customizations

Color of datapoint can be changed by setting color property, helpful in highlighting uptrend & downtrend. Scalebreaks can be used to shrink / remove weekend data. Spacing & styling of scalebreak can be changed by setting spacing, color, lineColor, etc.