Candlestick Chart in C1Finance Sample Application

The C1Finance sample is a stock ticker application that uses a line chart to visualize stock history. We recently released a Candlestick chart which is unique to this type of application. Here is how the current application looks with the line chart. You can view it here C1Finance. Let's see how we can use the Candlestick chart in place of the line chart. Open the C1Finance sample. If you have downloaded the studio you will find it in documents folder under "ComponentOne Samples\Studio for ASP.NET Wijmo\ASP.NET WebForms\CS". If you have not downloaded the Studio yet, you can download your copy from here. 1. Go to the mark up of default.aspx. Comment\remove the markup for "C1LineChart" and drop a C1CandleStickChart and name it "c1chart". 2. Set the datasource to "ObjectDataSource2". 3. Add databindings section and set the "Open", High", "Low" "Close". Here is the markup.

<c1:C1CandlestickChart ID="c1chart" runat="server" DataSourceID="ObjectDataSource2" Height="300px" Width="920px">  
 <Animation Duration="2000" />  
 <DataBindings>  
 <c1:C1CandlestickChartBinding HighField="High" LegendEntry="true" LowField="Low" CloseField="Close" XField="Date" OpenField="Open" XFieldType="DateTime" label="MSFT" />  
 </DataBindings>  
 </c1:C1CandlestickChart>

4. We will next add styles with by adding "CandlestickChartSeriesStyles" section. We will change fill color of "HighLow", "FallingClose" and "RisingClose". Here is the complete mark up of the chart.

<c1:C1CandlestickChart ID="c1chart" runat="server" DataSourceID="ObjectDataSource2" Type="Ohlc" Height="300px" Width="920px">  
 <Animation Duration="2000" />  
 <CandlestickChartSeriesStyles>  
 <c1:CandlestickChartStyle HighLow-Fill-Color="#ff9900" FallingClose-Fill-Color="#ff0000" RisingClose-Fill-Color="#ff9900" />  
 </CandlestickChartSeriesStyles>  
 <DataBindings>  
 <c1:C1CandlestickChartBinding HighField="High" LegendEntry="true" LowField="Low" CloseField="Close" XField="Date" OpenField="Open" XFieldType="DateTime" label="MSFT" />  
 </DataBindings>  
 </c1:C1CandlestickChart>

5. Let's make a small change in the code behind so that the label is updated every time we select a different symbol. We can use the "smbl" variable already declared in the "C1GridView1_SelectedIndexChanging" event.

this.c1chart.DataBindings[0].Label = smbl;

Run the application and view the changes. Thanks for reading.