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
I stay pretty amazed at the features in CFChart that no one knows about. Thanks for posting.
DW
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 ??
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.
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?
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).
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!
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.