Python Candlestick Chart with JSON Data

Download Python Django Chart Samples

Example shows Python Candlestick Chart rendered using data from JSON source. Similarly you can render Charts with data from other sources like CSV or XML. 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 = {{ btc_usd_data|safe }};
    var btcUSDDps = [];

    for(var i=0; i<data.length; i++) {
      var dataDate = data[i].date;
      btcUSDDps.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: "light2",
      exportEnabled: true,
      zoomEnabled: true,
      title: {
        text: "BTC/USD"
      },
      axisX: {
        crosshair: {
          enabled: true,
          snapToDataPoint: true,
          valueFormatString: "MMM DD, YYYY"
        }
      },
      axisY: {
        prefix: "$",
        title: "Price",
        crosshair: {
          enabled: true,
          snapToDataPoint: true,
          valueFormatString: "$#,##0.00"
        }
      },
      data: [{
        type: "candlestick",
        yValueFormatString: "$#,##0.00",
        xValueFormatString: "MMM DD, YYYY",
        risingColor: "#77A034",
        fallingColor: "#C0504E",
        dataPoints: btcUSDDps
      }]
    });
    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/btc-usd-data.json").read()
    btc_usd_data = json.loads(data)
    return render(request, "index.html", { "btc_usd_data": btc_usd_data})

Chart Customizations

In the above example, color of datapoints are changed using color, fallingColor & risingColor properties to show uptrend & downtrend. Enabling crosshair helps you in understanding data in more detail.