This question came in via a reader and led to some interesting aspects of the ZingChart engine embedded in ColdFusion 10 (remember though that this is Enterprise only). The reader wanted to replace the numeric labels on the Y-Axis with strings instead. From my experience with ZingChart in the past, I assumed this was probably possible. The engine is incredibly powerful and has about a bazillion options. I reached out to the company on Twitter and with their help, I was able to get it working.

First, let's start with a simple bar chart.

<cfscript>
//sample data
data = queryNew("name,age", "cf_sql_varchar,cf_sql_integer", [
	{name:"Ray",age:40},
	{name:"Dave",age:41},
	{name:"Todd",age:38},
	{name:"Scott",age:55}

]);

writedump(data);
</cfscript>

<p/>
	
<cfchart format="html" showLegend="false" >

	<cfchartseries type="bar" query="data" valueColumn="age" itemColumn="name" >
	</cfchartseries>

</cfchart>

I've got a fake query (and fake data, Scott really isn't that old) that I pass to cfchart. Here is the result.

The goal now is to change the y-axis values so that I can label a few values from young, to medium, and to old. There are two things you need to do in order to make this work. First, you need to specify your y-axis values instead of letting this happen automatically. For a chart involving age, this is rather easy. Depending on your data this may or may not be a big deal. This can be done via the yaxisvalues attribute of cfchart: yaxisvalues="#[10,20,30,40,50,60,70]#".

That helps define the actual range on the yaxis. To define the labels, you will use the yaxis attribute. This takes a structure of options. I believe the documentation for what you can send is defined here, but I'm not entirely sure about that. With the ZingChart folks helping me out on Twitter, I was told specifically what to pass - a labels key. Let's look at an updated example.

<cfchart yaxisvalues="#[10,20,30,40,50,60,70]#" yaxis="#{"labels":["","","young","medium","old","",""]}#" format="html" showLegend="false" >

	<cfchartseries type="bar" query="data" valueColumn="age" itemColumn="name" >
	</cfchartseries>

</cfchart>

Notice how some of the labels are blank. This creates the effect of a chart with only the string labels, not the numbers.

If you want to keep the numbers as well as the strings, simply include them in the labels.

<cfchart yaxisvalues="#[10,20,30,40,50,60,70]#" yaxis="#{"labels":["10","20","young","medium","old","60","70"]}#" format="html" showLegend="false" >

	<cfchartseries type="bar" query="data" valueColumn="age" itemColumn="name" >
	</cfchartseries>

</cfchart>

All in all, pretty nice. You can do other things with the labels including rotating them, sizing them, etc. As I said, ZingChart has a huge amount of options. For those of you not using ColdFusion 10 Enterprise, it may be worth purchasing as is and just using it natively. The price is $250 for a single domain and while there are many free options out there, I've been very impressed with ZingChart and their technical support. (As I mentioned above, they helped me out on Twitter and this is not the first time they have done so.)