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")
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.