Asp.NET Chart - How to specify Data

The chart area(s), series, and data points can be specified declaratively (either by entering the declarative mark-up by hand or via the Properties window) or programmatically in the code-behind class. Typically the series and chart area(s) are specified declaratively and the data points are populated programmatically by querying a database or some other dynamic data store. Let's start by discussing how to display a chart whose chart area, series, and data points are all specified declaratively.


<asp:Chart ID="chtNBAChampionships" runat="server">
<Series>

<asp:Series Name="Championships" YValueType="Int32" ChartType="Column" ChartArea="MainChartArea">

<Points>

<asp:DataPoint AxisLabel="Celtics" YValues="17" />

<asp:DataPoint AxisLabel="Lakers" YValues="15" />

<asp:DataPoint AxisLabel="Bulls" YValues="6" />

<asp:DataPoint AxisLabel="Spurs" YValues="4" />

<asp:DataPoint AxisLabel="76ers" YValues="3" />

<asp:DataPoint AxisLabel="Pistons" YValues="3" />

<asp:DataPoint AxisLabel="Warriors" YValues="3" />

</Points>

</asp:Series>

</Series>

<ChartAreas>

<asp:ChartArea Name="MainChartArea">

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

Note that the Chart control has a <Series> section and a <ChartAreas> section, which define the series and the chart areas, respectively. The <ChartAreas> section in the above mark-up defines a single ChartArea named MainChartArea. The <Series> section defines a single Series named Championships. This Championship series is configured to render as a column and is displayed in the MainChartArea. Next, its data points are defined via the <Points> collection. There are seven data points, each data point displaying the NBA team name via the AxisLabel property and the number of championships in the YValues property.

After defining this mark-up, visit this page through a browser. You should see a chart in your browser similar to the screen shot below: