Example shows Python Candlestick Chart combined with Line Chart. Line & Column Charts are generally used as technical indicators when they are used in financial charts. 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 ] }); } var chart = new CanvasJS.Chart("chartContainer", { zoomEnabled: true, title: { text: "Technical Indicators", fontFamily: "Trebuchet MS, Helvetica, sans-serif" }, subtitles: [{ text: "Exponential Moving Average", fontFamily: "Trebuchet MS, Helvetica, sans-serif" }], axisX: { crosshair: { enabled: true, snapToDataPoint: true, valueFormatString: "MMM DD, YYYY" } }, axisY: { prefix: "$", title: "Price", crosshair: { enabled: true, snapToDataPoint: true, valueFormatString: "$#,##0.00", } }, toolTip: { shared: true }, legend: { cursor: "pointer", itemclick: toggleDataSeries, dockInsidePlotArea: true }, data: [{ type: "candlestick", name: "Bitcoin Price", showInLegend: true, yValueFormatString: "$#,##0.00", xValueFormatString: "MMM DD, YYYY", dataPoints: btcUSDDps }] }); chart.render(); var ema = calculateEMA(btcUSDDps, 7); chart.addTo("data", {type: "line", name: "EMA", showInLegend: true, yValueFormatString: "$#,###.##", dataPoints: ema}); function calculateEMA(dps,count) { var k = 2/(count + 1); var emaDps = [{x: dps[0].x, y: dps[0].y.length ? dps[0].y[3] : dps[0].y}]; for (var i = 1; i < dps.length; i++) { emaDps.push({x: dps[i].x, y: (dps[i].y.length ? dps[i].y[3] : dps[i].y) * k + emaDps[i - 1].y * (1 - k)}); } return emaDps; } function toggleDataSeries(e) { if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } e.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-weekly-2021.json").read() btc_usd_data = json.loads(data) return render(request, "index.html", { "btc_usd_data": btc_usd_data})
You can use Line or Column Chart to show technical indicators in financial charts. You can hide / unhide dataseries on legend click by changing visible property.