This example creates a simple graph from a Coldfusion query. We're going to start out by creating a simple grid :

<cfx_imageflare source="
  include( '#expandpath('.\drawWeekGrid.fs')#' )
  
  b = Bitmap(7*8*10+1,300+1)
  b.fill( Color('white') )

  drawWeekGrid( b )
  
  b.save( '#expandpath('.\example07a.png')#' )  
">

As you can see, we've included drawWeekGrid.fs and called drawWeekGrid( b ) :

function drawWeekGrid( bitmap )

  // week hilights
  for x=0, bitmap.width, 140 do
    bitmap.rect( x, 0, x+70, bitmap.height, Color(250,250,250), Color(250,250,250) )
  end

  // dense light grid
  for x=0, bitmap.width, 10 do
    bitmap.line( x, 0, x, bitmap.height, Color(240,240,240) )
  end
  for y=bitmap.height-1, 0, -10 do
    bitmap.line( 0, y, bitmap.width, y, Color(240,240,240) )
  end
  
  // sparse dark grid
  for x=0, bitmap.width, 70 do
    bitmap.line( x, 0, x, bitmap.height, Color(120,120,120) )
  end
  for y=bitmap.height-1, 0, -100 do
    bitmap.line( 0, y, bitmap.width, y, Color(120,120,120) )
  end

end

Our result is the following grid :

Now we get to the fun part... the actual graphing.

Please note that since the ImageFlare documentation does not mean to connect to any database, our Coldfusion query is going to be generated dynamically using cfscript. We've done this in example07data.cfm. You can view the source here.

<cfinclude template="example07data.cfm">

<cfx_imageflare query=dataQ source="
  include( '#expandpath('.\drawWeekGrid.fs')#' )
  
  b = Bitmap(7*8*10+1,300+1)
  b.fill( Color('white') )

  drawWeekGrid( b )
  
  // graph table stores Shapes data
  graphs = {}
  sitecount = 0
  sitenames = {}
  colors = {}
  colors[1] = 'red'
  colors[2] = 'darkgreen'
  colors[3] = 'blue'
  
  // build graph shapes from data
  for row=1, cf.query.rowcount do
    site  = cf.query.get( row, 2 )
    week  = cf.query.get( row, 3 )
    count = cf.query.get( row, 4 )
    if graphs[site] == nil then
      sitecount = sitecount + 1
      sitenames[sitecount] = site
      graphs[site] = Shape()      
    end
    graphs[site].plot( (week-1)*7*10, b.height-count )
  end
  
  // draw the lines
  for i=1, sitecount do
    b.shape( graphs[sitenames[i]], Color('white',0), Color(colors[i]), 8 )
  end
  
  b.save( '#expandpath('.\example07b.png')#' )">

Our script now loops through the Coldfusion query we've specified as an attribute, query=dataQ, which is the query example07data.cfm generates for our example. Normally you would use query results from your database.

The script dynamically determines the number of shapes (polygons) to draw based on whether or not a shape in the graphs table exists with that site name. If we took away the last site's data in our hardcoded query, the script would only draw graph lines for those sites left in the query. This makes the script more complex than one which hardcoded what to display, but much more flexible, and thus useful.

The line graphs[site] = Shape() then creates that shape in the graphs table. The graphs table simply stores the shapes which will be drawn. Shapes are selected because we can easily connect many lines together with them via the plot method. When we do draw the shape, we just draw it with no fillcolor, so it appears as just the border of the shape, the jagged lines.

All the plotting of data occurs in the following line :

graphs[site].plot( (week-1)*7*10, b.height-count )

We are calling the plot method of the Shape object returned by graphs[site]. Our X value is (week-1)*7*10 and Y is b.height-count.

The final result is :

If we wanted to implement a simple caching mechanism for it, we could wrap our ImageFlare call with :

As usual, feel free to contact us with questions.
Click here to return to the examples index.