Python Dynamic Charts using Django

Download Python Django Chart Samples

Example shows Python Dynamic Chart that gets updated every 3 seconds without refreshing the page. They are also referred to as Real-Time Charts & generally used in stock market research & analysis platforms to show live data.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
    window.onload = function () {
     
    // Initial Values
    var xValue = 0;
    var yValue = 10;
    var newDataCount = 6;
    dataPoints = [];
     
    var chart = new CanvasJS.Chart("chartContainer", {
        theme: "light2",
        exportEnabled: true,
        title: {
            text: "Python Dynamic Chart"
        },
        data: [{
            type: "spline",
            dataPoints: dataPoints
        }]
    });
     
    updateData();
     
    function addData(data) {
        if (newDataCount !== 1) {
            $.each(data, function (key, value) {
                dataPoints.push({ x: value.x, y: parseFloat(value.y) });
                xValue++;
                yValue = parseFloat(value.y);
            });
            newDataCount = 1;
        } else {
            //dataPoints.shift();
            dataPoints.push({ x: data[0].x, y: parseFloat(data[0].y) });
            xValue++;
            yValue = parseFloat(data[0].y);
        }
        chart.render();
        setTimeout(updateData, 3000);
    }
     
    function updateData() {
        $.getJSON("get_datapoints.json?xstart=" + xValue + "&ystart=" + yValue + "&length=" + newDataCount, addData);
    }
     
    }
</script>
</head>
<body>
    <div id="chartContainer" style="height: 360px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>                              
from django.shortcuts import render
from django.http import HttpResponse
import random
import json

def index(request):
    return render(request, "index.html")

def get_datapoints(request):
    default_query_params = { "xstart": 0, "ystart": 0, "length": 1 }
    query_params = { **default_query_params, **request.GET.dict() };
    y = int(query_params["ystart"]);
    datapoints = []

    for i in range(int(query_params["length"])):
        y += round(5 + random.random() * (-5-5))
        datapoints.append({ "x": (int(query_params["xstart"]) + i), "y": y})
    
    return HttpResponse(json.dumps(datapoints), content_type="application/json")

Chart Customizations

You can update any chart element by changing chart options & calling chart.render(). The thickness and dash-type of the line can be modified using lineThickness and lineDashType properties.