Re: cfchart bar graph

2008-06-06 Thread Barney Boisvert 
I use HTML/CSS to make such charts on the fly.  Here's the markup
(change the percentage to whatever you want to show):

div class=progressBar align=left
div class=progressWrapper
div class=progressBarDisplay style=width:75%/div
/div
/div

The CSS looks like this:

..progressBar {
background-color: #EFEFEF;
border: 1px solid black;
height: 15px;
padding: 0px;
text-align: left;
width: 90%;
}
..progressWrapper {
position: relative;
}
..progressBarDisplay {
background-color: #66CC33;
height: 15px;
margin: 0px;
padding: 0px;
position: absolute;
text-align: left;
top: 0px;
z-index: 75;
}

This example is for a progress bar where the bar width is updated with
javascript as stuff happens, but you get the idea.

cheers,
barneyb


On Fri, Jun 6, 2008 at 9:16 AM, Phillip Vector
[EMAIL PROTECTED] wrote:
 Hi. I'm looking to make a simple bar that goes horozinitial from 0% to
 100% with 1 break inbetween..

 Kind of like this..

 0%   75%  100%
 [X ]

 I looked at cfchart and I couldn't see how to get the single bar (much
 less have a break point)..

 Am I missing something? I push in the right direction would be appricated.

 

~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to 
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k

Archive: 
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:306971
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: 
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4

RE: cfchart bar graph

2008-06-06 Thread Brad Wood 
You know, I feel kind of irresponsible just dumping some code on you,
but I have a version of a DHTML progress bar I found somewhere and
modified the heck out of.  You would need to dig through the source, but
here is an example page that demos several of them.  They can be updated
via JavaScript after the page loads.  Maybe it would give you a starting
point. (It's not 100% in Firefox)

http://www.bradwood.com/test/

-Original Message-
From: Barney Boisvert [mailto:[EMAIL PROTECTED] 
Sent: Friday, June 06, 2008 11:31 AM
To: CF-Talk
Subject: Re: cfchart bar graph

I use HTML/CSS to make such charts on the fly.  Here's the markup
(change the percentage to whatever you want to show):

~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to 
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k

Archive: 
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:306972
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4

Re: cfchart bar graph

2008-06-06 Thread Phillip Vector 
Ok... This looks promising.. Where would I put in the value of the bar?

I.e. if I have a max of 6 records and 2 are filled, where would I put the..

1) MaxRecords
2) FilledRecords

Is the z index on the progressbardisplay class the percentage it is
filled or is that the style tag for it on the div code?

On Fri, Jun 6, 2008 at 9:31 AM, Barney Boisvert [EMAIL PROTECTED] wrote:
 I use HTML/CSS to make such charts on the fly.  Here's the markup
 (change the percentage to whatever you want to show):

 div class=progressBar align=left
div class=progressWrapper
div class=progressBarDisplay style=width:75%/div
/div
 /div

 The CSS looks like this:

 ..progressBar {
background-color: #EFEFEF;
border: 1px solid black;
height: 15px;
padding: 0px;
text-align: left;
width: 90%;
 }
 ..progressWrapper {
position: relative;
 }
 ..progressBarDisplay {
background-color: #66CC33;
height: 15px;
margin: 0px;
padding: 0px;
position: absolute;
text-align: left;
top: 0px;
z-index: 75;
 }

 This example is for a progress bar where the bar width is updated with
 javascript as stuff happens, but you get the idea.

 cheers,
 barneyb


 On Fri, Jun 6, 2008 at 9:16 AM, Phillip Vector
 [EMAIL PROTECTED] wrote:
 Hi. I'm looking to make a simple bar that goes horozinitial from 0% to
 100% with 1 break inbetween..

 Kind of like this..

 0%   75%  100%
 [X ]

 I looked at cfchart and I couldn't see how to get the single bar (much
 less have a break point)..

 Am I missing something? I push in the right direction would be appricated.



 

~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to 
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k

Archive: 
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:306973
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4

Re: cfchart bar graph

2008-06-06 Thread Phillip Vector 
I like this one allot... then I looked at the source code and almost choked.. :)

I'll work on it and see what I can come up with. Thanks. :)

