Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Simple jquery stacked bar chart

, 11 Feb 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
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...:How are we doing? Exchang

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' 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

harleydk

Denmark Denmark
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 11 Feb 2014
Article Copyright 2014 by harleydk
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid