Added Bullet Graphs to SparcklineCFC

Posted by Fred Anderson on January 22nd, 2009

It's been a while since I have posted any work on the SparklineCFC project.  I have received some help from a co-worker, Chris Irwin. He has reorganized the the code to be more inline with traditional OO practices.

I have added Bullet graphs to sparkline Options. Here is an example.

bullet_graph_sample

You the basic concept for calling the Bullet Graph is the same as the other Sparkline objects. Set up the Sparkline Object with some of the basic settings.

  1.  
  2. <cfscript>
  3. sBulletGraph = structNew();
  4. sBulletGraph.type = "BulletGraph";
  5. sBulletGraph.width = 200;
  6. sBulletGraph.qualitativeRanges = "80,120,200";
  7. sBulletGraph.qualitativeColors = "996633,CC9966,FFCC99";
  8. sBulletGraph.foregroundColors = "000000,808080";
  9. sBulletGraph.backgroundColor = "00FF00";
  10. BulletGraph = createobject("component","Sparkline").init(argumentCollection = sBulletGraph);
  11. </cfscript>
  12.  

Next, calling the graph is as simple as creating an argument collection and passing it into the draw function the object we have just created.

  1.  
  2. <cfset dot = false>
  3. <cfset qColors = "DD747A,EAABAF,AFD7B9,7ABC8A">
  4. <cfset qRanges = "70,100,130,200">
  5. <cfset args = {data=data, referencePoints=referencePoints, performanceDot=dot, qualitativeColors = qColors, qualitativeRanges = qRanges}>
  6. #BulletGraph.draw(argumentcollection=args)#
  7.  

In a case like this you can loop over this section pass a different data value in as you go.

Leave a Reply

  • Change This Footer

    This Footer is easily and completely editable with widgets.

    Log into your admin panel, click on "Design" followed by "Widgets". From there you can arrange this sidebar by draging the options into their respective places on this sidebar.

    More information on using widgets can be found here.

    (This note will not be displayed once you have widget-ized this sidebar)