On Fri, Jun 6, 2008 at 9:42 AM, Brad Wood [EMAIL PROTECTED] wrote:
 You know, I feel kind of irresponsible just dumping some code on you,
 but I have a version of a DHTML progress bar I found somewhere and
 modified the heck out of.  You would need to dig through the source, but
 here is an example page that demos several of them.  They can be updated
 via JavaScript after the page loads.  Maybe it would give you a starting
 point. (It's not 100% in Firefox)

 http://www.bradwood.com/test/

 -Original Message-
 From: Barney Boisvert [mailto:[EMAIL PROTECTED]
 Sent: Friday, June 06, 2008 11:31 AM
 To: CF-Talk
 Subject: Re: cfchart bar graph

 I use HTML/CSS to make such charts on the fly.  Here's the markup
 (change the percentage to whatever you want to show):

 

~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to 
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k

Archive: 
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:306974
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: 
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4

RE: cfchart bar graph

2008-06-06 Thread Brad Wood 
Lol... I know-- it's one of those things I messed around with once, but
I'm kind of afraid to admit it now.  :)

Let me know if you need any help.

~Brad

-Original Message-
From: Phillip Vector [mailto:[EMAIL PROTECTED] 
Sent: Friday, June 06, 2008 11:47 AM
To: CF-Talk
Subject: Re: cfchart bar graph

I like this one allot... then I looked at the source code and almost
choked.. :)

~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to 
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k

Archive: 
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:306976
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4

Re: cfchart bar graph

2008-06-06 Thread Barney Boisvert 
You want to set the CSS style property of the div with class
progressBarDisplay.  In your case, something like this:

 style=width:#filledRecords / maxRecords * 100#%...

My example just had it hard coded at 75%.

cheers,
barneyb

On Fri, Jun 6, 2008 at 9:43 AM, Phillip Vector
[EMAIL PROTECTED] wrote:
 Ok... This looks promising.. Where would I put in the value of the bar?

 I.e. if I have a max of 6 records and 2 are filled, where would I put the..

 1) MaxRecords
 2) FilledRecords

 Is the z index on the progressbardisplay class the percentage it is
 filled or is that the style tag for it on the div code?

 On Fri, Jun 6, 2008 at 9:31 AM, Barney Boisvert [EMAIL PROTECTED] wrote:
 I use HTML/CSS to make such charts on the fly.  Here's the markup
 (change the percentage to whatever you want to show):

 div class=progressBar align=left
div class=progressWrapper
div class=progressBarDisplay style=width:75%/div
/div
 /div

 The CSS looks like this:

 ..progressBar {
background-color: #EFEFEF;
border: 1px solid black;
height: 15px;
padding: 0px;
text-align: left;
width: 90%;
 }
 ..progressWrapper {
position: relative;
 }
 ..progressBarDisplay {
background-color: #66CC33;
height: 15px;
margin: 0px;
padding: 0px;
position: absolute;
text-align: left;
top: 0px;
z-index: 75;
 }

 This example is for a progress bar where the bar width is updated with
 javascript as stuff happens, but you get the idea.

 cheers,
 barneyb

-- 
Barney Boisvert
[EMAIL PROTECTED]
http://www.barneyb.com/

Got Gmail? I have 100 invites.

~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to 
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k

Archive: 
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:306978
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4

Re: cfchart bar graph

2008-06-06 Thread Phillip Vector 
Sure..

myProgBar5.setBar(0);   //set the progress bar to indicate a
progress of 50%

I see no function called setBar... Where is it?

i = 1;
j=1;
r=0;

What do these control?

On Fri, Jun 6, 2008 at 9:49 AM, Brad Wood [EMAIL PROTECTED] wrote:
 Lol... I know-- it's one of those things I messed around with once, but
 I'm kind of afraid to admit it now.  :)

 Let me know if you need any help.

 ~Brad

 -Original Message-
 From: Phillip Vector [mailto:[EMAIL PROTECTED]
 Sent: Friday, June 06, 2008 11:47 AM
 To: CF-Talk
 Subject: Re: cfchart bar graph

 I like this one allot... then I looked at the source code and almost
 choked.. :)

 

~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to 
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k

Archive: 
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:306979
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4

RE: cfchart bar graph

2008-06-06 Thread Brad Wood 
If you look in the progressBar function (which is really the constructor
of sorts) you will see the following line:

this.setBar = resetBar;

That means that myBar.setBar really calls the function resetBar.

The i, j, and r vars were just loop counters I used for the demo. 

I sent you an E-mail to your personal address with another page that
uses the progress bar which is a little cleaner.

~Brad

-Original Message-
From: Phillip Vector [mailto:[EMAIL PROTECTED] 
Sent: Friday, June 06, 2008 12:01 PM
To: CF-Talk
Subject: Re: cfchart bar graph

Sure..

myProgBar5.setBar(0);   //set the progress bar to indicate a
progress of 50%

I see no function called setBar... Where is it?

i = 1;
j=1;
r=0;

What do these control?

~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to 
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k

Archive: 
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:306982
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: 
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4