JSFiddle - React, Tailwind, and code Playground

Skills Graph - Needs Work

by Jennifer Perrin

HTML

<table class="graphtable" id="skill-rating">
<tbody>
<tr>
    <td>
        <div class="graph">
            <div class="line" style="margin-bottom: 40px;">
                <span>100</span>
            </div>
            <div class="line" style="margin-bottom: 40px;">
                <span>80</span>
            </div>
            <div class="line" style="margin-bottom: 40px;">
                <span>60</span>
            </div>
            <div class="line" style="margin-bottom: 40px;">
                <span>40</span>
            </div>
            <div class="line" style="margin-bottom: 40px;">
                <span>20</span>
            </div>
            <div class="line" style="margin-bottom: 40px;">
                <span>0</span>
            </div>
        </div>
        
        <div style="height: 190px; margin-top: -191px; background-color: rgb(231, 75, 78); margin-left: 37.5px; width: 55px;" id="skill-rating_bar_0" class="bar">
            &nbsp;
        </div>
        <div style="height: 130px; margin-top: -131px; background-color: rgb(247, 152, 32); margin-left: 97.5px; width: 55px;" id="skill-rating_bar_1" class="bar">
            &nbsp;
        </div>
        <div style="height: 160px; margin-top: -161px; background-color: rgb(107, 191, 224); margin-left: 157.5px; width: 55px;" id="skill-rating_bar_2" class="bar">
            &nbsp;
        </div>
        <div style="height: 170px; margin-top: -171px; background-color: rgb(169, 206, 34); margin-left: 217.5px; width: 55px;" id="skill-rating_bar_3" class="bar">
            &nbsp;
        </div>
        <div style="height: 100px; margin-top: -101px; background-color: rgb(51, 51, 51); margin-left: 277.5px; width: 55px;" id="skill-rating_bar_4" class="bar">
            &nbsp;
        </div>   
    </td>
    <td class="values">
        <label class="jquery">Jquery<span class="jquery">95</span></label>
        <label class="css3">Css3<span class="css3">65</span></label>
        <label class="html5">Html5<span...

CSS

#skill-rating {
    margin-bottom: 25px;
    margin-top: 15px;
}

.graphtable {
    clear: both;
    float: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

#skill-rating {margin-top:15px; margin-bottom:25px;}
    #skill-rating .graph { height: 200px; width: 300px; margin-right:10px; overflow:hidden;}
    .graph {clear:both; float:none;}
    .graphtable {clear:both; float:none;}
    .graph:hover, .graphtable label:hover {cursor:pointer;}
    .graphtable td { vertical-align: top; color:#666;}
    .graphtable label { font-size: 12px; padding:2px 10px; color: #FFF; margin-bottom:10px; height:25px; display: block; line-height:24px;}
    .graphtable label span { display:none;}
    .line { font-size: 10px; }
    .values {position: absolute; display:block; margin-left:10px;}
    
    .graph { margin-left: 35px; border: 1px dotted #EFEFEF; }
    .graph .line { border-bottom: 1px dotted #EFEFEF; margin-top: -1px; }
    .graph .fix  { border-bottom: none;}
    .graph .line span { position: absolute; display: block; margin-left: -40px; width: 35px; text-align: right; margin-top: 0px; font-size:11px;}
    .graph .line span:last-child{margin-top:0px;}
    .bar { position: absolute; margin-bottom: 0px; }
    
    .jquery {background-color: #E74B4E;}
    .css3 {background-color: #F79820;}
    .html5 {background-color: #6BBFE0;}
    .php {background-color: #A9CE22;}
    .mysql {background-color: #333333;}

JavaScript

/**
 * Initiates Graph Functions
* See: http://jsfiddle.net/jenniferperrin/ntAbz/
 **/

function egraph($graph_id, $lines, $bar_margins, $bar_speed, $animate) {
    var self = this; // create graph object
    var graphid = $graph_id; // id of graph container, example "graph1" or "myGraph"
    var values = new Array(); // array of values
    var heights = new Array(); // array of bar heights
    var colors = new Array(); // colors for bars
    var lines = $lines; // number of lines - keep this 10 unless you want to write a bunch more code
    var bm = $bar_margins; // margins between the bars
    var mx = 0; // highest number, or rounded up number
    var gw = $('#' + graphid + ' .graph').width(); // graph width
    var gh = $('#' + graphid + ' .graph').height(); // graph height
    var speed = $bar_speed; // speed for bar animation in milliseconds
    var animate = ($animate != undefined && $animate == true) ? true : false; // determines if animation on bars are run, set to FALSE if multiple charts
    /**
     * Gets the values & colors from the HTML <labels> and saves them into $v ohject
     **/
    var getValues = function() {
        var lbls = $('#' + graphid + ' .values span');
        // loop through
        for (i = 0; i <= lbls.length - 1; i++) {
            var vals = parseFloat(lbls.eq(i).text());
            colors.push(lbls.eq(i).css('background-color'));
            mx = (vals > mx) ? vals : mx;
            values.push(vals);
        }
    }
    /**
     * A Simple Round Up Function
     **/
    var roundUp = function(num, rr) {
        return ((num % rr) > 0) ? num - (num % rr) + rr : num;
    }
    /**
     * Makes the HTML for the lines on the chart, and places them into the page.
     **/
    var graphLines = function() {
        var r = (mx < 100) ? 10 : 100; // determine to round up to 10 or 100
        mx = roundUp(mx, r); // round up to get the max number for lines on chart
        var d = mx / lines; // determines the increment for the...