JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<canvas id="graph" width="960" height="520"></canvas>

CSS

body{
    background: url(http://pseudoexchange.com/static/images/green.jpg) top center repeat;
}
canvas{
    border:1px solid #fff;
    margin:50px;
}

JavaScript

function drawGraph(data){
    var canvas = document.getElementById('graph');
    if(canvas.getContext){
        var context = canvas.getContext('2d'),
            width = canvas.width,
            height = canvas.height,
            elements = data.length,
            modifier = 0.5;
        
        // Set our Scale
        var largest=0;
        for(var i in data){
            if(data[i][1]>largest){ largest = data[i][1];}            
        }
        var scale = height/largest
        console.log('Scale: '+scale );
        
        // Draw Bars
        for(var i in data){
            
            var horiz = Math.floor((height/elements)*i);
            var vert = Math.floor((width/elements)*i);
            
            if(i!=0){
                context.strokeStyle = "rgba(255,255,255,0.1)";
                context.lineWidth = 1;
                
                // Horizantal Lines
                context.moveTo(0,horiz+modifier);
                context.lineTo(width,horiz+modifier);
                context.stroke();
                
                // Vertical Lines
                context.moveTo(vert+modifier,0);
                context.lineTo(vert+modifier,height);
                context.stroke();
            }
        }
        
        
        // Draw Lines
        var prevPoint = 0;
        context.strokeStyle = "#ffffff";
        for(var i in data){
    
            var vert = Math.floor((width/elements)*i);
            
            //console.log(vert+modifier+' '+data[i][1]);
            
            // Graph
            
            
            if(prevPoint!=false){
                context.lineTo(     (vert+modifier),     prevPoint);
                
                  context.stroke();
                
                 console.log('lineto: '+ (Math.floor((width/elements)*1)+modifier)+', '+(prevPoint));
                
                
            }
                prevPoint = height - (data[i][1]*scale);
            
            
            
    ...