Python Range Spline Area Chart using Django

Download Python Django Chart Samples

Python Range Spline Area Charts are similar to Range Area Chart where high-low values are plotted over a period of time except that they are enclosed with smooth lines. Example shows Python Range Spline Area Chart along with Django source-code that you can run locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
  window.onload = function () {

    var data = {{ btc_weekly_data|safe }};

    var dataPoints = [];

    for(var i=0; i<data.length; i++) {
      dataPoints.push({ x: new Date(data[i].date), y: [data[i].low, data[i].high] });
    }

    var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      title: {
        text: "BTC Price"
      },
      axisY: {
        title: "Price in USD",
        prefix: "$"
      },
      data: [{
        type: "rangeSplineArea",
        yValueFormatString: "$#,###",
        toolTipContent: "{x}: <br/> High: {y[0]} <br/> Low: {y[1]}",
        dataPoints: dataPoints
      }]
    });
    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
import json
import os 

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

Chart Customizations

Interval of axis labels, ticks, grid-lines can be controlled by setting interval property. You can club it with intervalType to define the unit of the interval. For example: Setting interval to 6 & intervalType to month shows labels at every 6 months.