Ask a Jedi: Controlling the size of bars in cfchart

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> </code>

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA