Saturday, October 24, 2015

Asp.net: Display data in Chart control from database

In this article I am going to explain how to display/show the data in Asp.net chart control from database

Description:

I have a table Tb_Population and want to display the population state wise in pie chart.

Asp.net: Display data in Chart control from database

Implementation:
Add a webform to project. Drag and drop the chart control from tootlbox to webform.

HTML Markup:

<asp:Chart ID="Chart1" runat="server" Width="800px">       
        <Legends>       
                <asp:Legend Alignment="Center" Docking="Left" IsTextAutoFit="true" Name="StateName" LegendStyle="Table"/>
            </Legends>
            <Series>
                <asp:Series Name="Series1" ChartType="Pie"
                    CustomProperties="PieLineColor=Black, PieLabelStyle=Outside">                               
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">                 
                    <Area3DStyle Enable3D="True" Inclination="0" Rotation="0" />
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

Import the namespace:
C#:
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Web.UI.DataVisualization.Charting;

VB:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.UI.DataVisualization.Charting

Create sqlconnection
C#:


SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());

VB:
Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())

Bind the chart control
Create a method and write the code to bind the data to chart control. Call the method on page load.
C# code:
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindChart();
        }
    }
    public void BindChart()
    {
        try
        {
            SqlDataAdapter adp = new SqlDataAdapter("Select StateName,TotalPopulation from Tb_Population", con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            string[] x = new string[dt.Rows.Count];
            int[] y = new int[dt.Rows.Count];
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                x[i] = dt.Rows[i][0].ToString();
                y[i] = Convert.ToInt32(dt.Rows[i][1]);
            }
            foreach (Series s in Chart1.Series)
            {
                s.ToolTip = "State: #VALX\nPopulation: #VALY\nPercentage: #PERCENT";
            }
            Chart1.Series[0].Points.DataBindXY(x, y);
            Chart1.Series[0].Label = "#PERCENT";
            Chart1.Series[0].LegendText = "#AXISLABEL";         
        }
        catch (Exception ex)
        {
        }
    }

VB code:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindChart()
        End If
    End Sub
    Public Sub BindChart()
        Try
            Dim adp As New SqlDataAdapter("Select StateName,TotalPopulation from Tb_Population", con)
            Dim dt As New DataTable()
            adp.Fill(dt)
            Dim x As String() = New String(dt.Rows.Count - 1) {}
            Dim y As Integer() = New Integer(dt.Rows.Count - 1) {}
            For i As Integer = 0 To dt.Rows.Count - 1
                x(i) = dt.Rows(i)(0).ToString()
                y(i) = Convert.ToInt32(dt.Rows(i)(1))
            Next
            For Each s As Series In Chart1.Series
                s.ToolTip = "State: #VALX" & vbLf & "Population: #VALY" & vbLf & "Percentage: #PERCENT"
            Next
            Chart1.Series(0).Points.DataBindXY(x, y)
            Chart1.Series(0).Label = "#PERCENT"
            Chart1.Series(0).LegendText = "#AXISLABEL"
        Catch ex As Exception
        End Try
    End Sub

Build and run the project.

 Demo:
Asp.net: Display data in Chart control from database

 In this article we have learn how to bind the asp.net chart control from database using C# and VB.NETI hope you enjoyed this article. 

2 comments: