Ask a Jedi: Controlling the size of bars in cfchart

This post is more than 2 years old.

Su asks:

I am trying to use CFCHART to create bar graphs. I need to specifically format them to match to a predefined sized width of bars. Is there a way to control the width of bars produced by the CFchart? Thanks for any help.

I could have sworn that there was a specific attribute for this from with the core ColdFusion language itself, but I did not see it. So, as always, I went to the WebCharts graphical editor. I found the setting right away: elements:shapeSize.

I generated the XML from the chart, stripped out all the extra stuff, and got to this:

<!--- style from webcharts ---> <cfsavecontent variable="style"> <?xml version="1.0" encoding="UTF-8"?> <frameChart> <elements shapeSize="50" /> </frameChart> </cfsavecontent>

Just change 50 to whatever you would like and whatever makes sense for your data. For a complete demo, you can run this code below. It creates a fake query and then uses that to source a bar chart with 5 sets of sales figures. Note how I pass in the XML to the cfchart tag.

<cfset q = queryNew("dept,year,sales","varchar,integer,integer")> <!--- generate random sales data ---> <cfloop index="y" from="1995" to="2000"> <cfscript> queryAddRow(q); querySetCell(q, "dept", "Alpha"); querySetCell(q, "year", y); querySetCell(q, "sales", randRange(80,120)); queryAddRow(q); querySetCell(q, "dept", "Beta"); querySetCell(q, "year", y); querySetCell(q, "sales", randRange(60,100)); queryAddRow(q); querySetCell(q, "dept", "Gamma"); querySetCell(q, "year", y); querySetCell(q, "sales", randRange(80,220)); </cfscript> </cfloop>

<!--- style from webcharts ---> <cfsavecontent variable="style"> <?xml version="1.0" encoding="UTF-8"?> <frameChart> <elements shapeSize="50" /> </frameChart> </cfsavecontent>

<cfchart chartWidth="500" chartHeight="500" title="Sales by Department" style="#style#"> <cfloop index="y" from="1995" to="2000"> <cfquery name="salesdata" dbtype="query"> select * from q where [year] = <cfqueryparam cfsqltype="cf_sql_integer" value="#y#"> </cfquery> <cfchartseries type="bar" query="salesdata" itemColumn="dept" valueColumn="sales" seriesLabel="#y#" /> </cfloop>

</cfchart>

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Su posted on 8/18/2008 at 5:23 PM

I cannot tell how much this answer would help me with my application. Thanks for figuring this out and letting us know the answer. I really appreciate your quick turnaround on my question. Thanks a lot!

Comment 2 by Mark posted on 3/25/2010 at 2:31 AM

Hi Ray,
I can increase the bar size no problem using this style, but I notice that the bars "spread outward" (even to point of out of bounds of frame) depending on the > 50 value I use, instead of just becoming wider in place and remaining within the frame. Is there another attribute that can decrease the space between bars, pulling them in towards the center?

Thanks, docs yielded no apparent solution...
Mark

Comment 3 by Raymond Camden posted on 3/29/2010 at 7:28 PM

I'm not seeing that. I do see them get so big they overlap, but I do not see an increase is space _between_ the bars.

Comment 4 by Mark posted on 3/29/2010 at 11:53 PM

I was trying to do a three-series bar chart with an additional two series as line, *and* have the bars different colors, *and* the bars be wider than a toothpick, *and* the legend display the five series with their colors properly.
I just couldn't get them all to come together at once. As a workaround, I did the three bars within one series with different item names, then used your handy blog about using the limits in the yAxis section to paint the "lines" behind the bars, and finally had to manually create the legend to show all five with their corresponding colors. Seems like a lot of work...

Comment 5 by Raymond Camden posted on 3/29/2010 at 11:57 PM

I'll point out - I did a preso last year at CFUNITED about alternatives to CFCHART. There are quite a few out there if you want to try something different.

Comment 6 by Raymond Camden posted on 3/29/2010 at 11:57 PM

I'll point out - I did a preso last year at CFUNITED about alternatives to CFCHART. There are quite a few out there if you want to try something different.

Comment 7 by Mark posted on 3/30/2010 at 12:03 AM

Yes, I read about jFreeCharts and others and plan to check them out as time allows. If you saw my actual output result you might wonder why even the watered down Webcharts2D package couldn't handle it ;-)

Thanks Ray for your response!

Comment 8 by Bruno posted on 11/28/2011 at 12:36 PM

Thanks Raymond
This helped me a lot :)

Comment 9 by Mikel posted on 8/7/2013 at 5:57 PM

I know that this is an old post but it was quite handy. A question though...I don't quite follow how shapeSize works. It almost seems to be a percentage. If I use 50 (as per your example) it seems to scale the width based on the number of bars. 10 bars at 50 would require me to have 3 bars at 20 for them to be similar in size. I tried to use something fixed, such as 50px, but that throws an error. Do you know if there is a way to make them a specific size no matter how many bars there are?

Comment 10 by Raymond Camden posted on 8/8/2013 at 1:09 AM

Sorry - not offhand. Best I can suggest is doing what I did - playing with the chart editor.

As an aside, I really, really, *really* recommend folks don't use this charting engine anymore. It is truly way too old now. Yes, it works, but, there are much better/newer options out there.

Comment 11 by Dany posted on 7/12/2014 at 11:56 AM

Hi
How I can write Delta variable in legend in WebCharts3D ?

Comment 12 by Raymond Camden posted on 7/12/2014 at 5:16 PM

I'd fire up the chart editor and look at the tokens available to the legend.

Actually - I'd use a new charting engine - but that's just me. ;)

Comment 13 by Monique Boea posted on 11/7/2014 at 7:13 PM

awesome sauce