Forums

Progress pie with field data

sortby 01 Jul, 2015
Hello,
I'm trying to build some graphic response to user's submitted data on the form.
I have been using pChart integration since 2-3 days and it works fine but is quite complicated for my basic needs.

I would display a value between 1 and 10 in a graphic way like a progress pie or a progress chart, passing value of my {field} directly to the render script (jquery? motools? php?) of a progress bar/pie.

In theory seems quite straightforward but in practice is not clear in my mind how to solve this without spending too much hrs in wrong directions..
Can you point me to some solutions and practical example?

Thanks so much! πŸ˜‰
sortby 02 Jul, 2015
Small updata by myself, I have solved the topic using css and html bar.
very simple but very powerful!
http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55

You can - load css - and - load custom code- with small html where you are going to pass directly your {field ID}
that's all!πŸ™‚
-----------------------------------------------------------------------------------------------------
Now I'm going to face the next level....and I need your help
I would pass a value that is the sum of different field ID values.
How to do a sum of different values without save on the db? using php or js?

Any help much appreciate! πŸ˜‰
GreyHead 02 Jul, 2015
Hi sortby,

FYI there is Progress Bar widget in CFv5 - it's intended I think as a static bar for multi-page forms but you could animate it by using JavaScript to set the CSS.

jQuery also has one here that is set up for animation; and prettier ones here.

Please say more about "a sum of different values" - what exactly do you need to calculate?

Bob
sortby 02 Jul, 2015
Ok Bob let me explain...I need a sum of values (fields value)
Now I have find and easy and elegant solution to display a progress bar using CSS and a small of html.
here the code:

CSS STYLE (loaded as load css code)
.graph { 
      	position: relative; /* IE is dumb */
        width: 200px; 
        border: 1px solid #B1D632; 
        padding: 2px; 
    }
    .graph .bar { 
        display: block;
        position: relative;
        background: #B1D632; 
        text-align: center; 
        color: #333; 
        height: 2em; 
        line-height: 2em;            
    }
    .graph .bar span { position: absolute; left: 1em; }

HTML(loaded as custom code)
<div class="graph">
    <strong class="bar" style="width:<?php echo "{radio2}"?>%;"><?php echo "{radio2}"?>%</strong>
</div>


As you can see in the bar class i have passed (using sunday's php) the dinamic value of a {radio2}.
And it WORKS very nice, so it read and render a dinamic value (in this case of radio2)

But what if i need to pass a SUM (+) of 2 fields (example radio2 and radio3)???

I have tried this but it doesn't work:

<?php
function sum($x, $y) {
    $z = $x + $y;
    return $z;
}
?>

<div class="graph">
    <strong class="bar" style="width:<?php echo "sum({radio2}, {radio3})"?>%;"><?php echo "sum({radio2}, {radio3})"?>%</strong>
</div>


Many thanks for your review! πŸ˜‰
sortby 02 Jul, 2015
EUREKA!!!
I have solved in this way:


<?php
$z= $form->data['radio2'] + $form->data['radio3'];
?>

<div class="graph">
    <strong class="bar" style="width:<?php echo "$z" ?>%;"><?php echo "$z"?>%</strong>
</div>


If there are other options I'm open to considerπŸ™‚
This topic is locked and no more replies can be posted.