JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/brockCharts/API/GenerateRandomDist.js"></script>
<script src="http://lavancier.com/brockCharts/API/LineChartPro_Compressed.js"></script>
<canvas id="aa-canvas" style='background-color: rgba(20,20,20,0.02); cursor: crosshair'></canvas>
<canvas id="residuals-canvas" style='background-color: rgba(20,20,20,0.02); cursor: crosshair'></canvas>
<p class='mouseposition' style='font-family: Helvetica, Arial; font-size: 8pt'></p>
<p class='counter'></p>

JavaScript

stdDev = 1;
meanIncrease = 0.0004;
randomWalk = [1];
randomWalkFixed = [];
randomDistributes = [];
var myVar = setInterval(function () {
    GenerateRandomDist(stdDev, meanIncrease);
    randomDistributes.push(DailyReturn - 1);
    randomWalk.push(DailyReturn * randomWalk[randomWalk.length - 1]);
    for (x = 0; x < randomWalk.length; x++) {
        randomWalkFixed[x] = Math.log10(randomWalk[x]);
    }

    settings = {
        array: randomWalk,
        width: window.innerWidth,
        height: window.innerHeight * 0.6,
        graphShift: 0,
        lineProperties: {
            lineWidth: 1,
            fillColor: "orange",
            areaChart: true,
            lineColor: "orange"
        },
        textProperties: {
            titleProperties: {
                title: "Simulated Stock Returns",
                fontSize: "12pt",
                fontFamily: "Helvetica",
                fontColor: "Black",
                titlePadding: 0.05
            },
            axisProperties: {
                axis: true,
                axisSize: "8pt",
                axisColor: "Gray",
                axisPadding: 0
            }
        },
        gridLines: false,
        logScale: false,
        canvasName: "aa-canvas"
    };

    drawLine();

    settings = {
        array: randomDistributes,
        width: window.innerWidth,
        height: window.innerHeight * 0.2,
        graphShift: 0,
        lineProperties: {
            lineWidth: 1,
            fillColor: "grey",
            areaChart: false,
            lineColor: "grey"
        },
        textProperties: {
            titleProperties: {
                title: " ",
                fontSize: "12pt",
                fontFamily: "Helvetica",
                fontColor: "Black",
                titlePadding: 0.05
            },
            axisProperties: {
                axis: false,
                axisSize: "8pt",
                axisColor: "Gray",
                axisPadding: 0
            }
       ...