JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://lavancier.com/brockCharts/API/GenerateRandomDist.js"></script>
<script src="http://lavancier.com/brockCharts/API/0xcb4nT.js"></script>
<canvas id='myCanvas'></canvas>
<canvas id='myCanvas1'></canvas>
<span></span>
CSS
canvas {
position: absolute;
margin-right: auto;
margin-left: -10px;
margin-top: -10px;
display: block;
}
JavaScript
speed = 500;
number_days = 1000;
mean_increase = 0;
standard_deviation = 0.9;
array = [];
array[0] = [1];
array[1] = [1];
array[2] = [1];
array[3] = [1];
array[4] = [1];
setInterval(function () {
for (x = 0; x < 5; x++) {
for (y = 1; y < number_days; y++) {
GenerateRandomDist(standard_deviation, mean_increase);
array[x][y] = DailyReturn * array[x][y - 1];
}
}
volume = [];
for (x = 0; x < 500; x++) {
volume[x] = Math.random();
}
obj = {
'settings': {
'interaction': true,
'areaChart': {
'areaEnabled': false,
'areaColor': 'rgba(121,143,159,0.2)'
},
'padding': {
'paddingTop': 0.1
},
'line': {
'lineColor': '#798F9F',
'lineWidth': 1,
},
'axis': {
'axisFont': 'Helvetica Neue',
'axisFontSize': '8pt'
},
'title': {
'title': 'Asset Random Walk',
'titleFont': 'Helvetica Neue',
'titleFontSize': '16pt',
'paddingTop': '0.05'
},
'dimensions': {
'width': window.innerWidth,
'height': window.innerHeight
},
'canvasName': 'myCanvas',
'volume': {
'height': 0.2,
'volumeEnabled': true
},
},
'array': {
'0': array[0],
'1': array[1],
'2': array[2],
'3': array[3],
'4': array[4],
},
'volume': volume
}
drawStockChart(obj);
/*
$(document).mousemove(function () {
$("span").text(RelativeX);
});
*/
}, speed);