Python Dynamic / Realtime Column Chart

Download Python Django Chart Samples

Example shows Python Dynamic Column Chart that gets updated in real-time. You can observe update in color of the column whenever it crosses a threshold value. Library lets you update any property of the chart. Demo also includes Django MVT source code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
    window.onload = function () { 
      var dataPoints = {{ core_load_data|safe }};
      var chart = new CanvasJS.Chart("chartContainer", {
        title: {
          text: "CPU Usage in 8-Core Processor",
          fontFamily: "Trebuchet MS, Helvetica, sans-serif"
        },
        exportEnabled: true,
        axisY: {
          minimum: 0,
          maximum: 100,
          suffix: "%",
          stripLines: [{
            value: 50,
            label: "Medium",
            color: "#F79647",
            labelFontColor: "#F79647",
            labelBackgroundColor: "#fff"
          },{
            value: 75,
            label: "High",
            color: "#C0504E",
            labelFontColor: "#C0504E",
            labelBackgroundColor: "#fff"
          }]
        },
        data: [{
          type: "column",
          yValueFormatString: "#,##0.00\"%\"",
          indexLabel: "{y}",
          dataPoints: dataPoints
        }]
      });
     
      updateData();
      
      function addData(data) {
          dataPoints = [];
          for(var i=0; i<data.length; i++) {
              dataPoints.push({ label: data[i].label, y: parseFloat(data[i].y), color: data[i].color });      
          };
          chart.options.data[0].dataPoints = dataPoints;
          chart.render();
          setTimeout(updateData, 1500);
      }
      
      function updateData() {
          fetch("{% url 'get_datapoints' %}", {
            headers: {
              'Content-Type': 'application/json',
              'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify(dataPoints),
            method: "POST"
          }).then(function(data) {return data.json()}).then(addData);
      }

      function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i <ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') {
            c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
          }
        }
        return "";
      }
    }
</script>
</head>
<body>
    <div id="chartContainer" style="height: 360px; width: 100%;"></div>
    {% csrf_token %}
    <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):
    core_load_data = [
        { "label": "Core 1", "y": 40 },
        { "label": "Core 2", "y": 24 },
        { "label": "Core 3", "y": 75 },
        { "label": "Core 4", "y": 25 },
        { "label": "Core 5", "y": 37 },
        { "label": "Core 6", "y": 20 },
        { "label": "Core 7", "y": 70 },
        { "label": "Core 8", "y": 39 }
    ]

    for index, datapoint in enumerate(core_load_data):
        yVal = datapoint["y"]
        color = "#C0504E" if yVal > 75 else  "#F79647" if yVal >= 50 else "#9BBB58" if yVal < 50 else null;
        core_load_data[index]["color"] = color
    
    return render(request, "index.html", { "core_load_data": core_load_data})

def get_datapoints(request):
    datapoints = json.loads(request.body)
    
    for index, datapoint in enumerate(datapoints):
        deltaY = (2 + random.random() * (-2 - 2))
        yVal = min(max(deltaY + int(datapoint["y"]),0),90)
        color = "#C0504E" if yVal > 75 else  "#F79647" if yVal >= 50 else "#9BBB58" if yVal < 50 else null;
        datapoints[index] = { "label": datapoint["label"], "y": yVal, 'color': color }
    
    return HttpResponse(json.dumps(datapoints), content_type="application/json")

Chart Customizations

In the above example, color of the datapoint is updated dynamically by changing color property. Chart elements can also be updated dynamically using set method & get method lets you know the current value of any property, that can be used for dynamic calculation / manipulation.