Asp.Net Chart Control

We want to display Student Names and their Total Marks in a barchart


This is how the rendered barchart should be


Step 1:Drag and drop chart control from toolbox on to the webform
step 2:modify the html of chart control as shown below

<asp:Chart ID="Chart1" runat="server">
    <Titles><asp:Title Text="Student Total Marks" ></asp:Title></Titles>
        <series>
            <asp:Series Name="Series1">
            <Points>
            <asp:DataPoint AxisLabel="Srinath" YValues="200" />
             <asp:DataPoint AxisLabel="Naveen" YValues="300" />
              <asp:DataPoint AxisLabel="Krishna" YValues="400" />
           
           </Points>
            </asp:Series>
        </series>
        <chartareas>
            <asp:ChartArea Name="ChartArea1">
            <AxisX Title="Student Names"></AxisX>
            <AxisY Title="Total Marks"></AxisY>
            </asp:ChartArea>
        </chartareas>
    </asp:Chart>


Run the application and notice that the data is displayed in a barchart as shown above

Important points

1. To specify title for the chart use element
2. The chart control consists of 2 main components - Series & ChartAreas. A chart can contain more than one series, and are associated with a particular Chart Area. In this example we have only one series. A series is a collection of data points.
3. To specify the X Axis title, we are using Title attribute of AxisX element and along the same line to specify the title for Y-Axis we are using Title attribute of AxisY element.
4. In this example, we are not explicitly associating the series with the ChartArea. Since we have only one series and one ChartArea, by default Series1 is associated with ChartArea1. To associate a specific series with a specific ChartArea use the ChartArea attribute of Series element as shown below.

<asp:Series Name="Series1"  ChartArea="ChartArea1">

No comments:

Post a Comment