Data can be added to the Scatter 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 scatter chart using the ScatterChartSeries 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 C1ScatterChartExtender and click OK. A C1ScatterChartExtender control is added to the page and the TargetControlID is set to Panel1.

<cc1:C1ScatterChartExtender ID="Panel1_C1ScatterChartExtender" runat="server"

            TargetControlID="Panel1">

            <SeriesTransition Duration="2000" Enabled="False">

            </SeriesTransition>

            <Animation Duration="2000" Enabled="False">

            </Animation>

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

            </Footer>

            <Legend>

                <Size Height="3" Width="30">

                </Size>

            </Legend>

            <Axis>

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

                    <Labels TextAlign="Center">

                    </Labels>

                    <GridMajor Visible="True">

                    </GridMajor>

                </Y>

            </Axis>

        </cc1:C1ScatterChartExtender>

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_C1ScatterChartExtender.
6. Locate the SeriesList and click on the ellipsis button next to the SeriesList item. The ScatterChartSeries Collection Editor appears.
7. In the ScatterChartSeries Collection Editor, click the Add buton to add a new ScatterChartSeries to the ScatterChart.
8. Select Data -> X from the properties pane in the ScatterChartSeries Collection Editor and click the ellipsis button next to the Values property to open the ChartXData Collection Editor.
9. Click Add 25 times to add 25 members and enter the following values next to to the DoubleValue property for each member: 0, 2, 3, 4, 5, 7, 7, 8, 9, 10, 11, 13, 15, 16, 17, 17.5, 18, 20, 21, 22, 23, 24, 25, 25.5, and 26.
10. Click OK to save and close the ChartXData Collection Editor.
11. Select Data -> Y from the properties pane in the ScatterChartSeries Collection Editor and and click the ellipsis button next to the Values property to open the ChartYData Collection Editor.
12. Click Add 25 times to add 25 members and enter the following data next to the DoubleValues property: 1, 1.5, 3, 4, 8, 7.5, 11, 10, 12, 16, 11, 16, 18, 17, 17.5, 17.5, 20, 20, 20, 21, 21, 21.5, 25, 25.5, and 28.
13. Click OK to save and close the ChartYData Collection Editor.
14. Set LegendEntry to False and click OK to save and close the ScatterChartSeries Collection Editor.

Adding the Data to the Scatter Chart in Source View

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

<cc1:C1ScatterChartExtender ID="Panel1_C1ScatterChartExtender" runat="server"

            Height="350" TargetControlID="Panel1" Width="350">

            <SeriesTransition Duration="2000" Enabled="False">

            </SeriesTransition>

            <Animation Duration="2000" Enabled="False">

            </Animation>

<cc1:C1ScatterChartExtender ID="Panel1_C1ScatterChartExtender" runat="server"

            TargetControlID="Panel1">

            <seriestransition duration="2000" enabled="False">

            </seriestransition>

            <animation duration="2000" enabled="False">

            </animation>

                        <SeriesList>

                <cc1:ScatterChartSeries LegendEntry="False">

                    <Data>

                        <X>

                            <Values>

                                <cc1:ChartXData DoubleValue="0" />

                                <cc1:ChartXData DoubleValue="1" />

                                <cc1:ChartXData DoubleValue="2" />

                                <cc1:ChartXData DoubleValue="3" />

                                <cc1:ChartXData DoubleValue="4" />

                                <cc1:ChartXData DoubleValue="5" />

                                <cc1:ChartXData DoubleValue="7" />

                                <cc1:ChartXData DoubleValue="7" />

                                <cc1:ChartXData DoubleValue="8" />

                                <cc1:ChartXData DoubleValue="9" />

                                <cc1:ChartXData DoubleValue="10" />

                                <cc1:ChartXData DoubleValue="11" />

                                <cc1:ChartXData DoubleValue="13" />

                                <cc1:ChartXData DoubleValue="15" />

                                <cc1:ChartXData DoubleValue="16" />

                                <cc1:ChartXData DoubleValue="17" />

                                <cc1:ChartXData DoubleValue="17.5" />

                                <cc1:ChartXData DoubleValue="18" />

                                <cc1:ChartXData DoubleValue="20" />

                                <cc1:ChartXData DoubleValue="21" />

                                <cc1:ChartXData DoubleValue="22" />

                                <cc1:ChartXData DoubleValue="23" />

                                <cc1:ChartXData DoubleValue="24" />

                                <cc1:ChartXData DoubleValue="25" />

                                <cc1:ChartXData DoubleValue="25.5" />

                                <cc1:ChartXData DoubleValue="26" />

                            </Values>

                        </X>

                        <Y>

                            <Values>

                                <cc1:ChartYData DoubleValue="1" />

                                <cc1:ChartYData DoubleValue="1" />

                                <cc1:ChartYData DoubleValue="1.5" />

                                <cc1:ChartYData DoubleValue="3" />

                                <cc1:ChartYData DoubleValue="4" />

                                <cc1:ChartYData DoubleValue="8" />

                                <cc1:ChartYData DoubleValue="7.5" />

                                <cc1:ChartYData DoubleValue="11" />

                                <cc1:ChartYData DoubleValue="10" />

                                <cc1:ChartYData DoubleValue="12" />

                                <cc1:ChartYData DoubleValue="16" />

                                <cc1:ChartYData DoubleValue="11" />

                                <cc1:ChartYData DoubleValue="11" />

                                <cc1:ChartYData DoubleValue="16" />

                                <cc1:ChartYData DoubleValue="18" />

                                <cc1:ChartYData DoubleValue="17" />

                                <cc1:ChartYData DoubleValue="17.5" />

                                <cc1:ChartYData DoubleValue="17.5" />

                                <cc1:ChartYData DoubleValue="20" />

                                <cc1:ChartYData DoubleValue="20" />

                                <cc1:ChartYData DoubleValue="20" />

                                <cc1:ChartYData DoubleValue="21" />

                                <cc1:ChartYData DoubleValue="21" />

                                <cc1:ChartYData DoubleValue="21.5" />

                                <cc1:ChartYData DoubleValue="25" />

                                <cc1:ChartYData DoubleValue="28" />

                            </Values>

                        </Y>

                    </Data>

                </cc1:ScatterChartSeries>

                </SeriesList>

            <footer compass="South" visible="False">

            </footer>

            <legend>

                <size height="3" width="30">

                </size>

            </legend>

            <axis>

                <y compass="West" visible="False">

                    <labels textalign="Center">

                    </labels>

                    <gridmajor visible="True">

                    </gridmajor>

                </y>

            </axis>

        </cc1:C1ScatterChartExtender>

This topic illustrates the following:

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