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>
