ComponentOne ScatterChart for ASP.NET Web Forms
Quick Start / Step 2 of 5: Adding Data to the C1ScatterChart
In This Topic
    Step 2 of 5: Adding Data to the C1ScatterChart
    In This Topic

    In this step, you will programmatically create the ScatterChartSeries and customize the series marker and label.

    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, 172.5, 170.9, 172.9, 153.4, 160, 147.2, 168.2, 175, 157, 167.6, 159.5, 175, 166.8, 176.5, 170.2, 174, 173, 179.9, 170.5, 160, 154.4, 162, 176.5, 160, 152, 162.1, 170, 160.2, 161.3, 166.4, 168.9, 163.8, 167.6, 160, 161.3, 167.6, 165.1, 160, 170, 157.5, 167.6, 160.7, 163.2, 152.4, 157.5, 168.3, 180.3, 165.5, 165, 164.5, 156, 160, 163, 165.7, 161, 162, 166, 174, 172.7, 167.6, 151.1, 164.5, 163.5, 152, 169, 164, 161.2, 155, 170, 176.2, 170, 162.5, 170.3, 164.1, 169.5, 163.2, 154.5, 159.8, 173.2, 170, 161.4, 169, 166.2, 159.4, 162.5, 159, 162.8, 159, 179.8, 162.9, 161, 151.1, 168.2, 168.9, 173.2, 171.8, 178, 164.3, 163, 168.5, 166.8, 172.7, 163.5, 169.4, 167.8, 159.5, 167.6, 161.2, 160, 163.2, 162.2, 161.3, 149.5, 157.5, 163.2, 172.7, 155, 156.5, 164, 160.9, 162.8, 167, 160, 160, 168.9, 158.2, 156, 160, 167.1, 158, 167.6, 156, 162.1, 173.4, 159.8, 170.5, 159.2, 157.5, 161.3, 162.6, 160, 168.9, 165.1, 162.6, 165.1, 166.4, 160, 152.4, 170.2, 162.6, 170.2, 158.8, 172.7, 167.6, 162.6, 167.6, 156.2, 175.2, 172.1, 162.6, 160, 165.1, 182.9, 166.4, 165.1, 177.8, 165.1, 175.3, 154.9, 158.8, 172.7, 168.9, 161.3, 167.6, 165.1, 175.3, 157.5, 163.8, 167.6, 165.1, 165.1, 168.9, 162.6, 164.5, 176.5, 168.9, 175.3, 159.4, 160, 170.2, 162.6, 167.6, 162.6, 160.7, 160, 157.5, 162.6, 152.4, 170.2, 165.1, 172.7, 165.1, 170.2, 170.2, 170.2, 161.3, 167.6, 167.6, 165.1, 162.6, 152.4, 168.9, 170.2, 175.2, 175.2, 160, 165.1, 174, 170.2, 160, 167.6, 167.6, 167.6, 154.9, 162.6, 175.3, 171.4, 157.5, 165.1, 160, 174, 162.6, 174, 162.6, 161.3, 156.2, 149.9, 169.5, 160, 175.3, 169.5, 160, 172.7, 162.6, 157.5, 176.5, 164.4, 160.7, 174, 163.8 };
                 var valuesY = new List<double?>() { 51.6, 59, 49.2, 63, 53.6, 59, 47.6, 69.8, 66.8, 75.2, 55.2, 54.2, 62.5, 42, 50, 49.8, 49.2, 73.2, 47.8, 68.8, 50.6, 82.5, 57.2, 87.8, 72.8, 54.5, 59.8, 67.3, 67.8, 47, 46.2, 55, 83, 54.4, 45.8, 53.6, 73.2, 52.1, 67.9, 56.6, 62.3, 58.5, 54.5, 50.2, 60.3, 58.3, 56.2, 50.2, 72.9, 59.8, 61, 69.1, 55.9, 46.5, 54.3, 54.8, 60.7, 60, 62, 60.3, 52.7, 74.3, 62, 73.1, 80, 54.7, 53.2, 75.7, 61.1, 55.7, 48.7, 52.3, 50, 59.3, 62.5, 55.7, 54.8, 45.9, 70.6, 67.2, 69.4, 58.2, 64.8, 71.6, 52.8, 59.8, 49, 50, 69.2, 55.9, 63.4, 58.2, 58.6, 45.7, 52.2, 48.6, 57.8, 55.6, 66.8, 59.4, 53.6, 73.2, 53.4, 69, 58.4, 56.2, 70.6, 59.8, 72, 65.2, 56.6, 105.2, 51.8, 63.4, 59, 47.6, 63, 55.2, 45, 54, 50.2, 60.2, 44.8, 58.8, 56.4, 62, 49.2, 67.2, 53.8, 54.4, 58, 59.8, 54.8, 43.2, 60.5, 46.4, 64.4, 48.8, 62.2, 55.5, 57.8, 54.6, 59.2, 52.7, 53.2, 64.5, 51.8, 56, 63.6, 63.2, 59.5, 56.8, 64.1, 50, 72.3, 55, 55.9, 60.4, 69.1, 84.5, 55.9, 55.5, 69.5, 76.4, 61.4, 65.9, 58.6, 66.8, 56.6, 58.6, 55.9, 59.1, 81.8, 70.7, 56.8, 60, 58.2, 72.7, 54.1, 49.1, 75.9, 55, 57.3, 55, 65.5, 65.5, 48.6, 58.6, 63.6, 55.2, 62.7, 56.6, 53.9, 63.2, 73.6, 62, 63.6, 53.2, 53.4, 55, 70.5, 54.5, 54.5, 55.9, 59, 63.6, 54.5, 47.3, 67.7, 80.9, 70.5, 60.9, 63.6, 54.5, 59.1, 70.5, 52.7, 62.7, 86.3, 66.4, 67.3, 63, 73.6, 62.3, 57.7, 55.4, 104.1, 55.5, 77.3, 80.5, 64.5, 72.3, 61.4, 58.2, 81.8, 63.6, 53.4, 54.5, 53.6, 60, 73.6, 61.4, 55.5, 63.6, 60.9, 60, 46.8, 57.3, 64.1, 63.6, 67.3, 75.5, 68.2, 61.4, 76.8, 71.8, 55.5, 48.6, 66.4, 67.3 };
 
                 //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, 180, 177.8, 192, 176, 174, 184, 192.7, 171.5, 173, 176, 176, 180.5, 172.7, 176, 173.5, 178, 180.3, 180.3, 164.5, 173, 183.5, 175.5, 188, 189.2, 172.8, 170, 182, 170, 177.8, 184.2, 186.7, 171.4, 172.7, 175.3, 180.3, 182.9, 188, 177.2, 172.1, 167, 169.5, 174, 172.7, 182.2, 164.1, 163, 171.5, 184.2, 174, 174, 177, 186, 167, 171.8, 182, 167, 177.8, 164.5, 192, 175.5, 171.2, 181.6, 167.4, 181.1, 177, 174.5, 177.5, 170.5, 182.4, 197.1, 180.1, 175.5, 180.6, 184.4, 175.5, 180.6, 177, 177.1, 181.6, 176.5, 175, 174, 165.1, 177, 192, 176.5, 169.4, 182.1, 179.8, 175.3, 184.9, 177.3, 167.4, 178.1, 168.9, 157.2, 180.3, 170.2, 177.8, 172.7, 165.1, 186.7, 165.1, 174, 175.3, 185.4, 177.8, 180.3, 180.3, 177.8, 177.8, 177.8, 177.8, 177.8, 163.8, 188, 198.1, 175.3, 166.4, 190.5, 166.4, 177.8, 179.7, 172.7, 190.5, 185.4, 168.9, 167.6, 175.3, 170.2, 190.5, 177.8, 190.5, 177.8, 184.2, 176.5, 177.8, 180.3, 171.4, 172.7, 172.7, 177.8, 177.8, 182.9, 170.2, 167.6, 175.3, 165.1, 185.4, 181.6, 172.7, 190.5, 179.1, 175.3, 170.2, 193, 171.4, 177.8, 177.8, 167.6, 167.6, 180.3, 182.9, 176.5, 186.7, 188, 188, 177.8, 174, 177.8, 171.4, 185.4, 185.4, 188, 188, 182.9, 176.5, 175.3, 175.3, 188, 188, 175.3, 170.5, 179.1, 177.8, 175.3, 182.9, 170.8, 188, 180.3, 177.8, 185.4, 168.9, 185.4, 180.3, 174, 167.6, 182.9, 160, 180.3, 167.6, 186.7, 175.3, 175.3, 175.9, 175.3, 179.1, 181.6, 177.8, 182.9, 177.8, 184.2, 179.1, 176.5, 188, 174, 167.6, 170.2, 167.6, 188, 174, 176.5, 180.3, 167.6, 188, 180.3, 167.6, 183, 183, 179.1, 170.2, 177.8, 179.1, 190.5, 177.8, 180.3, 180.3 };
                 valuesY = new List<double?>() { 65.6, 71.8, 80.7, 72.6, 78.8, 74.8, 86.4, 78.4, 62, 81.6, 76.6, 83.6, 90, 74.6, 71, 79.6, 93.8, 70, 72.4, 85.9, 78.8, 77.8, 66.2, 86.4, 81.8, 89.6, 82.8, 76.4, 63.2, 60.9, 74.8, 70, 72.4, 84.1, 69.1, 59.5, 67.2, 61.3, 68.6, 80.1, 87.8, 84.7, 73.4, 72.1, 82.6, 88.7, 84.1, 94.1, 74.9, 59.1, 75.6, 86.2, 75.3, 87.1, 55.2, 57, 61.4, 76.8, 86.8, 72.2, 71.6, 84.8, 68.2, 66.1, 72, 64.6, 74.8, 70, 101.6, 63.2, 79.1, 78.9, 67.7, 66, 68.2, 63.9, 72, 56.8, 74.5, 90.9, 93, 80.9, 72.7, 68, 70.9, 72.5, 72.5, 83.4, 75.5, 73, 70.2, 73.4, 70.5, 68.9, 102.3, 68.4, 65.9, 75.7, 84.5, 87.7, 86.4, 73.2, 53.9, 72, 55.5, 58.4, 83.2, 72.7, 64.1, 72.3, 65, 86.4, 65, 88.6, 84.1, 66.8, 75.5, 93.2, 82.7, 58, 79.5, 78.6, 71.8, 116.4, 72.2, 83.6, 85.5, 90.9, 85.9, 89.1, 75, 77.7, 86.4, 90.9, 73.6, 76.4, 69.1, 84.5, 64.5, 69.1, 108.6, 86.4, 80.9, 87.7, 94.5, 80.2, 72, 71.4, 72.7, 84.1, 76.8, 63.6, 80.9, 80.9, 85.5, 68.6, 67.7, 66.4, 102.3, 70.5, 95.9, 84.1, 87.3, 71.8, 65.9, 95.9, 91.4, 81.8, 96.8, 69.1, 82.7, 75.5, 79.5, 73.6, 91.8, 84.1, 85.9, 81.8, 82.5, 80.5, 70, 81.8, 84.1, 90.5, 91.4, 89.1, 85, 69.1, 73.6, 80.5, 82.7, 86.4, 67.7, 92.7, 93.6, 70.9, 75, 93.2, 93.2, 77.7, 61.4, 94.1, 75, 83.6, 85.5, 73.9, 66.8, 87.3, 72.3, 88.6, 75.5, 101.4, 91.1, 67.3, 77.7, 81.8, 75.5, 84.5, 76.6, 85, 102.5, 77.3, 71.8, 87.9, 94.3, 70.9, 64.5, 77.3, 72.3, 87.3, 80, 82.3, 73.6, 74.1, 85.9, 73.2, 76.3, 65.9, 90.9, 89.1, 62.3, 82.7, 79.1, 98.2, 84.1, 83.2, 83.2 };
 
                 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();
   }
}
    See Also
    Step 3 of 5: Customizing the Scatter Chart Elements