Data can be added to the Composite chart by defining a series. Once you add a series you can add the ChartXData and ChartYData. The following values can be added to the ChartXData or ChartYData: DateTimeValue, DoubleValue, and StringValue.

To add data to the bar chart using the CompositeChartSeries Collection, complete the following:

1. In your Web application, add a reference to the C1.Web.Wijmo.Extenders.3.dll and then add a standard Panel control to the main content of  your page.
2. Click the Panel smart tag and select Add Extender from the Panel Tasks menu.
3. In the Extender Wizard, select C1CompositeChartExtender and click OK. A CompositeChartExtender control is added to the page and the TargetControlID is set to Panel1.

 <cc1:C1CompositeChartExtender ID="Panel1_C1CompositeChartExtender"

            runat="server" TargetControlID="Panel1">

            <Footer Compass="South" Visible="False">

            </Footer>

            <Axis>

                <Y Compass="West" Visible="False">

                    <Labels TextAlign="Center">

                    </Labels>

                    <GridMajor Visible="True">

                    </GridMajor>

                </Y>

            </Axis>

        </cc1:C1CompositeChartExtender>

4. Click the Design tab to navigate to Design view.
5. Select View | Properties Window in the Visual Studio menu.
6. Click the drop-down list at the top of the Properties window and select Panel1_C1CompositeChartExtender.
7. Select the ellipsis button next to the SeriesList property. The CompositeChartSeries Collection Editor dialog box opens.
8. Click Add five time to add five new members.
9. Expand the Data node for the first four members and enter the following values:

 

Member	Property	Value
0	Data.X.StringValues Data.Y.DoubleValues Label	Desktops,Notebooks,AIO,Tablets,Phones 50, 30, 40, 70, 20 West
1	Data.X.StringValues Data.Y.DoubleValues Label	Desktops,Notebooks,AIO,Tablets,Phones 20, 20, 30, 20, 10 South
2	Data.X.StringValues Data.Y.DoubleValues Label	Desktops,Notebooks,AIO,Tablets,Phones 30, 40, 40, 20, 50 East
3	Data.X.StringValues Data.Y.DoubleValues Label	Desktops,Notebooks,AIO,Tablets,Phones 30, 60, 20, 90, 50 North

10. For Member 4 (the fifth member), click the ellipsis button next to the PieSeriesList option. We will use this to create a Pie chart.
11. Select Member 4 and set the Type property to Pie.
12. Click Add three times to add three new members in the PieChartSeries Collection Editor.

Enter the following values for each property:

 

Member	Data Property	Label Property	Offset Property
0	46.78	MacBook Pro	15
1	23.18	iMac	0
2	20.25	MacBook	0

 

13. Click OK to close the PieChartSeries Collection Editor.
14. Click OK to close the CompositeChartSeries Collection Editor.
15. Run the project to see the multiple chart types on the composite chart.

Adding Data to the Composite Chart in Source View:

To add data to a Bar chart and Pie chart in the Composite chart, click the source tab and add the following code in your source file:

<cc1:C1CompositeChartExtender ID="Panel1_C1CompositeChartExtender"

            runat="server" Height="300" TargetControlID="Panel1" Width="450">

            <SeriesList>

                <cc1:CompositeChartSeries Label="West" LegendEntry="True" Type="Column">

                    <Data>

                        <X>

                            <Values>

                                <cc1:ChartXData StringValue="Desktops" />

                                <cc1:ChartXData StringValue="Notebooks" />

                                <cc1:ChartXData StringValue="AIO" />

                                <cc1:ChartXData StringValue="Tablets" />

                                <cc1:ChartXData StringValue="Phones" />

                            </Values>

                        </X>

                        <Y>

                            <Values>

                                <cc1:ChartYData DoubleValue="50" />

                                <cc1:ChartYData DoubleValue="30" />

                                <cc1:ChartYData DoubleValue="40" />

                                <cc1:ChartYData DoubleValue="70" />

                                <cc1:ChartYData DoubleValue="20" />

                            </Values>

                        </Y>

                    </Data>

                </cc1:CompositeChartSeries>

                <cc1:CompositeChartSeries Label="South" LegendEntry="True" Type="Column">

                    <Data>

                        <X>

                            <Values>

                                <cc1:ChartXData StringValue="Desktops" />

                                <cc1:ChartXData StringValue="Notebooks" />

                                <cc1:ChartXData StringValue="AIO" />

                                <cc1:ChartXData StringValue="Tablets" />

                                <cc1:ChartXData StringValue="Phones" />

                            </Values>

                        </X>

                        <Y>

                            <Values>

                                <cc1:ChartYData DoubleValue="20" />

                                <cc1:ChartYData DoubleValue="20" />

                                <cc1:ChartYData DoubleValue="30" />

                                <cc1:ChartYData DoubleValue="20" />

                                <cc1:ChartYData DoubleValue="10" />

                            </Values>

                        </Y>

                    </Data>

                </cc1:CompositeChartSeries>

                <cc1:CompositeChartSeries Label="East" LegendEntry="True" Type="Column">

                    <Data>

                        <X>

                            <Values>

                                <cc1:ChartXData StringValue="Desktops" />

                                <cc1:ChartXData StringValue="Notebooks" />

                                <cc1:ChartXData StringValue="AIO" />

                                <cc1:ChartXData StringValue="Tablets" />

                                <cc1:ChartXData StringValue="Phones" />

                            </Values>

                        </X>

                        <Y>

                            <Values>

                                <cc1:ChartYData DoubleValue="30" />

                                <cc1:ChartYData DoubleValue="40" />

                                <cc1:ChartYData DoubleValue="40" />

                                <cc1:ChartYData DoubleValue="20" />

                                <cc1:ChartYData DoubleValue="50" />

                            </Values>

                        </Y>

                    </Data>

                </cc1:CompositeChartSeries>

                <cc1:CompositeChartSeries Label="North" LegendEntry="True" Type="Column">

                    <Data>

                        <X>

                            <Values>

                                <cc1:ChartXData StringValue="Desktops" />

                                <cc1:ChartXData StringValue="Notebooks" />

                                <cc1:ChartXData StringValue="AIO" />

                                <cc1:ChartXData StringValue="Tablets" />

                                <cc1:ChartXData StringValue="Phones" />

                            </Values>

                        </X>

                        <Y>

                            <Values>

                                <cc1:ChartYData DoubleValue="30" />

                                <cc1:ChartYData DoubleValue="60" />

                                <cc1:ChartYData DoubleValue="20" />

                                <cc1:ChartYData DoubleValue="90" />

                                <cc1:ChartYData DoubleValue="50" />

                            </Values>

                        </Y>

                    </Data>

                </cc1:CompositeChartSeries>

                <cc1:CompositeChartSeries LegendEntry="True" Type="Pie">

                    <PieSeriesList>

                        <cc1:PieChartSeries Data="46.78" Label="MacBook Pro" LegendEntry="True"

                            Offset="15">

                        </cc1:PieChartSeries>

                        <cc1:PieChartSeries Data="23.18" Label="iMac" LegendEntry="True">

                        </cc1:PieChartSeries>

                        <cc1:PieChartSeries Data="20.25" Label="MacBook" LegendEntry="True">

                        </cc1:PieChartSeries>

                    </PieSeriesList>

                </cc1:CompositeChartSeries>

            </SeriesList>

            <Footer Compass="South" Visible="False">

            </Footer>

            <Axis>

                <Y Compass="West" Visible="False">

                    <Labels TextAlign="Center">

                    </Labels>

                    <GridMajor Visible="True">

                    </GridMajor>

                </Y>

            </Axis>

        </cc1:C1CompositeChartExtender>

This Topic Illustrates the Following:

The following image shows a C1CompositeChart with two chart types added, Bar and Pie: