Visual.aspx Page

Description:    The visual report shows Sales by Category in three different views: Pie Chart, Bar Graph, and Tabular.

Overview:     The visual report uses GDI+, the infrastructure for creating images and graphics in .NET, to dynamically generate pie charts and bar graphs.

The user can choose the view for the data. The first view by default is a Pie Chart. The Pie Chart illustrates the contribution of sub values to a total. The second view is the Bar Graph. The Bar Graph displays side-by-side values for comparison between different values. The last view is the Tabular view, which displays the data used for the Pie Chart and the Bar Graph. The Pie Chart and the Bar Graph have color coded values and an accompanying legend.

Implementation Notes:   To dynamically generate a graph or chart image, a separate web page is necessary for the GDI+ functions to output the generated image directly to the web page output stream.   This is the reason that Visual.aspx page refers to ChartGenerator.aspx page for the ImageUrl source.

In this implementation, the ChartGenerator.aspx page gets its parameters via the query string for simplicity and calls the necessary components, BarGraph and PieChart, to render the requested image.   This is an example on how the page is invoked: 

		
http://localhost/ReportsWeb/ChartGenerator.aspx?xValues=Beverages,Condiments,Confections,DairyProducts,
Grains/Cereals,Meat/Poultry,Produce,Seafood&yValues=267868.180522919,106047.084989548,167357.224831581,
234507.285217285,95744.587474823,163022.359088898,99984.5800685882,131261.73742485&ChartType=pie&Print=False

For better image quality, the page outputs the graph in PNG format (Note that the PNG format is not supported in Netscape 4.x browsers).  Since the image is in PNG format, the Bitmap object cannot write directly to Response.OutputStream because the OutputStream does not support the random seek feature that PNG requires.  To get around this issue, MemoryStream is used to temporarily save the Bitmap object.  The resulting MemoryStream is then written to the page's OutputStream.

Given that ChartGenerator.aspx does all the graphic work, the Visual.aspx page only acts as a user friendly interface to gather all the necessary input and data for creating the correct graph or chart.

BarGraph and PieChart 

As mentioned earlier, the BarGraph and PieChart classes call all the necessary GDI+ functions to create images dynamically.  Before delving into how they work, consider the chart architecture above.

BarGraph and PieChart inherit some of the basic functionalities from the ChartItem, ChartItemCollections, and Chart classes.  ChartItem represents a single data point and contains enough information to be used for drawing the item in the chart.  ChartItemCollections is just an implementation of chart item collection.  Finally, Chart is meant to define a standard interface for all custom graph implementations that derive from it.

Implementing BarGraph and PieChart is not a simple matter, and even though it is simple enough to use the GDI+ features, the daunting task is left on formatting and calculating the graph’s dimension.  Some examples of GDI+ calls: 

		
ChartItem item = (ChartItem) _chartItems[i];
SolidBrush brs = new SolidBrush(item.ItemColor);
grp.FillPie(brs, pieRect, item.StartPos, item.SweepSize);
grp.FillRectangle(brs, perimeter + _bufferSpace, i * _legendFontHeight + 15, 10, 10);
grp.DrawString(item.Label, new Font(_legendFontStyle, _legendFontSize), 
   new SolidBrush(Color.Black), perimeter + _bufferSpace + 20, i * _legendFontHeight + 13);

grp.DrawString(item.Value.ToString("C"), new Font(_legendFontStyle, _legendFontSize), 
   new SolidBrush(Color.Black), perimeter + _bufferSpace + 200, i * _legendFontHeight + 13,sf);

 

These are some points to keep in mind when implementing a bar graph: