Data can be added to the Pie 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. In this example you will use string values for the ChartXData and double values for ChartYData.

To add data to the bar chart using the PieChartSeries 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 C1PieChartExtender and click OK. A C1PieChartExtender control is added to the page and the TargetControlID is set to Panel1.

<cc1:C1PieChartExtender ID="Panel1_C1PieChartExtender" runat="server"

            TargetControlID="Panel1">          

<SeriesTransition Duration="1000" Easing="EaseOutBounce">

            </SeriesTransition>

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

            </Footer>

            <Axis>

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

                    <Labels TextAlign="Center">

                    </Labels>

                    <GridMajor Visible="True">

                    </GridMajor>

                </Y>

            </Axis>

        </cc1:C1PieChartExtender>

4. Select View | Properties Window in the Visual Studio menu.
5. Click the drop-down list at the top of the Properties window and select Panel1_C1PieChartExtender.
6. Locate the SeriesList and click on the ellipsis button next to the SeriesList item. The PieChartSeries Collection Editor appears.
7. In the PieChartSeries Collection Editor, click the Add buton to add a new PieChartSeries to the PieChart.
8. Click Add five times to add five new members in the PieChartSeries Collection Editor.
9. 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
3	5.41	Mac Pro
4	3.44	Mac Mini

 

10. Click OK to save and close the PieChartSeries Collection Editor.

Adding Data to the Pie Chart in Source View:

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

<cc1:C1PieChartExtender ID="Panel1_C1PieChartExtender" runat="server"

            TargetControlID="Panel1">

            <SeriesTransition Duration="1000" Easing="EaseOutBounce">

            </SeriesTransition>

            <SeriesList>

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

                <cc1:PieChartSeries Data="5.41" Label="Mac Pro" LegendEntry="True">

                </cc1:PieChartSeries>

                <cc1:PieChartSeries Data="3.44" Label="Mac Mini" LegendEntry="True">

                </cc1:PieChartSeries>

            </SeriesList>

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

            </Footer>

            <Axis>

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

                    <Labels TextAlign="Center">

                    </Labels>

                    <GridMajor Visible="True">

                    </GridMajor>

                </Y>

            </Axis>

        </cc1:C1PieChartExtender>

This topic illustrates the following:

When you run your project the Pie chart will appear like the following: