Su asks:
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 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 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>
Archived Comments
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!
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
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.
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...
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.
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.
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!
Thanks Raymond
This helped me a lot :)
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?
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.
Hi
How I can write Delta variable in legend in WebCharts3D ?
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. ;)
awesome sauce