Simple jquery stacked bar chart

One way of doing an easy and simple stacked bar chart is to style a DIV to a desired length, then have its left-border represent the second data range. If you need more ranges you can always stack several DIVs on top of each other.

Here's example HTML for the graph itself...:


<div id="Graphs">
<h2>How are we doing?</h2>
<h4>&nbsp;Exchanges at a Glance</h4>
<p style="clear: both; padding-top: 1em;">
The below bar charts indicate, percentage-wise, the total exchange grant as compared to the allotted application grants.
</p>
</div>


And here's the annotated javascript to add the data as stacked bar charts:



// dummy example data
var exchangeGraphData = new Object([
{ allottedGrant: 70, totalGrant: 90, exchangeName: "exchangeNo1" },
{ allottedGrant: 30, totalGrant: 40, exchangeName: "exchangeNo2" }]
);

// render it
if (exchangeGraphData != false) {

// get width of the graph container. This will ensure our stacked bar charts do not exceed the container width limitation
var widthOfMainBar = Number($('#Graphs').css("width").replace("px", "")) - 16 /* 1em */;

// iterate over the example data
$.each(exchangeGraphData, function () {

// add a stacked bar chart for each 'record'
var div = document.createElement("div");
// add a class-attribute to the bar chart, so as to enable styling it
div.setAttribute('class', 'mainGraphBarDiv');

// add the bar chart to the container
$('#Graphs').append(div);

// establish fill-percentage for 'sub-bar', i.e. the second data range
var fillPercentage = (Number(this.allottedGrant) * 100) / (Number(this.totalGrant));

// translate the fill-percentage into actual pixels
var fillPixels = widthOfMainBar * (fillPercentage / 100);

// ... and apply those pixels as a left-border to the bar chart
div.style.borderLeft = fillPixels + "px solid #00f500";

// lastly, subtract the same number of pixels from the bar chart's width, or the added border will extend the bar chart unnecessarily
div.style.width = (widthOfMainBar - fillPixels) + "px";
});
}

// apply a little animation, if so desired
$('.mainGraphBarDiv').slideToggle(1500);


Below is my CSS for the 'Graphs' contaner and the 'mainGraphBarDiv' elements:


#Graphs {
position: relative;
float: left;
width: 350px;
text-align: center;
margin-top: 5em;
border: 1px dotted white;
padding: 16px;
background-color: gray;
}

.mainGraphBarDiv {
color: #0d0d0d;
text-align: center;
display: none;
height: 3em;
margin: 1em;
background-color: #92ff92;
}


The above HTML, javascript and CSS renders like the below:

How are we doing?

ERAMOB-2012-041 Exchanges at a Glance

The below bar charts indicate, percentage-wise, the total exchange grant as compared to the allotted application grants.