JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/marketanalysis/scripts/clearGraph.js"></script>
<script src="http://www.lavancier.com/marketanalysis/scripts/brockDist.js"></script>
<canvas id="myCanvas" width="600" height="200" style="background-color: rgba(20,20,20,0.4)"></canvas>

JavaScript

RandomReturns(2000, 1);
function drawChart(array, fillColor, strokeColor, fontColor, fontSize, fontFamily, offset, width, height) {
    arrMinMax(array);
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    intervalDistance = ((myCanvas.width) / array.length);
    context.beginPath();
    for (x = 0; x <= array.length; x++) {
        arrHeight = myCanvas.height * (array[x] - arrMin) / graphRange;
        arrWidth = ((myCanvas.width / array.length) * x * (1 - offset)) + (offset * myCanvas.width);
        context.lineTo(arrWidth, myCanvas.height - arrHeight);
    }
    endHeight = myCanvas.height * (array[0] - arrMin) / graphRange;
    endWidth = myCanvas.width;
    context.lineTo(endWidth, myCanvas.height - endHeight);
    context.closePath();
    context.lineWidth = 1;
    context.fillStyle = fillColor;
    context.fill();
    context.strokeStyle = strokeColor;
    context.stroke();
    context.font = fontSize + " " + fontFamily;
    context.fillStyle = fontColor;
    context.fillText(Math.round(arrMax * 100) / 100, 5, 15);
    context.fillText(Math.round(arrMin * 100) / 100, 5, myCanvas.height - 5);
    context.fillText(array[0], 5, myCanvas.height - (myCanvas.height * (array[0] - arrMin) / graphRange));
}
drawChart(CumulativeReturn, 'orange', 'orange', 'white', '8pt', 'Helvetica', 0.05, 800, 400);