ComponentOne ChartNavigator for ASP.NET Web Forms
In This Topic
    Quick Start
    In This Topic

    This topic describes how to use C1ChartNavigator control in an ASP.NET application and configure it.

    Step 1 of 2: Add ChartNavigator to the Web Form

    Complete the following steps to create an ASP.Net application, add a ChartNavigator control to your Web Form and bind it to a chart.

    1. In Visual Studio, create a new ASP.Net Web Application and add a new Web Form.
    2. Locate the C1ChartNavigator control in the toolbox and place it onto the Web Form.
      If you cannot locate the control in the toolbox, right click and select Choose Items. The Choose Toolbox Items dialog appears. Locate the control and click OK.

    Step 2 of 2: Bind ChartNavigator to a Chart

    In the Designer

    1. Locate the C1CandlestickChart in the toolbox and place it onto the Web Form.
    2. Click the CandlestickChart smart tag and select SeriesList from the C1CandlestickChart Tasks menu. The CandlestickChartSeries Collection Editor opens.
    3. Click the Add button to add a data series to the chart. In the right-hand pane, locate the Label property and give your data series a name.
    4. Next, locate the Data property. Open the Data options by clicking the drop-down arrow next to the property. Five data display options appear: Close, High, Low, Open, X.
    5. Click the drop-down arrow next to each option and add required values.
    For more information on how to add data in a candlestick chart, Go to C1CandleStickChart QuickStart.

    In Source View

    Use the markup below to add CandlestickChart and ChartNavigator to your application:

    Source View
    Copy Code 
     
 <cC1:C1CandlestickChart ID="C1CandlestickChart1" runat="server" Height="250" Width="500">
   <Animation Enabled="false" />
      <TextStyle FontFamily="Segoe UI" FontSize="13px">
      </TextStyle>
<Header Compass="North" Text="Stock Index from December 2014 to January 2015"

 TextStyle-FontSize="14px"></Header>
         //set legend visibility to false.
      <Legend Visible="false"></Legend>
          <Axis>
              <X Visible="true" TextVisible="false">
          <GridMajor Visible="True"></GridMajor>
              </X>
              <Y Visible="false" Compass="West">
          <GridMajor Visible="True"></GridMajor>
          <GridMinor Visible="False"></GridMinor>
              </Y>
           </Axis>
         //add candlestick chart series.
       <CandlestickChartSeriesStyles>
            <cC1:CandlestickChartStyle>
             <HighLow Width="2">
                <Fill Color="#8C8C8C"></Fill>
             </HighLow>
             <FallingClose Width="6">
                 <Fill Color="#F07E6E"></Fill>
              </FallingClose>
              <RisingClose Width="6">
                 <Fill Color="#90CD97"></Fill>
              </RisingClose>
         </cC1:CandlestickChartStyle>
       </CandlestickChartSeriesStyles>           
</cC1:C1CandlestickChart>
         //add chart navigator control.
<cC1:C1ChartNavigator ID="C1ChartNavigator1" runat="server" Width="500px" 
           Height="50" ToolTip="Stock Index (Dec'14-Jan'15)" >
        <XAxis>
        <GridMajor Visible="False"></GridMajor>
<GridMinor Visible="False"></GridMinor>
    </XAxis> 
          <SeriesStyles>
                <cC1:ChartStyle Fill-Color="#88bde6" Stroke="#88bde6">
                        <Fill Color="#88BDE6"></Fill>
                </cC1:ChartStyle>
         </SeriesStyles>
