CFCHARTs with Custom Markers

Last night I blogged about a typo in the CF Reference in regards to charts and markers. The docs make reference to a marker style called 'letter', whereas the real setting is 'letterx'. The user I was communicating with about this issue asked if there was someway to use other letters. So for example, letterA or letterB. While you can't do that, I did discover that the Chart Editor has an option to specify a graphic for the marker.

If you expand the Elements attribute in the editor, then Series, you can edit the Marker attribute. This is a per series setting so you want to add an index value in the blank field and click Add before modifying the settings. The index value must be a number. I used 0 as I assumed that it would match the 1st series in my chart:

I selected Bitmap and picked an image. The XML generated from this change is:

<series index="0"> <marker type="Bitmap" bitmap="/Users/ray/Desktop/unicorn4.gif"/> </series>

Here is a full example. The XML is a bit verbose and you don't need a lot of what is in here, but the final example is nice.

<cfsavecontent variable="cxml"> <?xml version="1.0" encoding="UTF-8"?> <frameChart is3D="false"> <frame xDepth="3" yDepth="1" leftAxisPlacement="Back" isHStripVisible="true"> <background minColor="#FDFEF6"/> </frame> <xAxis> <labelFormat pattern="#,##0.###"/> <parseFormat pattern="#,##0.###"/> </xAxis> <legend isVisible="false"> <decoration style="None"/> </legend> <elements place="Default" shape="Line" drawShadow="true"> <morph morph="Grow"/> <series index="0"> <marker type="Bitmap" bitmap="/Users/ray/Desktop/unicorn4.gif"/> </series> </elements> </frameChart> </cfsavecontent>

<cfchart style="#cxml#" scalefrom="0" scaleto="100"> <cfchartseries type="line" seriesColor="##FF0099"> <cfchartdata item="col1" value="20"> <cfchartdata item="col2" value="30"> <cfchartdata item="col3" value="10"> <cfchartdata item="col4" value="80"> <cfchartdata item="col5" value="60"> </cfchartseries> </cfchart>

And the result? The most beautiful chart in the world.

Archived Comments

Comment 1 by Dan Wilson posted on 4/3/2009 at 10:48 PM

I stay pretty amazed at the features in CFChart that no one knows about. Thanks for posting.

DW

Comment 2 by Pat Dobson posted on 4/4/2009 at 11:05 AM

All these posts about charts are great... but...

They keep making reference to the chart editor which I believe comes with Coldfusion ?

Is there a standalone version for those of us who cannot access our CFADMIN directory due to shared hosting ?

Is it worth installing a developers edition of CF purely for the chart editor ??

Comment 3 by Raymond Camden posted on 4/4/2009 at 5:57 PM

You don't need CFAdmin access, but you would need access to the install. So yes - it would be easy enough to install the dev edition on your machine. YOu can run the chart editor, get the XML, and put it in your code.

Comment 4 by Monte Chan posted on 4/21/2010 at 7:47 PM

Ray,

I just copied your codes and pasted in my page. I then changed the image to one of my images. When I ran the file, the chart showed up without the custom marker. Do you know if CF 8 or CF 9 has changed the ability to use custom marker?

Comment 5 by Monte Chan posted on 4/21/2010 at 7:57 PM

never mind. I found the problem. Instead of using relative path to the image, I have to specify where the file is in my hard drive (i.e. C:\Inetpub\wwwroot\images\myimage.gif).

Comment 6 by sherry posted on 8/18/2011 at 9:01 PM

Nice example! Thanks!

I was trying to make this working for a bar chart, but no luck so far. any suggestions?

also, I know how to change linewidth for line chart, but is there a way to change the bar width for a bar chart? the reason i am asking is sometimes when there is too less bars, the bar is very wide. it looks odd in these cases.

Thanks again!

Comment 7 by Raymond Camden posted on 8/19/2011 at 1:09 AM

1) Well, the XML above was for a specific line chart. The XML for bar chart is different. You should go into the chart editor, pick a bar chart, and use that XML as the base. Make sense?

2) Um - for all of that - check the chart editor. :) It has a wealth of options.