BarChart for ASP.NET WebForms
Step 1 of 4: Set up your application
Client-Side Tutorials > Drilling Down in BarChart Data > Step 1 of 4: Set up your application

Step 1 of Set up your application

In this step, you'll create your application and add folders to your application. You'll also add a database file and two code files to the folders.

  1. Add a reference to the C1.Web.Wijmo.4.dll assembly to your project.
  2. Right-click your project name and select Add | Web Form. Enter a name for your Web Form, in this case enter Name, and click OK.
  3. Right-click your application name and select Add | Add ASP.NET Folder | App_Code.
  4. Right-click the application name again and select Add | Add ASP.NET Folder | App_Data from the list.
  5. Right-click the App_Code file. There are two ways to add a code file to the App_Code file:
    1. Select Add Existing File from the list.
      1. Browse to locate the C1Chart - Drilling Down sample and open the App_Code file in the sample.
      2. Select the Order.cs code file and click OK. The file will be added to the application.
    2. Select Add | Code File from the list. Name the code file Orders.cs. Add the following code to the file when it opens:

      To write code in C#

      C#
      Copy Code
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
       
      ///<summary>
      /// Summary description for Orders 
      /// </summary>
      public class Orders
      {
       
          private double amount;
          private string year,month,day;
         
       
         
          public string Year
          {
              get
              {
                  return year;
              }
              set
              {
                  year = value;
              }
          }
          public string Month
          {
              get
              {
                  switch (month)
                  {
                      case "1": month = "Jan"; break;
                      case "2": month = "Feb"; break;
                      case "3": month = "Mar"; break;
                      case "4": month = "Apr"; break;
                      case "5": month = "May"; break;
                      case "6": month = "Jun"; break;
                      case "7": month = "Jul"; break;
                      case "8": month = "Aug"; break;
                      case "9": month = "Sep"; break;
                      case "10": month = "Oct"; break;
                      case "11": month = "Nov"; break;
                      case "12": month = "Dec"; break;
                  }
                  return month;
              }
              set
              {
                  month = value;
              }
          }
          public string Day
          {
              get
              {
       
                  return day;
              }
              set
              {
                  day = value;
              }
          }
        
          public double OrderAmount
          {
              get
              {
                  return amount;
              }
              set
              {
                  amount = value;
              }
          }
       
      }
      
  6. Right-click the App_Code file again. There are two ways to add the second code file to the application:
    1. Select Add Existing File from the list.
      1. Browse to locate the C1Chart - Drilling Down sample and open the App_Code file in the sample.
      2. Select the GetOrders.cs code file and click OK. The file will be added to the application.
    2. Select Add | Code File from the list. Name the code file GetOrders.cs. Add the following code to the file when it opens:

      To write code in C#

      C#
      Copy Code
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.Services;
      using System.Data;
      using System.Data.OleDb;
      using System.Web.Script.Services;
       
      /// <summary>
      /// Summary description for GetOrders
      /// </summary>
      [WebService(Namespace = "http://tempuri.org/")]
      [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
      // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
       [System.Web.Script.Services.ScriptService]
      public class GetOrders : System.Web.Services.WebService {
       
          public GetOrders () {
       
              //Uncomment the following line if using designed components
              //InitializeComponent();
          }
       
          [WebMethod]
          [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
          public List<Orders> GetDataOnLoad()
          {
              OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/OrdersDataBase.mdb"));
              OleDbCommand cmd = new OleDbCommand("Select Year(OrderDate), Sum(OrderAmount) from OrdersByDate where Year(OrderDate) In (Select Distinct(Year(OrderDate)) from OrdersByDate) Group By Year(OrderDate)", con);
              OleDbDataAdapter da = new OleDbDataAdapter(cmd);
              DataTable dt = new DataTable();
              da.Fill(dt);
              List<Orders> orders = new List<Orders>();
              for (int i = i < dt.Rows.Count; i++)
              {
                  Orders od = new Orders();
                  od.Year = Convert.ToString(dt.Rows[i][0]);
                  od.OrderAmount = Convert.ToDouble(dt.Rows[i][1]);
                  orders.Add(od);
              }
              return orders;
          }
       
          [WebMethod]
          [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
          public List<Orders> GetOrderByMonth(string Year)
          {
              OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/OrdersDataBase.mdb"));
              OleDbCommand cmd = new OleDbCommand("Select Month(OrderDate), Sum(OrderAmount) from OrdersByDate where Month(OrderDate) In (Select Distinct Month(OrderDate) from OrdersByDate) and Year(OrderDate)="+ Year + " Group By Month(OrderDate)", con);
              OleDbDataAdapter da = new OleDbDataAdapter(cmd);
              DataTable dtMonths = new DataTable();
              da.Fill(dtMonths);
              List<Orders> orders = new List<Orders>();
              for (int i = i < dtMonths.Rows.Count; i++)
              {
                  Orders od = new Orders();
                  od.Month = Convert.ToString(dtMonths.Rows[i][0]);
                  od.OrderAmount = Convert.ToDouble(dtMonths.Rows[i][1]);
                  orders.Add(od);
              }
              return orders;
          }
          [WebMethod]
          [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
          public List<Orders> GetOrderByDay(string Month, string Year)
          {
              switch (Month)
              {
                  case "Jan": Month = "1"; break;
                  case "Feb": Month = "2"; break;
                  case "Mar": Month = "3"; break;
                  case "Apr": Month = "4"; break;
                  case "May": Month = "5"; break;
                  case "Jun": Month = "6"; break;
                  case "Jul": Month = "7"; break;
                  case "Aug": Month = "8"; break;
                  case "Sep": Month = "9"; break;
                  case "Oct": Month = "10"; break;
                  case "Nov": Month = "11"; break;
                  case "Dec": Month = "12"; break;
              }
              OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/OrdersDataBase.mdb"));
              OleDbCommand cmd = new OleDbCommand("Select Day(OrderDate), Sum(OrderAmount) from OrdersByDate where Day(OrderDate) In (Select Distinct Day(OrderDate) from OrdersByDate) and Year(OrderDate)=" + Year + " and Month(OrderDate)="+Month+" Group By Day(OrderDate)", con);
              OleDbDataAdapter da = new OleDbDataAdapter(cmd);
              DataTable dtDays = new DataTable();
              da.Fill(dtDays);
              List<Orders> orders = new List<Orders>();
              for (int i = i < dtDays.Rows.Count; i++)
              {
                  Orders od = new Orders();
                  od.Day = Convert.ToString(dtDays.Rows[i][0]);
                  od.OrderAmount = Convert.ToDouble(dtDays.Rows[i][1]);
                  orders.Add(od);
              }
              return orders;
          }
      }
      
  7. Right-click the application name again to add the web service that the application needs. There are two ways to add this file:
    1. a. Select Add Existing File from the list.
      1. Browse to the C1Chart - Drilling Down sample.
      2. Select the GetOrders.asmx file and click OK. The file will be added to the application.
    2. Select Add | New Items | WebService.asmx from the list. Name the code file GetOrders.asmx.
      1. In the Solution Explorer, open the GetOrders.asmx node and delete the GetOrders.asmx.cs file. The file isn't necessary for the application.
      2. Double-click GetOrders.asmx to open the file. Replace the existing code with the following syntax:

        To write code in Source View

        <%http://helpcentral.componentone.com/nethelp/c1studioWeb%>
        
  8. Right-click the App_Data folder and select Add | Existing Item from the list. Browse to the location where you saved the C1Chart - Drill Down sample and locate and select the OrdersDataBase.mdb item. Click OK to add the database to your application.
See Also