<html>
<head>
<title>ASP.NET Reporting Documentation</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="NormalIndent">
<h1>
Visual.aspx Page
</h1>
<p>
<b>Description:</b> The visual report shows Sales by Category
in three different views: Pie Chart, Bar Graph, and Tabular.
</p>
<p>
<strong>Overview:</strong> The visual report uses GDI+, the
infrastructure for creating images and graphics in .NET, to dynamically
generate pie charts and bar graphs.
</p>
<p>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.
</p>
<P><strong>Implementation Notes: </strong> 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.
</P>
<P>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:
</P>
<pre>
<P>http://localhost/ReportsWeb/ChartGenerator.aspx?<font color= "blue">xValues</font>=Beverages,Condiments,Confections,DairyProducts,
Grains/Cereals,Meat/Poultry,Produce,Seafood&<font color= "blue">yValues</font>=267868.180522919,106047.084989548,167357.224831581,
234507.285217285,95744.587474823,163022.359088898,99984.5800685882,131261.73742485&<font color= "blue">ChartType</font>=pie&<font color= "blue">Print</font>=False</P>
</pre>
<P>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.
</P>
<P>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.
</P>
<P><strong>BarGraph and PieChart </strong>
</P>
<p>
<img src="./images/1x1.gif" width="25"> <img src="./images/vischartstructure.png">
</p>
<P>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.
</P>
<P>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.
</P>
<P>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:
</P>
<pre>
<P>ChartItem item = (ChartItem) _chartItems[i];
SolidBrush brs = new SolidBrush(item.ItemColor);
grp.<font color= "blue">FillPie</font>(brs, pieRect, item.StartPos, item.SweepSize);
grp.<font color= "blue">FillRectangle</font>(brs, perimeter + _bufferSpace, i * _legendFontHeight + 15, 10, 10);
grp.<font color= "blue">DrawString</font>(item.Label, new Font(_legendFontStyle, _legendFontSize),
new SolidBrush(Color.Black), perimeter + _bufferSpace + 20, i * _legendFontHeight + 13);
grp.<font color= "blue">DrawString</font>(item.Value.ToString("C"), new Font(_legendFontStyle, _legendFontSize),
new SolidBrush(Color.Black), perimeter + _bufferSpace + 200, i * _legendFontHeight + 13,sf);</P>
</pre>
<P>
<P>These are some points to keep in mind when implementing a bar graph:
<UL>
<li>
Spend time designing the graph on paper during the design phase before
implementing it.
<li>
Calculate in advance all of the dimensions and measurements for each part of
the chart.
<LI>
Make sure the graph scales correctly given any number of data points.
</LI>
</UL>
<P> </P>
</body>
</html>
Submit an article or tip