JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<canvas id="myCanvas" width="400" height="200" style="background-color: rgba(20,20,20,0.015)"></canvas>

JavaScript

array = [90, 100, 90, 80, 70, 80, 90, 80];

function findRange(array) {
    range = {};
    range[array] = {};


    for (x = 0; x < array.length; x++) {
        if (array[x] > range[array].max) {
            range[array].max = array[x];
        }
        if (array[x] < range[array].min) {
            range[array].min = array[x];
        }
    }
    range[array].graphRange = range[array].max - range[array].min;
}
findRange(array);
document.write(range.array.max);

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
for (x = 0; x < array.length; x++) {
    context.lineTo((x / (array.length - 1)) * canvas.width, canvas.height - array[x]);
}
context.stroke();