JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/brockCharts/API/GenerateRandomDist.js"></script>
<canvas id="myHistogram" style='background-color: rgba(255,255,255,0.90)'></canvas>
<p class='hist'></p>

JavaScript

function drawHistogram() {
    var array = settings.array;
    var canvas = document.getElementById(settings.canvasName);
    var context = canvas.getContext('2d');
    var width = settings.width;
    var height = settings.height;
    var paddingBottom = settings.paddingBottom;
    var XSidePadding = settings.textProperties.axisProperties.XSidePadding;
    var binningInterval = settings.binningInterval;
    var binSpacing = settings.binSpacing;
    var paddingTop = settings.paddingTop;
    var fillColor = settings.lineProperties.fillColor;
    var title = settings.textProperties.titleProperties.title;
    var fontSize = settings.textProperties.titleProperties.fontSize;
    var fontFamily = settings.textProperties.titleProperties.fontFamily;
    var fontColor = settings.textProperties.titleProperties.fontColor;
    var titlePadding = settings.textProperties.titleProperties.titlePadding;
    var axis = settings.textProperties.axisProperties.axis;
    var axisSize = settings.textProperties.axisProperties.axisSize;
    var axisColor = settings.textProperties.axisProperties.axisColor;
    canvas.width = width;
    canvas.height = height;

    function ArrayMinMax(array) {
        max = -99999999999;
        min = 99999999999;
        for (x = 0; x < array.length; x++) {
            if (array[x] > max) {
                max = array[x];
            }
            if (array[x] < min) {
                min = array[x];
            }
        }
    }
    ArrayMinMax(array);
    distribution = [];
    z = 0;
    for (x = min; x <= max + binningInterval; x = x + binningInterval) {
        counter = 0;
        for (y = 0; y < array.length; y++) {
            if (array[y] < x) {
                counter++;
            }
        }
        distribution[z] = counter;
        z++;
    }
    actualDistribution = [];
    for (x = 1; x < distribution.length; x++) {
        actualDistribution[x - 1] = distribution[x] - distribution[x - 1];
    }

    distMax = -9999999999;
    for (x = 0;...