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.

If it's not already open, open the Source View of the Main.aspx page and locate the <body> tags.
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" %>
```

Locate the set of <div> tags within the <body> </body> tag set and insert the following markup within the tags:

<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>

Directly below the C1BarChart markup, add the following:
To write code in Source View
```
<asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" />
```

The complete markup you added to your application should resemble the following:

<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.