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/StockChartProv2.js"></script>
<canvas id='myCanvas'></canvas>
<canvas id='myCanvas1'></canvas>
<div>Leverage</div>
<div style='top: 60px'>Number Days</div>
<input id='input'></input>
<input id='number_days' style='top: 60px'></input>
<div class='container'>
<span class='normal' style='font-weight: 400'>Asset: <span class='normal-insert'></span></span>
    <br>
<span class='leverage' style='font-weight: 400'>Leverage Fund: <span class='leverage-insert'></span>

    <br>
<span class='normal-wins' style='font-weight: 400'>Normal Wins: <span class='normal-wins-insert'></span></span>
    <br>
<span class='leveraged-wins' style='font-weight: 400'>Leverage Wins: <span class='leveraged-wins-insert'></span></span>
    <br>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300|Roboto:400,300,100,500|Dancing+Script:400,700);
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  canvas {
      margin-top: -5px;
      position: absolute;
      margin-left: -5px;
      width: 100%; 
      height: 100vh;
  }
  span {
      font-family: roboto, helvetica neue, sans-serif;
      font-weight: 100;
      font-size: 12pt;
  }
  input {
      position: absolute;
      top: 10px;
      left: 143px;
    width: 170px;
    height: 40px;
    background-color: rgba(20, 20, 20, 0.4);
    border: none;
    outline: none;
    font-family: Roboto, Helvetica Neue, sans-serif;
    font-weight: 100;
    color: white;
    transition: all 1s ease;
    text-align: center;
    font-size: 16pt;
    display: block;
  }
  input:hover {
     color: orange;
     background-color: rgba(20,20,20,0.7);
  }
  div {
      position: absolute;
      top: 10px;
      left: 10px;
    width: 110px;
    background-color: rgba(255, 165, 0, 0.8);
    border: none;
    outline: none;
    font-family: Roboto, Helvetica Neue, sans-serif;
    font-weight: 100;
    color: white;
    transition: all 1s ease;
    text-align: center;
    font-size: 12pt;
    display: block;
    padding: 11.7px;
  }
  .container {
      top: 102px;
      left: 10px;
      width: 285px;
      background-color: rgba(20,20,20,0.7);
      position: absolute;
      padding: 10px;
      text-align: left;
   }

JavaScript

counter = 0;
normal_wins = 0;
leveraged_wins = 0;
$("#myCanvas1").click(function () {
    leverage_output = $("#input").val();
    number_days = $("#number_days").val();
    normal = [10000];
    leverage = [10000];
    for (x = 1; x < number_days; x++) {
        GenerateRandomDist(1, 0);
        normal[x] = normal[x - 1] * DailyReturn;
        leverage[x] = leverage[x - 1] * (DailyReturn * leverage_output - (leverage_output - 1));
    }
    obj = {
        'settings': {
            'interaction': true,
                'areaChart': {
                'areaEnabled': false,
                    'areaColor': 'rgba(121,143,159,0.2)'
            },
                'padding': {
                'paddingTop': 0.1
            },
                'line': {
                'lineColor': '#798F9F',
                    'lineWidth': 1,
                    'colors': {
                    '0': '#798F9F',
                        '1': '#B4D6D3',
                        '2': '#F2C460',
                        '3': '#F1A0C3',
                        '4': '#A0C3F1',
                        '5': '#CFEC7F'
                }
            },
                'axis': {
                'axisFont': 'Helvetica Neue',
                    'axisFontSize': '8pt'
            },
                'title': {
                'title': 'Normal (Dark) vs. 3x Leverage (Light)',
                    'titleFont': 'Helvetica Neue',
                    'titleFontSize': '16pt',
                    'paddingTop': '0.05'
            },
                'dimensions': {
                'width': window.innerWidth,
                    'height': window.innerHeight
            },
                'canvasName': 'myCanvas',
                'volume': {
                'height': 0.2,
                    'volumeEnabled': false
            }
        },
            'array': {
            '0': normal,
                '1': leverage
        }
    };
    drawStockChart(obj);
    counter++;

   ...