ComponentOne BarChart for ASP.NET WebForms
Client-Side Tutorials / Drilling Down in BarChart Data / Step 2 of 4: Create the C1BarChart control
In This Topic
    Step 2 of 4: Create the C1BarChart control
    In This Topic

    In this step, you will add the markup that will create the C1BarChart control.

    1. If it's not already open, open the Source View of the Main.aspx page and locate the <body> tags.
    2. Since you are inserting the markup to create a C1BarChart control, add the following to the top of your page to register the C1Chart assembly:

      To write code in Source View

      <%@ Register assembly="C1.Web.Wijmo.Controls.4" namespace="C1.Web.Wijmo.Controls.C1Chart" TagPrefix="cc1" %>
      
    3. Locate the set of <div> tags within the <body> </body> tag set and insert the following markup within the tags:

      Markup to Add

      <cc1:C1BarChart ID="C1BarChart1" runat="server" Horizontal="false" >     
                   <Header Text="Order Details"></Header>
                  <TextStyle Fill-Color="#b2b2b2" FontWeight="bold" FontSize="15"></TextStyle>
                  <SeriesHoverStyles>
                      <cc1:ChartStyle StrokeWidth="1.5" Opacity="1" ><:/cc1:ChartStyle>
                  </SeriesHoverStyles>
                  <Axis>
                      <X>
                          <Labels>
                              <Style Fill-Color="#7f7f7f" FontSize="11"></Style>
                          </Labels>
                      </X>
                      <Y Compass="West">
                          <GridMajor>
                              <Style Stroke="#353539" StrokeDashArray="-"></Style>
                          </GridMajor>
                          <Labels>
                              <Style Fill-Color="#242529" FontSize="11"></Style>
                          </Labels>
                      </Y>
                  </Axis>
              <:/cc1:C1BarChart>
      
    4. Directly below the C1BarChart markup, add the following:

      To write code in Source View

      <asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" />
      
    5. The complete markup you added to your application should resemble the following:

      To write code in Source View

      <body>
      <form id="form1" runat="server">
      <div>
      <cc1:C1BarChart ID="C1BarChart1" runat="server" Horizontal="false" >
      <Header Text="Order Details"></Header>
      <TextStyle Fill-Color="#b2b2b2" FontWeight="bold" FontSize="15"></TextStyle>
      <SeriesHoverStyles>
      <cc1:ChartStyle StrokeWidth="1.5" Opacity="1" ><:/cc1:ChartStyle>
      </SeriesHoverStyles>
      <Axis>
      <X>
      <Labels>
      <Style Fill-Color="#7f7f7f" FontSize="11"></Style>
      </Labels>
      </X>
      <Y Compass="West">
      <GridMajor>
      <Style Stroke="#353539" StrokeDashArray="-"></Style>
      </GridMajor>
      <Labels>
      <Style Fill-Color="#242529" FontSize="11"></Style>
      </Labels>
      </Y>
      </Axis>
      <:/cc1:C1BarChart>
      <asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" />
      </div>
      </form>
      </body>

    In this step, you added the markup to create the C1BarChart control. In the next step, you'll add the script that will populate the chart data and control the drill-down action.

    See Also