Simple jquery Stacked Bar Chart
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 DIV
s on top of each other.
Here's an example HTML for the graph itself...:
<div id="Graphs"> <h2>How are we doing?</h2> <h4> 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
' container 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:
<style>#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; } </style>
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.