</cC1:C1ChartNavigator>

    In Code

    Add the following code to the Page_Load event to bind the ChartNavigator to the Candlestick Chart.

    C#
    Copy Code 
            if (!IsPostBack)
        {
            PrepareOptions();
        }
    }
    private void PrepareOptions()
    {
        //add values to X-axis
        var valuesX = new List<DateTime?>(){
DateTime.Parse("2014-12-01"),
DateTime.Parse("2014-12-02"),
DateTime.Parse("2014-12-05"),
DateTime.Parse("2014-12-06"),
DateTime.Parse("2014-12-07"),
DateTime.Parse("2014-12-08"),
DateTime.Parse("2014-12-09"),
DateTime.Parse("2014-12-12"),
DateTime.Parse("2014-12-13"),
DateTime.Parse("2014-12-14"),
DateTime.Parse("2014-12-15"),
DateTime.Parse("2014-12-16"),
DateTime.Parse("2014-12-19"),
DateTime.Parse("2014-12-20"),
DateTime.Parse("2014-12-21"),
DateTime.Parse("2014-12-22"),
DateTime.Parse("2014-12-23"),
DateTime.Parse("2014-12-26"),
DateTime.Parse("2014-12-27"),
DateTime.Parse("2014-12-28"),
DateTime.Parse("2014-12-29"),
DateTime.Parse("2014-12-30"),
DateTime.Parse("2015-01-02"),
DateTime.Parse("2015-01-03"),
DateTime.Parse("2015-01-04"),
DateTime.Parse("2015-01-05"),
DateTime.Parse("2015-01-06"),
DateTime.Parse("2015-01-09"),
DateTime.Parse("2015-01-10"),
DateTime.Parse("2015-01-11"),
DateTime.Parse("2015-01-12"),
DateTime.Parse("2015-01-13"),
DateTime.Parse("2015-01-16"),
DateTime.Parse("2015-01-17"),
DateTime.Parse("2015-01-18"),
DateTime.Parse("2015-01-19"),
DateTime.Parse("2015-01-20"),
DateTime.Parse("2015-01-23"),
DateTime.Parse("2015-01-24"),
DateTime.Parse("2015-01-25"),
DateTime.Parse("2015-01-26"),
DateTime.Parse("2015-01-27"),
DateTime.Parse("2015-01-30"),
DateTime.Parse("2015-01-31")};

        //add values to Y-axis
        var valuesY = new List<double?>() { 10,12,11,14,16,20,18,17,17.5,20,22,21,22.5,20,21,20.8,20,19,18,17,16,15,15,14,13,12,
            11.5,10.9,10,9,9.5,10,12,11,14,16,20,18,17,17.5,20,22,21,22.5 };
        //add High values
        var valuesHigh = new List<double?>() { 10,12,11,14,16,20,18,17,17.5,20,22,21,22.5,20,21,20.8,20,19,18,17,16,15,15,14,13,12,
            11.5,10.9,10,9,9.5,10,12,11,14,16,20,18,17,17.5,20,22,21,22.5 };
        //add Low values
        var valuesLow = new List<double?>() { 7.5,8.6,4.4,4.2,8,9,11,10,12.2,12,16,15.5,16,15,16,16.5,16,16,15,14.5,14,13.5,13,12,11,
            11,10,9,8,7.5,7.9,7.5,8.6,4.4,4.2,8,9,11,10,12.2,12,16,15.5,16 };
        //add Open values
        var valuesOpen = new List<double?>() { 8,8.6,11,6.2,13.8,15,14,12,16,15,17,18,17.2,18.5,17.8,18.6,19.8,18,16.9,15.6,14.7,14.2,13.9,13.2,
            12.8,11.7,11.2,10.5,9.4,8.9,8.4,8,8.6,11,6.2,13.8,15,14,12,16,15,17,18,17.2 };
        //add Close values
        var valuesClose = new List<double?>() { 8.6,11,6.2,13.8,15,14,12,16,15,17,18,17.2,18.5,17.8,18.6,19.8,18,16.9,15.6,14.7,14.2,13.9,13.2,
            12.8,11.7,11.2,10.5,9.4,8.9,8.4,8,8.6,11,6.2,13.8,15,14,12,16,15,17,18,17.2,18.5 };

        //add a candlestick chart series
        var candleSeries = new CandlestickChartSeries();
        candleSeries.Data.X.AddRange(valuesX.ToArray<DateTime?>());
        candleSeries.Data.High.AddRange(valuesHigh.ToArray<double?>());
        candleSeries.Data.Low.AddRange(valuesLow.ToArray<double?>());
        candleSeries.Data.Open.AddRange(valuesOpen.ToArray<double?>());
        candleSeries.Data.Close.AddRange(valuesClose.ToArray<double?>());
        candleSeries.Label = "MSFT";
        candleSeries.LegendEntry = true;
        this.C1CandlestickChart1.SeriesList.Add(candleSeries);
        var lineSeries = new LineChartSeries();
        lineSeries.Data.X.AddRange(valuesX.ToArray<DateTime?>());
        lineSeries.Data.Y.AddRange(valuesY.ToArray<double?>());
        //Bind chart navigator to series data
        this.C1ChartNavigator1.SeriesList.Add(lineSeries);
        //set TargetSelector for chart navigator
        this.C1ChartNavigator1.TargetSelector = "#" + this.C1CandlestickChart1.ClientID;
        // #region Range
        this.C1ChartNavigator1.RangeMin = DateTime.Parse("2014-12-14").ToOADate();
        this.C1ChartNavigator1.RangeMax = DateTime.Parse("2015-01-04").ToOADate();

    VB
    Copy Code 
        If Not IsPostBack Then
        PrepareOptions()
    End If
End Sub

Private Sub PrepareOptions()
    Dim valuesX = New List(Of System.Nullable(Of DateTime))() From {
        DateTime.Parse("2014-12-01"),
        DateTime.Parse("2014-12-02"),
        DateTime.Parse("2014-12-05"),
        DateTime.Parse("2014-12-06"),
        DateTime.Parse("2014-12-07"),
        DateTime.Parse("2014-12-08"),
        DateTime.Parse("2014-12-09"),
        DateTime.Parse("2014-12-12"),
        DateTime.Parse("2014-12-13"),
        DateTime.Parse("2014-12-14"),
        DateTime.Parse("2014-12-15"),
        DateTime.Parse("2014-12-16"),
        DateTime.Parse("2014-12-19"),
        DateTime.Parse("2014-12-20"),
        DateTime.Parse("2014-12-21"),
        DateTime.Parse("2014-12-22"),
        DateTime.Parse("2014-12-23"),
        DateTime.Parse("2014-12-26"),
        DateTime.Parse("2014-12-27"),
        DateTime.Parse("2014-12-28"),
        DateTime.Parse("2014-12-29"),
        DateTime.Parse("2014-12-30"),
        DateTime.Parse("2015-01-02"),
        DateTime.Parse("2015-01-03"),
        DateTime.Parse("2015-01-04"),
        DateTime.Parse("2015-01-05"),
        DateTime.Parse("2015-01-06"),
        DateTime.Parse("2015-01-09"),
        DateTime.Parse("2015-01-10"),
        DateTime.Parse("2015-01-11"),
        DateTime.Parse("2015-01-12"),
        DateTime.Parse("2015-01-13"),
        DateTime.Parse("2015-01-16"),
        DateTime.Parse("2015-01-17"),
        DateTime.Parse("2015-01-18"),
        DateTime.Parse("2015-01-19"),
        DateTime.Parse("2015-01-20"),
        DateTime.Parse("2015-01-23"),
        DateTime.Parse("2015-01-24"),
        DateTime.Parse("2015-01-25"),
        DateTime.Parse("2015-01-26"),
        DateTime.Parse("2015-01-27"),
        DateTime.Parse("2015-01-30"),
        DateTime.Parse("2015-01-31")
    }

    Dim valuesY = New List(Of System.Nullable(Of Double))() From {
        10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5,
        20, 21, 20.8, 20, 19, 18, 17, 16, 15, 15, 14, 13, 12, 11.5,
        10.9, 10, 9, 9.5, 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20,
        22, 21, 22.5
    }
    Dim valuesHigh = New List(Of System.Nullable(Of Double))() From {
        10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5,
        20, 21, 20.8, 20, 19, 18, 17, 16, 15, 15, 14, 13, 12, 11.5,
        10.9, 10, 9, 9.5, 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20,
        22, 21, 22.5
    }
    Dim valuesLow = New List(Of System.Nullable(Of Double))() From {
        7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16, 15,
        16, 16.5, 16, 16, 15, 14.5, 14, 13.5, 13, 12, 11, 11, 10, 9, 8,
        7.5, 7.9, 7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16
    }
    Dim valuesOpen = New List(Of System.Nullable(Of Double))() From {
       8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8,
       18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2, 12.8, 11.7, 11.2,
       10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2
    }
    Dim valuesClose = New List(Of System.Nullable(Of Double))() From {
        8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8,
        18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2, 12.8, 11.7, 11.2,
      10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5
    }

    Dim candleSeries = New CandlestickChartSeries()

    candleSeries.Data.X.AddRange(valuesX.ToArray(Of System.Nullable(Of DateTime))())
    candleSeries.Data.High.AddRange(valuesHigh.ToArray(Of System.Nullable(Of Double))())
    candleSeries.Data.High.AddRange(valuesHigh.ToArray(Of System.Nullable(Of Double))())
    candleSeries.Data.Low.AddRange(valuesLow.ToArray(Of System.Nullable(Of Double))())
    candleSeries.Data.Open.AddRange(valuesOpen.ToArray(Of System.Nullable(Of Double))())
    candleSeries.Data.Close.AddRange(valuesClose.ToArray(Of System.Nullable(Of Double))())
    candleSeries.Label = "MSFT"
    candleSeries.LegendEntry = True
    Me.C1CandlestickChart1.SeriesList.Add(candleSeries)

    Dim lineSeries = New LineChartSeries()
    lineSeries.Data.X.AddRange(valuesX.ToArray(Of System.Nullable(Of DateTime))())
    lineSeries.Data.X.AddRange(valuesX.ToArray(Of System.Nullable(Of DateTime))())
    lineSeries.Data.Y.AddRange(valuesY.ToArray(Of System.Nullable(Of Double))())
    Me.ChartNavigator1.SeriesList.Add(lineSeries)
    Me.ChartNavigator1.TargetSelector = "#" + Me.C1CandlestickChart1.ClientID
    ' #region Range
    Me.ChartNavigator1.RangeMin = DateTime.Parse("2014-12-14").ToOADate()
    Me.ChartNavigator1.RangeMax = DateTime.Parse("2015-01-04").ToOADate()

    What You've Accomplished

    When you run your application, the ChartNavigator appears as shown in the image below: