DashCapper - Fred Anderson

Thank you to all of the people who attended the June meeting of the Twin Cities ColdFusion User Group (TCCFUG).

Here is a PDF version of the PowerPoint  Data Visualization Presentation

The sparkline examples and source code can be found at SparklineCFC.riaforge.org

I will follow this post up with the sample code that is not included in SparkLine download.

I have posted the bare bones alpha code last night on the sparklinecfc.RIAForge.org site. The code is pretty sparse and no real documentation yet. But I felt it was better to just get the first version out and we could start tweaking from here.
The basic file setup for the code at this point is:

• Core.cfc: basic shared functions (not sure if I am using this at this point)
• Sparklline.cfc: This is the base Sparkline object that will hold all of the common items for the different types of microcharts.
• BarChart.cfc: Collection of bar chart functions, the basic setting are "Full Chart" which essentially means consider the sum of all elements given to be 100% and then divide the chart from there. The other method is to dictate what 100% is by stating maxStackedBar = n. You also have the option to align the chart left or right.
  
• PieChart.cfc: The pie charts are rather plain at this point, you pass in the data and the colors and any border info you may want.
  
• WinLossChart.cfc: basic params are win color, loss color, tie color and the data you put in.
  
• BulletChart.cfc: Empty
• ColumnChart.cfc: Empty
• IconChart.cfc: Empty
• LineChart.cfc: Empty
• SparkTest.cfm: Sampel page showing the three chart types. I have added a couple functions from cflib.org. I really like the FadeList() function. It allows for nice chart shades
• Test.cfm: another test, just the pie chart.

Please contact me if you have any questions. I know the code is a little hectic, but I figured it would be better than sitting on it any longer.

I have started SparklineCFC as an open source project on RIAForge. http://sparklinecfc.riaforge.org/

Sparklines are little graphs or charts that can fit in the context of a line of text.

People tend to use them in Excel or tickers, and there are some open source libraries and commercial libraries as well.

Please stay tuned, Fred

After reading Ben Nadel's recent post ColdFusion Image Coordinates Are Zero-Base I thought it would be a good opportunity to fire up the blog and get things going. I have been working on a Microchart/Sparkline cfc recently and I have come across a couple oddities. Let's start with an example of what Ben was talking about, the zero based system as it applies to an oval.

Example 1

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset>

As you can see, end up with a circle that is offset by a pixel each way. So let's push it back a bit.

Example 2

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset>

That's More like it. I am leaving out the antialiasing for the sake of seeing the edges clearly. You will see the same results with antialiasing set to "on".

 
<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#">
</cfimage></cfset></cfset></cfset></cfset>

Now is the point when things become a little odd. If we want a filled circle we are going to have to adjust some numbers a bit. Yeah, I know it's odd, you would think that my 30x30 circle drawn from 0,0 to 29x29 and the fill set to "yes" would do the trick. Here is the result.

Example 3

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset>

As you can see, this didnt exactly work. The circle is centered alright, it is just drawn as though there was not a border (fyi, just applying a stroke in this case will not add a border).

Example 3b

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset>

It looks like if just extend the oval a pixel in all directions it works fine. Unless we turn on anti-aliasing. Take a look at what happens when we apply anti-aliasing.

Example 3c

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset></cfset>

The Anti-aliasing has caused the oval to shift up and to the left. so one last pass at this should give us what we need.

Example 3d

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset></cfset>

So to wrap things up, you may have to tweak the way you draw things using cfImage. In my case, I am using rather small graphic 30x30 and 50x50 would be the max, I have tested these same examples at larger scale and have found similar results. Since my cfc's are excepting values for width, height and anti-aliasing rather than allowing the user to directly set those things, I have added a modifier to those variables based on their parameter for anti-aliasing.