How to Create Line Chart Dynamically in Asp.Net

Description:-

Line Chart is nothing but a Graph to understand easily from design. User can read easily data from graph and it’s pretty easy to read data. Line chart is Chart controls in asp.net where we can draw line in chart control and create graph in webpage so user can easily understand and we can bind data from server and set in graph to live data we can read and we can set update panel control so we can update data on set timer controls. 

Here we will create line chart from data base using chart control and based on selected country and data comes from publishers table and based on country so we can bind country related state in chart control and see amount related state which is related publisher name. 

So let’s start to create line chart in webpage using Ajaxcontroltoolkit and Chart Controls.

Create table:-

CREATE TABLE [dbo].[publishers](
   [pub_id] [int] IDENTITY(1,1) NOT NULL,
   [pub_name] [varchar](50) NOT NULL,
   [state] [varchar](50) NOT NULL,
   [country] [varchar](50) NOT NULL,
   [Amounts] [bigint] NULL,
 CONSTRAINT [PK_publishers] PRIMARY KEY CLUSTERED
(
   [pub_id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF,IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  =ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Default.aspx:-

<div style="height: 392px; width: 477px">
  <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  </cc1:ToolkitScriptManager>
  <asp:DropDownList ID="ddlCountries" runat="server"OnSelectedIndexChanged="ddlCountries_SelectedIndexChanged" AutoPostBack="true"> </asp:DropDownList>
  <hr />
  <cc1:LineChart ID="LineChart1" runat="server" ChartHeight="300"ChartWidth="450"ChartType="Basic" ChartTitleColor="#0E426C" Visible="false"CategoryAxisLineColor="#D08AD9" ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB"> </cc1:LineChart>
</div>

Before that Register AjaxControlToolKit in your Webpage.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

Default.aspx.cs:-

Now Create DropDownList SelectionChanged event so based on Selection we can create Chart in Webpage.

protected void ddlCountries_SelectedIndexChanged(object sender, EventArgs e)
{
  string query = string.Format("select distinct(state),sum(Amounts) from publishers where country='{0}' group by state", ddlCountries.SelectedItem.Value);
  DataTable dt = GetData(query);

  string[] x = new string[dt.Rows.Count];
  decimal[] y = new decimal[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]);
  }
  LineChart1.Series.Add(new AjaxControlToolkit.LineChartSeries { Data = y });
  LineChart1.CategoriesAxis = string.Join(",", x);
  LineChart1.ChartTitle = string.Format("{0} Order Distribution", ddlCountries.SelectedItem.Value);
           
  if (x.Length> 3)
  {
    LineChart1.ChartWidth = (x.Length * 75).ToString();
  }
  LineChart1.Visible = true;
}

Here I have Passed Inline Query because of you can Understand we can create Store Procedure and pass in Query.

Now Create GetData () Method for getting Data from Sql Server.

private static DataTable GetData(string query)
{
  DataTable dt = new DataTable();
  string constr =ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
  using (SqlConnection con = new SqlConnection(constr))
  {
    using (SqlCommand cmd = new SqlCommand(query))
    {
      using (SqlDataAdapter sda = new SqlDataAdapter())
      {
        cmd.CommandType = CommandType.Text;
        cmd.Connection = con;
        sda.SelectCommand = cmd;
        sda.Fill(dt);
      }
    }
    return dt;
  }
}

Now on page load event bind DropDownList Controls so we can select Country from DropDownList Controls.

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    string query = "select distinct country from publishers";
    DataTable dt = GetData(query);
    ddlCountries.DataSource = dt;
    ddlCountries.DataTextField = "country";
    ddlCountries.DataValueField = "country";
    ddlCountries.DataBind();
    ddlCountries.Items.Insert(0, new ListItem("Select", ""));
  }
}

Output:-

Author : Umesh Patel

Related Posts