AJAX Line Chart Control

The example in this article explains how the ajax line chart control in Asp.Net is populated using the data from sql server database. Add below html code in the aspx page of empty web application.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AJAX Line Chart Control</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h2>AJAX Line Chart Control</h2>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <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>
    </form>
</body>
</html>

 C# Code

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

       protected void ddlCountries_SelectedIndexChanged(object sender, EventArgs e)
       {
           string query = string.Format("select City,count(ID) from CountryDetails where Name = '{0}' group by City", 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} 's travel route", ddlCountries.SelectedItem.Value);
           if (x.Length > 3)
           {
               LineChart1.ChartWidth = (x.Length * 75).ToString();
           }
           LineChart1.Visible = true;
       }

       private static DataTable GetData(string query)
       {
           DataTable dt = new DataTable();
           string constr = ConfigurationManager.ConnectionStrings["constr"].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;
           }
       }

Output

Demo Code

Download Demo