ASP.net4.0 Chart Control

July 16, 2011

ASP.net4.0 Chart Control

Here is a sample Code
1 ASP.net4.0 Chart Control

<body>
<form id="form1" runat="server">
<div>
<asp:chart ID="Chart1" runat="server">
<Series >
<asp:Series Name="Championships" YValueType="Int32" ChartType="Column" ChartArea="vinChartArea">

<Points>
<asp:DataPoint AxisLabel="India" YValues="17" />
<asp:DataPoint AxisLabel="Pak" YValues="6" />
<asp:DataPoint AxisLabel="USA" YValues="12" />
</Points>

</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="vinChartArea"></asp:ChartArea></ChartAreas>
</asp:chart>
</div>
</form>
</body>

Here is the Output

2.Creating Chart Programmatically

aspx code with different look.

<body>
<form id="form1" runat="server">
<div>
<asp:chart ID="Chart1" runat="server">
<Titles>
<asp:Title Text="World Cup 2011"></asp:Title>
</Titles>
<Series >
<asp:Series Name="Championships" YValueType="Int32" ChartType="Line" BorderWidth="5" Color="Red" ChartArea="vinChartArea">

</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="vinChartArea" ></asp:ChartArea></ChartAreas>
</asp:chart>
</div>
</form>
</body>

VB Code

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

Dim ChampionshipsSeries = Chart1.Series("Championships")

'Add data points

ChampionshipsSeries.Points.AddXY("India", 17)

ChampionshipsSeries.Points.AddXY("Pak", 3)

ChampionshipsSeries.Points.AddXY("Shrilanka", 12)

ChampionshipsSeries.Points.AddXY("USA", 4)

End If

End Sub

3. Connecting Chart with DataSet/Datatable

Imports System.Data.SqlClient

Imports System.Data
Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then

            Using connection As New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("vinConn").ConnectionString)
                ' connection.Close()
                connection.Open()
                Dim sqlComm As SqlCommand
                Dim sqlReader As SqlDataReader
                Dim dt As New DataTable()

                Try
                    sqlComm = New SqlCommand("Select team, matchwon from wc", connection)
                    sqlReader = sqlComm.ExecuteReader()
                    dt.Load(sqlReader)

                    sqlReader.Close()
                    sqlComm.Dispose()
                    Chart1.Series("Championships").XValueMember = "team" ' column from select query
                    Chart1.Series("Championships").YValueMembers = "matchwon"
                    Chart1.DataSource = dt
                    Chart1.DataBind()
                    connection.Close()


                Catch ex As Exception
                    Response.Write(ex.Message)
                    connection.Close()

                End Try
                connection.Close()
            End Using
        End If
    End Sub
End Class

Connection String in web.config

- Vinod Kotiya

www.vinodkotiya.com