Reputation: 201

Build Jquery or CSS based chart from values of Divs on page

Is it possible to build a Jquery or CSS chart based on the values in a set of Divs on a page?

i.e. on my page I have the following

Value One = <div id="q1">21</div>
Value Two = <div id="q2">40</div>

Then from that I want to build a bar chart with value one 21 and value two 40.

Is this possible?

Upvotes: 0

Answers (3)

Reputation: 114367

You're better off giving them the same class, so you can loop through them as an array in jQuery:

<div class="bar" id="q1">21</div>
<div class="bar" id="q2">40</div>

Then:

var bars = $('.bar') - this gives you your collection

You need to determine which one is the biggest:

var maxBar = 0
for(var x=0;x<bars.length;x++) {
    if(parseInt($(bars[x]).text())>maxBar) {
       maxBar = parseInt($(bars[x]).text())
    }
}

From here, adjust the size of the bars in proportion to the largest:

for(var x=0;x<bars.length;x++) {
    mySize = parseInt($(bars[x]).text())
    $(bars[x]).css('width', parseInt(mySize/maxBar)*100)+'%')
}

Wrap your bars in a DIV and give it a width as desired.

Upvotes: 0

Reputation: 75

You can use jquery to do that:

Upvotes: 0

Reputation: 4899

Not only is it possible, there's a great plugin called jqPlot that does just this.

Upvotes: 1