Now its time to see an example of this. Take a look at the
following chart.
<asp:Chart id="Chart1" runat="server" ImageType="Jpeg"
Width="600px" Height="400px" Palette="Chocolate">
<Titles>
<asp:Title Name="DefaultTitle" Font="Trebuchet MS, 10pt, style=Bold"
Text = "My Title" Enabled="True" />
</Titles>
<Legends>
<asp:Legend Name="DefaultLegend" Enabled="True" Docking="Top" />
</Legends>
</asp:Chart>
So far, within this chart, we have the core Chart control
that defines the width and height of the image. I'd highly recommend
specifying these parameters, to ensure the chart image renders decently. In
addition, there are four image types and this chart renders in Jpeg format,
along with using the Chocolate palette (one of many color schemes that changes
the color that the individual bars, lines, points, or pie slices use within the
chart).
Chart Areas
Next, let's look at the setup of the charting area.
<asp:Chart ..>
.
.
<ChartAreas>
<asp:ChartArea Name="MainChart" BorderWidth="0">
<InnerPlotPosition X="5" Y="5" Height="90" Width="90" />
<AxisY LineColor="64,64,64,64">
<LabelStyle Font="Trebuchet MS, 10pt, style=Bold" />
<MajorGrid Enabled="false" />
<MajorTickMark Enabled="false" />
</AxisY>
<AxisX LineColor="64,64,64,64">
<LabelStyle Font="Trebuchet MS, 10pt, style=Bold" />
<MajorGrid Enabled="false" />
<MajorTickMark Enabled="false" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
The charting area is setup by the ChartArea object. This
chart contains the name of the charting region (important because there can be
more than one charting areas and Series objects have to interrelate to the
ChartArea). The chart area defines information about the charting area itself.
First, the InnerPlotPosition specifies the region of the charting area to
render itself in. This varies by type of chart, as pie charts render
differently than bar charts, and each chart functions differently depending on
its settings.
The LabelStyle object specifies settings to use for labels
that appear within the chart. Font is just one of those properties that are
customizable. The next two properties affect the rendering of the chart axis.
The MajorGrid property specifies whether to draw a line for the major X or Y
values. So for each item rendered in the list, the chart control specifies the
details about the line, such as line color, width, style, etc. Currently its
disabled, so no X/Y lines appear, but can be easily enabled by setting the value
to true, and by at least specifying a line width. This is the same for the
tick marks that appear by enabling MajorTickMark.
Major grid lines are represented by the major values in the
grid. For instance, if the X axis shows years, it would most likely show one
major grid line per year. With the Y axis being net sales, the chart control
may create a major grid line every $20,000. The chart control automatically
creates major values for you; however, you can override this feature to include
whatever ranges you like.
Series and Data Points
Charting data itself is made up of series and data points;
these series and data points represent the actual ranges of data. As I
mentioned before in my previous example, a series represents and object of
measurement (a product), while the data points contain the measurement value
data (years and net sales) used to establish a trend.
This would appear in the chart like the following.
<asp:Chart ..>
<Series>
<asp:Series Name="Bicycles" Label="Bicycle Sales"
ChartArea="MainChart" ChartType="Bar">
<Points>
<asp:DataPoint Xvalue="2009" Yvalues="5,350.16" />
<asp:DataPoint Xvalue="2008" Yvalues="23,551.97" />
<asp:DataPoint Xvalue="2007" Yvalues="29,337.62" />
<asp:DataPoint Xvalue="2006" Yvalues="16,098.52" />
<asp:DataPoint Xvalue="2005" Yvalues="15,929.23" />
</Points>
</asp:Series>
</Series>
</asp:Chart>
This creates a typical bar chart with four bar lines, one
for each of the years that shows the trend of net sales dollars.
