ComponentOne CompositeChart for ASP.NET Web Forms
Quick Start / Step 2 of 5: Adding Multiple Chart Types
In This Topic
    Step 2 of 5: Adding Multiple Chart Types
    In This Topic

    In this step, you will create multiple series for a Column, Line, and Pie chart using the CompositeChartSeries Collection editor.programatically create the ScatterChartSeries and customize the series marker and label.

    1. Click the CompositeChart smart tag and select SeriesList from the C1CompositeChart Tasks menu. The CompositeChartSeries Collection Editor appears.
    2. In the CompositeChartSeries Collection Editor, click the Add button three times to add a new CompositeChartSeries to the CompositeChart.
    3. Select a member and set the following properties for the CompositeChartSeries.

       

      Member

      Type

      Label

      0

      Column

      West

      1

      Column

      Central

      2

      Column

      East

       

    4. Select member[0] and expand the Data node and click on the ellipsis button next to the Values property. The ChartXData Collection Editor appears. Click the Add button five times to add five x values to first CompositeChartSeries. Set the StringValue for each ChartXData to the following:

       

      Member

      StringValue

      0

      Desktops

      1

      Notebooks

      2

      AIO

      3

      Tablets

      4

      Phones

    5. Click OK, expand Data->Y and click on the ellipsis button next to the values property The ChartYData Collection Editor appears. Click the Add button five times to add five y values to first CompositeChartSeries. Set the DoubleValue for each ChartYData to the following:

       

      Member

      DoubleValue

      0

      5

      1

      3

      2

      4

      3

      7

      4

      2

       

    6. Click OK, select member[1] and expand the Data node and click on the ellipsis button next to the Values property. The ChartXData Collection Editor appears. Click the Add button five times to add five x values to second CompositeChartSeries. Set the StringValue for each ChartXData to the following:

       

      Member

      StringValue

      0

      Desktops

      1

      Notebooks

      2

      AIO

      3

      Tablets

      4

      Phones

       

    7. Click OK, expand Data->Y and click on the ellipsis button next to the Values property The ChartYData Collection Editor appears. Click the Add button five times to add five y values to second CompositeChartSeries. Set the DoubleValue for each ChartYData to the following:

       

      Member

      DoubleValue

      0

      2

      1

      2

      2

      3

      3

      2

      4

      1

    8. Click OK, select member[2] and expand the Data node and click on the ellipsis button next to the Values property. The ChartXData Collection Editor appears. Click the Add button five times to add five x values to third CompositeChartSeries. Set the StringValue for each ChartXData to the following:

       

      Member

      StringValue

      0

      Desktops

      1

      Notebooks

      2

      AIO

      3

      Tablets

      4

      Phones

       

    9. Click OK and expand Data->Y and click on the ellipsis button next to the values property The ChartYData Collection Editor appears. Click the Add button five times to add five y values to first CompositeChartSeries. Set the DoubleValue for each ChartYData to the following:

       

      Member

      DoubleValue

      0

      3

      1

      4

      2

      4

      3

      2

      4

      5

    10. In the CompositeChartSeries Collection Editor, click the Add button once to add one CompositeChartSeries to the CompositeChart. Select the member’s properties to the following:

       

      Member

      Type

      Label

      Center

      3

      Pie

      abc

      150, 150

    11. Click on the ellipsis button next to the PieSeriesList to open the PieChartSeries Collection Editor.
    12. Click Add three times to add three new PieChartSeries to the CompositeChart and then set each member to the following:

       

      Member

      Label

      Data

      Offset

      0

      MacBook Pro

      46.78

      15

      1

      iMac

      23.18

      0

      2

      MacBook

      20.25

      0

       

    13. Click OK and then click Add two times in the CompositeChartSeries Collection Editor.
    14. Select each member and set the following properties for the CompositeChartSeries.

      Member

      Label

      Type

      4

      US

      Line

      5

      Canada

      Line

       

    15. Select member[4] and expand the Data node and click on the ellipsis button next to the Values property. The ChartXData Collection Editor appears. Click the Add button five times to add five x values to first CompositeChartSeries. Set the StringValue for each ChartXData to the following:

       

      Member

      StringValue

      0

      Desktops

      1

      Notebooks

      2

      AIO

      3

      Tablets

      4

      Phones

    16. Click OK, expand Data->Y and click on the ellipsis button next to the values property The ChartYData Collection Editor appears. Click the Add button five times to add five y values to first CompositeChartSeries. Set the DoubleValue for each ChartYData to the following:

       

      Member

      DoubleValue

      0

      3

      1

      6

      2

      2

      3

      9

      4

      5

       

    17. Select member[5] and expand the Data node and click on the ellipsis button next to the Values property. The ChartXData Collection Editor appears. Click the Add button five times to add five x values to first CompositeChartSeries. Set the StringValue for each ChartXData to the following:

       

      Member

      StringValue

      0

      Desktops

      1

      Notebooks

      2

      AIO

      3

      Tablets

      4

      Phones

    18. Click OK, expand Data->Y and click on the ellipsis button next to the values property The ChartYData Collection Editor appears. Click the Add button five times to add five y values to first CompositeChartSeries. Set the DoubleValue for each ChartYData to the following:

       

      Member

      DoubleValue

      0

      1

      1

      3

      2

      4

      3

      7

      4

      2

    See Also