jQuery Horizontal Bar Graph

Bookmark This

Chris Missal, August 01, 2008

This one isn't so much of an article as it is some sample code to do a quick graph in jQuery. Below is the list of Big Ten schools; clicking the "Show Capacities" will reveal that school's football team's stadium's seating capacity as a horizontal bar graph and the actual capacity. I haven't used this anywhere, I just felt like toying around with some jQuery.

Big Ten Football Stadium Capacities

Show Capacities

Illinois69,249

Indiana52,180

Iowa70,585

Michigan106,201

Michigan State75,005

Minnesota64,172

Northwestern49,256

Ohio State101,568

Penn State107,282

Purdue62,500

Wisconsin80,321

Code for this example


<script type="text/javascript">

$(document).ready(function() {

    $("#big10_capacity").click(function() {

        $("div.group div em").each(function (i) {

            var capacity = Math.round($(this).text().replace(/\,/,"") / 350); // Divide by 350 to scale to desired widths.

            $(this).width(capacity).css("background-color", "#c00000");

        }).show(700);

    });

});

</script>



<style type="text/css">

.clickable { color: #d00; cursor: pointer; font-weight: bold; }

div.group { margin: 0 3ex; width: 500px; border: 1px dotted #ccc; overflow: hidden; padding: 12px; }

div.group div { border-bottom: 1px dotted #ccc; overflow: hidden; clear: left; }

div.group div * { margin: 1px 0; }

div.group div label { display: block; float: left; width: 140px; overflow: hidden; }

div.group div em { padding-left: 1em; color: #fff; display: none; float: left; }

</style>



<h3>Big Ten Football Stadium Capacities</h3>

<span id="big10_capacity" class="clickable">Show Capacities</span>

<div class="group">

    <div><label>Illinois</label><em>69,249</em></div>

    <div><label>Indiana</label><em>52,180</em></div>

    <div><label>Iowa</label><em>70,585</em></div>

    <div><label>Michigan</label><em>106,201</em></div>

    <div><label>Michigan State</label><em>75,005</em></div>

    <div><label>Minnesota</label><em>64,172</em></div>

    <div><label>Northwestern</label><em>49,256</em></div>

    <div><label>Ohio State</label><em>101,568</em></div>

    <div><label>Penn State</label><em>107,282</em></div>

    <div><label>Purdue</label><em>62,500</em></div>

    <div><label>Wisconsin</label><em>80,321</em></div>

</div>

Filed Under: JavaScript jQuery