JSFiddle - React, Tailwind, and code Playground

Another Animated Graph

by Jennifer Perrin

HTML

<table id="testgraph" class="graphtable">
 <tr>
 <td>
 <div class="gCont">   <div class="graph"></div>   </div>
 </td>
 <td class="values">
 <label>First Number:<span style="background-color: #06F;">34</span></label>
 <label>Second Number:<span style="background-color: #C60;">20</span></label>
 <label>Third Number:<span style="background-color: #936;">15</span></label>
 <label>Fourth Number:<span style="background-color: #96C;">30</span></label>
 <label>Fifth Number:<span style="background-color: #396;">18</span></label>
 </td>
 </tr>
</table>

CSS

/* Graph 1 */
 #testgraph .graph {
 height: 170px; /* Needs to be divisible by Number of Graph lines, IE & Chrome will round down decimals in CSS. FF will use the decimals. */
 width: 300px; /* Needs to be divisible by number of Bars, if you want them to be centered nicely */
 }
 
 .graphtable td { vertical-align: top; font-family: Arial, Helvetica, sans-serif; }
 .graphtable label { display: block; width: 145px; height: 25px; font-size: 13px; padding-left: 35px; }
 .graphtable label span { display: block; width: 55px; float: right; height: 15px; width: 15px;  border: 1px solid #ccc; text-indent: -20px;  }
 .line { font-size: 10px; }
 .graph { margin-left: 35px; border: 1px solid #666; }
 .graph .line { border-bottom: 1px solid #ccc; 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: -5px; }
 .bar { position: absolute; margin-bottom: 0; }

JavaScript

/**
 * Initiates Graph Functions
 **/

function graphit($graph_id, $lines, $bar_margins, $bar_speed, $animate) {

    $v = new Object(); // create graph object
    $v.graphid = $graph_id; // id of graph container, example "graph1" or "myGraph"
    $v.values = new Array(); // array of values
    $v.heights = new Array(); // array of bar heights
    $v.colors = new Array(); // colors for bars
    $v.lines = $lines; // number of lines - keep this 10 unless you want to write a bunch more code
    $v.bm = $bar_margins; // margins between the bars
    $v.mx = 0; // highest number, or rounded up number
    $v.gw = $('#' + $v.graphid + ' .graph').width(); // graph width
    $v.gh = $('#' + $v.graphid + ' .graph').height(); // graph height
    $v.speed = $bar_speed; // speed for bar animation in milliseconds
    $v.animate = $animate; // determines if animation on bars are run, set to FALSE if multiple charts
    getValues(); // load the values & colors for bars into $v object
    graphLines(); // makes the lines for the chart
    graphBars(); // make the bars
    if ($v.animate) animateBars(0); // animate and show the bars
}

/**
 * Makes the HTML for the lines on the chart, and places them into the page.
 **/

function graphLines() {
    $r = ($v.mx < 100) ? 10 : 100; // determine to round up to 10 or 100
    $v.mx = roundUp($v.mx, $r); // round up to get the max number for lines on chart
    $d = $v.mx / $v.lines; // determines the increment for the chart line numbers    
    // Loop through and create the html for the divs that will make up the lines & numbers
    $html = "";
    $i = $v.mx;
    if ($i > 0 && $d > 0) {
        while ($i >= 0) {
            $html += graphLinesHelper($i, $v.mx);
            $i = $i - $d;
        }
    }
    $('#' + $v.graphid + ' .graph').html($html); // Put the lines into the html
    $margin = $v.gh / $v.lines; // Determine the margin size for line spacing
    $('#' + $v.graphid + ' .line').css("margin-bottom", $margin + "px"); // Add...