Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

ASP.NET Chart Control

Suggested Video Tutorials
C# Tutorial
ASP.NET Tutorial
ADO.NET Tutorial



In this video we will discuss displaying data using asp.net chart control. 



We want to display Student Names and their Total Marks in a barchart 
asp.net chart control

This is how the rendered barchart should be
chart control in asp.net 4.0

Step 1 : Drag and drop Chart control from the toolbox on to the web from

Step 2 : Modify the HTML of the Chart control as shown below
<asp:Chart ID="Chart1" runat="server" Width="350">
    <Titles>
        <asp:Title Text="Total marks of students">
        </asp:Title>
    </Titles>
    <Series>
        <asp:Series Name="Series1"  ChartArea="ChartArea1">
            <Points>
                <asp:DataPoint AxisLabel="Mark" YValues="800" />
                <asp:DataPoint AxisLabel="Steve" YValues="900" />
                <asp:DataPoint AxisLabel="John" YValues="700" />
                <asp:DataPoint AxisLabel="Mary" YValues="900" />
                <asp:DataPoint AxisLabel="Ben" YValues="600" />
            </Points>
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
            <AxisX Title="Student Name">
            </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 expected.

Please Note : 
1. To specify title for the chart use <Titles> 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">

If you specify a ChartArea that does not exist, you will get a run time exception - A chart element with the name 'ChartArea2' could not be found in the 'ChartAreaCollection'. In this demo we are displaying data using a Barchart. In our next video we will discuss different types of charts.

asp.net chart tutorial

3 comments:

  1. error showing


    Server Error in '/' Application.
    No http handler was found for request type 'GET'
    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.Web.HttpException: No http handler was found for request type 'GET'

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:


    [HttpException (0x80004005): No http handler was found for request type 'GET']
    System.Web.HttpApplication.MapIntegratedHttpHandler(HttpContext context, String requestType, VirtualPath path, String pathTranslated, Boolean useAppConfig, Boolean convertNativeStaticFileModule) +751
    System.Web.HttpServerUtility.Execute(String path, TextWriter writer, Boolean preserveForm) +591


    ReplyDelete
  2. try UseImageLocation in ImageStorageMode (chart's properties)

    ReplyDelete

It would be great if you can help share these free resources