JavaScript Stock Charts showing Auto-Calculated Trend using Line Chart
JavaScript Stock Charts showing Auto-Calculated Trend using Line Chart - CanvasJS JavaScript StockCharts
HTML
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.stock.min.js"></script>
<div id="chartContainer" style="height: 450px; width: 100%;"></div>
JavaScript
window.onload = function () {
var dps1 = [], dps2= [];
var stockChart = new CanvasJS.StockChart("chartContainer",{
theme: "light2",
exportEnabled: true,
title:{
text:"StockChart with Date-Time Axis"
},
subtitles: [{
text: "Bitcoin Price (in USD)"
}],
charts: [{
axisX: {
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
prefix: "$"
},
data: [{
type: "candlestick",
yValueFormatString: "$#,###.##",
dataPoints : dps1
}]
}],
navigator: {
data: [{
dataPoints: dps2
}],
slider: {
minimum: new Date(2018, 04, 01),
maximum: new Date(2018, 06, 01)
}
}
});
$.getJSON("https://canvasjs.com/data/docs/btcusd2018.json", function(data) {
for(var i = 0; i < data.length; i++){
dps1.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});
dps2.push({x: new Date(data[i].date), y: Number(data[i].close)});
}
stockChart.render();
calculateTrendLine(stockChart);
});
}
/*
References:
https://math.stackexchange.com/a/204021
https://classroom.synonym.com/calculate-trendline-2709.html
*/
function calculateTrendLine(stockChart){
var a, b, c, d, e, slope, yIntercept;
var xSum = 0, ySum = 0, xySum = 0, xSquare = 0, dpsLength = stockChart.charts[0].data[0].dataPoints.length;
for(var i = 0; i < dpsLength; i++)
xySum += (stockChart.charts[0].data[0].dataPoints[i].x.getTime() * stockChart.charts[0].data[0].dataPoints[i].y[3])
a = xySum * dpsLength;
for(var i = 0; i < dpsLength; i++){
xSum += stockChart.charts[0].data[0].dataPoints[i].x.getTime();
ySum += stockChart.charts[0].data[0].dataPoints[i].y[3];
}
b = xSum * ySum;
for(var i = 0; i < dpsLength; i++)
xSquare += Math.pow(stockChart.charts[0].data[0].dataPoints[i].x.getTime(),...