The free .NET chart control available from Microsoft
contains a subset of components originally created by Dundas. This component
is a full-fledged charting component rendering bar, line, pie, or statistical
charts in a windows or web UI. The chart component has many features available
to the user, so many that it's often hard to tell what each feature does.
The chart control uses Series and DataPoints to render a
chart within a chart region defined by the ChartArea object. Charts can be 2D
or 3D depending on the settings, and the developer has control over colors,
borders, fonts, lines, rendering region, and other styling of the chart.
The final result of the markup above, with some added
styles, produces the following chart.
The final charting markup looks like the following.
<asp:Chart ID="chSalesData" runat="server" BackGradientStyle="DiagonalLeft"
BackColor="LightBlue">
<Titles>
<asp:Title Visible="false" />
</Titles>
<Legends>
<asp:Legend Name="DefaultLegend" Docking="Top" />
</Legends>
<ChartAreas>
<asp:ChartArea Name="MainChart">
<InnerPlotPosition X="10" Y="10" Height="80" Width="80" />
<AxisX>
<LabelStyle Enabled="true" />
<MajorGrid LineWidth="1" />
<MajorTickMark Enabled="false" />
<CustomLabels>
<asp:CustomLabel FromPosition="2004.5" ToPosition="2005.5"
Text="Store Opening" />
<asp:CustomLabel FromPosition="2005.5" ToPosition="2006.5"
Text="2006" />
<asp:CustomLabel FromPosition="2006.5" ToPosition="2007.5"
Text="2007" />
<asp:CustomLabel FromPosition="2007.5" ToPosition="2008.5"
Text="2008" />
<asp:CustomLabel FromPosition="2008.5" ToPosition="2009.5"
Text="Current Year" />
</CustomLabels>
</AxisX>
<AxisY>
<LabelStyle Enabled="true" />
<MajorGrid LineWidth="1" />
<MajorTickMark Enabled="false" />
</AxisY>
</asp:ChartArea>
</ChartAreas>
<Series>
<asp:Series Name="Bicycles" ChartArea="MainChart" ChartType="Line"
BackGradientStyle="TopBottom" BackSecondaryColor="LightYellow">
<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>
