This chapter is from the book
This chapter is from the book
This chapter is from the book
Dressing Up Your Charts
Building a chart and populating it with data is only half the battle. You also need to ensure that your chart tells the story that you want it to tell. ColdFusion's default settings usually get you reasonably close, but you'll find that you often need to make adjustments.
The <cfchartseries> tag offers eleven types of chart: bar, cylinder, horizontal bar, line, area, cone, pyramid, curve, step, and scatter. Your charts can be flat or three-dimensional. As you'll see in this section, selecting the proper chart type is one of the most important factors in determining whether your chart communicates your information clearly.
In addition to the chart's type, you can change almost any feature in your chart's appearance. You can change your chart's colors and fonts to integrate into your Web site's color scheme. You can adjust the grid's numbers to ensure that your chart makes sense.
To change a graph's grid values:
Open the page you created in the last section, and preview the page in a browser. Notice that, by default, ColdFusion ends the y-axis with the largest value in the data set (Figure 13.9).
Figure
13.9 By default, the chart stops at the greatest value in the
y-axis.In the <cfchart> tag, add this attribute and preview the change in your browser:
scaleto="600"
Notice that the graph's y-axis now scales to 600, giving the graph a less cluttered appearance (Figure 13.10).
Figure
13.10 The y-axis changes with the scaleto attribute.
There's another problem with this graph, though: The numbers along the y-axis don't make much sense. Nobody really wants to see a grid line at 133.3 million.
Telling Stories
What does it mean to "tell a story" with a graph?
Often, graphs are most useful when they communicate a change across some vector. In our Census example, you saw that it wasn't very informative to include a single population figure for one year in the United States. But a remarkable, visual story emerged when you included data for two regions over the next fifty years: By this projection, the population of the United States will overtake Western Europe sometime between 2025 and 2030, and the gap will continue to widen thereafter.
In the <cfchart> tag, add this attribute and preview the change in your browser:
gridlines="7"
Figure 13.11 shows the <cfchart> tag with the newly added attributes. Notice that the y-axis numbers have changed to something more user-friendly: 100, 200, 300, etc (Figure 13.12). The gridlines attribute, naturally enough, specifies the number of lines in your grid. We set the number to 7 in order to get nice intervals up to a maximum value of 600. By setting the scaleto and gridlines attributes of the <cfchart> tag, you can make your graph much easier to read.
Figure
13.11 The code has scaleto and gridlines attributes. 
Figure
13.12 Setting the gridlines attribute can make your graph easier to
read.Save your file with a new name.
As you work through this section, you'll be able to compare the different charts you've created.
)
Figure
13.9 )
Figure
13.10 )
Figure
13.11 )
Figure
13.12 Tips
Don't be confused by the way ColdFusion counts gridlines. The x-axis is included in the gridlines number. Thus, for a value of 600, we want seven gridlines: 0, 100, 200, 300, 400, 500, and 600.
We cheated a bit with the example in this section because we knew what our maximum value would be. As you'll see in the next section, you also can retrieve data from a query. This means that you won't know ahead of time the best values for your scaleto or gridlines attributes. By the time you finish this book, you should know enough ColdFusion to be able to set those values programmatically.
To change your chart's type:
Open the file you created in the previous section if it isn't already open and, in the <cfchart> tag, add this attribute and then preview the page in your browser:
show3d="yes"
You'll see that your chart has taken on a three-dimensional appearance (Figure 13.13). Your charts can either be flat or 3-d. It's up to you to decide which appearance provides the most useful information.
Figure
13.13 You should choose to use a 3-D chart only when that format is best
for presenting your data.Add this attribute to the <cfchart> tag and preview the change in your browser:
format="jpg"
You'll see that the chart is considerably less smooth than before.
Change the format attribute back to Flash and save your file.
Change the type attribute of both <cfchartseries> tags to bar and preview your page in a browser (Figure 13.14). You'll see that the bars for the United States obscure the bars for Western Europe. This problem also occurs when you set your type attribute to area (Figure 13.15).
Figure
13.14 A 3-D bar chart can hide your data if you're not
careful...
Figure
13.15 ... so can a 3-D area chart.Change Western Europe's type attribute to curve.
Cut your entire Western Europe <cfchartseries> and paste it before the United States <cfchartseries>. Figure 13.16 shows how the code should appear in Dreamweaver.
Figure
13.16 shows how the code should appear in Dreamweaver. Save your page and view it in your browser (Figure 13.17).
Figure
13.17 You can assign a different chart type to each chart series.
By using a different chart Type for each series, and by changing the order in which the series appear, you've created a chart that clearly shows the demographic trends of each region. As you've seen, you can change your charts to tell almost any story you like.
Try experimenting with the different attributes for the <cfchart> and <chartseries> tags to see which effects you can create.
Fun with Chart Junk
Charts can confuse just as easily as they can enlighten. Edward Tufte of Yale University has a name for the gimcracks and doodads that designers use to dress up graphs: "chart junk." Just because you can deck out your design with a hundred grid lines and lavender snowflakes doesn't mean you should. Instead, concentrate on presenting your data as simply and clearly as possible. If you'd like to learn more about information design, go to your local library and look for Edward Tufte's The Visual Display of Quantitative Information, Cheshire, CT: Graphics Press, 1992.
)
Figure
13.13 )
Figure
13.14 )
Figure
13.15 )
Figure
13.16 )
Figure
13.17 Tips
Would you prefer to de-emphasize Western Europe's shrinking population relative to the United States? Experiment with the seriesplacement attribute of the <cfchart> tag (Figure 13.18).
Be careful when changing your chart's colors. ColdFusion will generate an error when reading hexadecimal color values such as #0000FF. You can avoid this error by escaping the hash character; to do so add a second hash: ##0000FF. Note that the Tag Editor escapes the hashes for you.
Figure 13.18 Emphasize different data with the seriesplacement attribute.By default, ColdFusion draws its charts using Flash. You can use the format attribute to specify flash, jpg, or png. Flash movies are generally clearer, with smaller file sizes, than jpgs. Your choice of format will depend on your target audience, and the medium in which your use your graph. Your users must have Flash 5 Player or higher installed to view the Flash files generated by <cfchart>.
Generating an area chart can consume a lot of your server's resources. If you plan to serve area charts to many site users, consider different strategies to lessen the load on the processor, including caching your charts with the CF Administrator or building your charts ahead of time. See Administering Charts in the ColdFusion MX Documentation.
)
Figure 13.18Graphs in the Real World: A Case Study
In this section, you've seen how to build static charts to present more than one series of data. You've also seen how to clarify or obscure the information, depending on the story you want to tell. But how do these skills apply to you, a ColdFusion developer, in the real world?
Assume that you work at a large financial institution. Your boss comes to you Friday afternoon and says the following:
"We're at a crossroads as a lender. Although we operate in the United States and Western Europe, the last few years have been hard on us. We've decided we have the resources to offer new mortgages in only one market, and it's critical that we pick the market that's most likely to grow. This decision is for the long term and will influence the financial health of our institution over the next thirty to fifty years, not to mention your holiday bonus. I think we should focus on United States, but I need to persuade the board in a presentation later today. Put something together for me."
And she didn't even say please!
Mortgages are financial instruments that typically have a life of twenty to thirty years. Other things being equal, as a country's population grows, its demand for mortgages will grow as well. (More people need more houses, and more houses mean more people borrowing to pay for their houses).
After gathering your data, you could type a table that lists the projected population in Western Europe and the United States. In fact, you'd better do so because board members like to throw around numbers in order to sound authoritative. But look at the table on the left (Figure 13.19). It's good to have the information at hand, but it requires that you study the data yourself and try to understand what it means.
)
Figure
13.19 Textual data has its purpose...
You quickly decide to build a graph to accompany your table. After experimenting with different graph types, you decide that a graph with one curve series and one area series tells a dramatic and simple story: Demand for mortgages in the United States will grow strongly over the next fifty years, while growth in Western Europe will stagnate and eventually decline (Figure 13.20). If you were giving the presentation, would you rather do so with or without the chart?
)
Figure
13.20 but graphical data can quickly tell the story.