The ScatterChartSeries object represents the data being plotted for the Scatter chart. You can have one or more ScatterChartSeries on the C1ScatterChart. Each ScatterChartSeries is represented in a different color. The ScatterChartSeries can be added in design view through the ScatterChartSeries Collection Editor, in source view through the ScatterChartSeries element, or programmatically through the ScatterChartSeries object.

Adding a ScatterChartSeries in Code View:

1. Right-Click the form and select View Code to view the code file, then add the following directive to declare the C1.Web.Wijmo.Controls.Chart namespace:

   To write code in C#

   C#	Copy Code
   Using C1.Web.Wijmo.Controls.Chart;

2. Add the following function in your code file to create and add the data to the C1ScatterChart:

   To write code in C#

   C#

   Copy Code

   private void PrepareOptions() { var valuesX = new List<double?>() { 161.2, 167.5, 159.5, 157, 155.8, 170, 159.1, 166, 176.2, 160.2 }; var valuesY = new List<double?>() { 51.6, 59, 49.2, 63, 53.6, 59, 47.6, 69.8, 66.8, 75.2}; //serieslist Female var series = new ScatterChartSeries(); this.C1ScatterChart1.SeriesList.Add(series); series.MarkerType = MarkerType.Circle; series.Data.X.AddRange(valuesX.ToArray<double?>()); series.Data.Y.AddRange(valuesY.ToArray<double?>()); series.Label = "Female"; series.LegendEntry = true; //series Male valuesX = new List<double?>() { 174, 175.3, 193.5, 186.5, 187.2, 181.5, 184, 184.5, 175, 184}; valuesY = new List<double?>() { 65.6, 71.8, 80.7, 72.6, 78.8, 74.8, 86.4, 78.4, 62, 81.6}; series = new ScatterChartSeries(); this.C1ScatterChart1.SeriesList.Add(series); series.MarkerType = MarkerType.Diamond; series.Data.X.AddRange(valuesX.ToArray<double?>()); series.Data.Y.AddRange(valuesY.ToArray<double?>()); series.Label = "Male"; series.LegendEntry = true; }

3. Add the following code to your code page to call the function when it's not postback:

   To write code in C#

   C#	Copy Code
   protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { PrepareOptions(); } }

Adding a ScatterChartSeries in Design View:

1. Select the C1ScatterChart control and click on its smart tag.
2. In the C1ScatterChart tasks menu, select the SeriesList item and this will open the ScatterChartSeries Collection Editor dialog box.
3. Click Add to add a ScatterChartSeries member to the SeriesList collection.

Adding a ScatterChartSeries in Source View:

To write code in Source View

<SeriesList>
 <cc1:ScatterChartSeries Label="Female" LegendEntry="True">
    <Data>
       <X>
          <Values>
              <cc1:ChartXData DoubleValue="161.2" />
              <cc1:ChartXData DoubleValue="167.5" />
              <cc1:ChartXData DoubleValue="159.5" />
              <cc1:ChartXData DoubleValue="157" />
              <cc1:ChartXData DoubleValue="155.8" />
              <cc1:ChartXData DoubleValue="170" />
              <cc1:ChartXData DoubleValue="159.1" />
              <cc1:ChartXData DoubleValue="166" />
              <cc1:ChartXData DoubleValue="176.2" />
              <cc1:ChartXData DoubleValue="160.2" />
          </Values>
      </X>
      <Y>
         <Values>
              <cc1:ChartYData DoubleValue="51.6" />
              <cc1:ChartYData DoubleValue="59" />
              <cc1:ChartYData DoubleValue="49.2" />
              <cc1:ChartYData DoubleValue="63" />
              <cc1:ChartYData DoubleValue="53.6" />
              <cc1:ChartYData DoubleValue="59" />
              <cc1:ChartYData DoubleValue="47.6" />
              <cc1:ChartYData DoubleValue="69.8" />
              <cc1:ChartYData DoubleValue="66.8" />
              <cc1:ChartYData DoubleValue="75.2" />
          </Values>
      </Y>
   </Data>
  </cc1:ScatterChartSeries>
 <cc1:ScatterChartSeries Label="Male" LegendEntry="True">
    <Data>
       <X>
          <Values>
             <cc1:ChartXData DoubleValue="174" />
             <cc1:ChartXData DoubleValue="175.3" />
             <cc1:ChartXData DoubleValue="193.5" />
             <cc1:ChartXData DoubleValue="186.5" />
             <cc1:ChartXData DoubleValue="187.2" />
             <cc1:ChartXData DoubleValue="181.5" />
             <cc1:ChartXData DoubleValue="184" />
             <cc1:ChartXData DoubleValue="184.5" />
             <cc1:ChartXData DoubleValue="175" />
             <cc1:ChartXData DoubleValue="184" />
          </Values>
       </X>
      <Y>
        <Values>
             <cc1:ChartYData DoubleValue="65.6" />
              <cc1:ChartYData DoubleValue="71.8" />
              <cc1:ChartYData DoubleValue="80.7" />
              <cc1:ChartYData DoubleValue="72.6" />
              <cc1:ChartYData DoubleValue="78.8" />
              <cc1:ChartYData DoubleValue="74.8" />
              <cc1:ChartYData DoubleValue="86.4" />
              <cc1:ChartYData DoubleValue="78.4" />
              <cc1:ChartYData DoubleValue="62" />
              <cc1:ChartYData DoubleValue="81.6" />
       </Values>
         </Y>
    </Data>
  </cc1:ScatterChartSeries>
</SeriesList>