JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<input id="newvalue" type="text"></input><button id="add">Add value</button>

<canvas id="objectify" width="500" height="250"></canvas>

<canvas id="graph" width="500" height="250"></canvas>

CSS

canvas {
    margin: 10px;
}

JavaScript

var records = [1, 2, 3, 6, 5, 6, 4, 7, 8, 7, 9, 12];
var options = {
    'showAxes': true,
    'lineColor': 'blue',
    'lineWeight': 10,
    'dotColor': 'white',
    'dotSize': 2
};

var records2 = [1, 8, 7, 2, 4, 6, 5, 2, 9, 3, 5, 4];
var options2 = {
    'showAxes': false,
    'lineColor': 'blue',
    'lineWeight': 1,
    'dotColor': 'purple',
    'dotSize': 3
};

function LineGraph(canvasId, data, options) {
    this.canvas = document.getElementById(canvasId);
    this.context = this.canvas.getContext("2d");
    this.data = data;
    this.options = options;
    this.graphPadding = 20;
}

LineGraph.prototype = {
    // This draws the whole graph
    draw: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.maxValue = Math.max.apply(Math, this.data);
        this.minValue = Math.min.apply(Math, this.data);
        this.horizontalSpacing = (this.canvas.width - (this.graphPadding * 2)) / (this.data.length - 1);
        if (this.options.showAxes) this.drawAxes();
        this.drawLines();
        this.drawDots();
    },
    // This function simplifies the process of drawing a single dot
    drawDot: function(xPos, yPos, radius, color) {
        this.context.beginPath();
        this.context.arc(xPos, yPos, radius, 0, 2 * Math.PI);
        this.context.fillStyle = color;
        this.context.fill();
    },
    // This draws the X and Y axes
    drawAxes: function() {
        this.context.beginPath();
        this.context.moveTo(this.graphPadding, this.graphPadding);
        this.context.lineTo(this.graphPadding, this.canvas.height - this.graphPadding);
        this.context.lineTo(this.canvas.width - this.graphPadding, this.canvas.height - this.graphPadding);
        this.context.strokeStyle = '#333';
        this.context.lineWidth = 2;
        this.context.stroke();
    },
    // This draws the lines connecting the dots
    drawLines: function() {
        this.context.beginPath();
        for (var i = 0; i <...