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

Question

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?

Yes, it's possible. Is that your question? What do you need help with? — Intelekshual, Mar 07 '11 at 20:49
I may not have asked the question correctly - the values are dynamic. that is they will be different every time the page is loaded - how do I call the DIV value in the Javascript? — jeremy, Mar 07 '11 at 20:53
Doesn't this question answer the same thing? [link](http://stackoverflow.com/questions/1223537/pie-chart-with-jquery) — Daniel Higueras, Mar 07 '11 at 20:53

score 1 · Accepted Answer · answered Mar 07 '11 at 20:49

1

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

answered Mar 07 '11 at 20:49

Jake

Thanks Jake, I may not have asked the question correctly - the values are dynamic. that is they will be different every time the page is loaded - how do I call the DIV value in the Javascript? – jeremy Mar 07 '11 at 20:52
If the page is being reloaded then the Javascript will rerun and update the chart automatically. To get the value from a div in jQuery, do `var one = $('#q1').html()`. – Jake Mar 07 '11 at 20:55

score 0 · Answer 2 · answered Mar 07 '11 at 20:50

0

You can use jquery to do that:

answered Mar 07 '11 at 20:50

Rob Lee

score 0 · Answer 3 · answered Mar 07 '11 at 21:00

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.

OK that all makes sense to me, and thanks for that - however which plugin do I use for that? or do I use a plugin...sorry absolute noob here... :( — jeremy, Mar 07 '11 at 21:10

3 Answers3