Financial Price Series in Candlestick Mode
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic provides a conceptual overview of the Financial Price series in Candlestick mode in the IGChartView™ control and uses a code sample to demonstrate how to add it the chart view.

In this topic


Introduction

Financial Price Series in Candlestick mode summary

The IGChartView’s financial price series in candlestick mode is used to plot stock prices, and show the stock's daily high, low, opening and closing prices. The benefit of using charts in this series is that they are early indicators, signaling market movement earlier than other charts.

The series plots each data point as a vertical column with vertical lines on both the top and bottom.

The vertical line indicates the span between a financial instrument’s high and low value where the top of the vertical line indicating the session’s highest price and the bottom of the vertical line indicating the session’s lowest price. The vertical line indicates the span between a financial investment’s high and low value with the top of the vertical line indicating the session’s highest price and the bottom of the vertical line indicating the session’s lowest price.

The vertical columns indicate the span between the financial investment’s opening and closing values. The columns are filled using Series’ Brush when there is positive value and using series’ negativeBrush property when there is negative value between the opening and closing values.

Data requirements

While the IGChartView control allows easy binding to your own data model, make sure to supply the appropriate amounts and types of data required by the series. If the data does not meet the minimum requirements, based on the type of series that you are using, the IGChartView will appear blank.

  • Required – the data model must contain at least four numeric fields representing open, high, low, and close for rendering the data on the chart.

Adding a Financial Price Series in Candlestick Mode to the IGChartView – Code Example

Description

The code below uses the IGCategorySeriesDataSourceHelper to supply randomly generated data to a financial price series that first gets added to the IGChartView instance, and then the current UIView adds the IGChartView as a subview.

Prerequisites

This code example requires the inclusion of the IGChartView framework, detail about how to add this framework can be found in the Adding the Chart Framework File topic.

Code

In Objective-C:

    NSMutableArray *open = [[NSMutableArray alloc] init];
    for (int i = 0; i < 25; i++) {
        [open addObject:[[NSNumber alloc] initWithDouble:(arc4random() % 100)]];
    }
    
    NSMutableArray *high = [[NSMutableArray alloc] init];
    for (int i = 0; i < 25; i++) {
        [high addObject:[[NSNumber alloc] initWithDouble:(arc4random() % 100 + 30)]];
    }
    
    NSMutableArray *low = [[NSMutableArray alloc] init];
    for (int i = 0; i < 25; i++) {
        [low addObject:[[NSNumber alloc] initWithDouble:(arc4random() % 100)]];
    }
    
    NSMutableArray *close = [[NSMutableArray alloc] init];
    for (int i = 0; i < 25; i++) {
        [close addObject:[[NSNumber alloc] initWithDouble:(arc4random() % 100 + 10)]];
    }
    
    IGOHLCSeriesDataSourceHelper *source = [[IGOHLCSeriesDataSourceHelper alloc] init];
    source.openValues = open;
    source.highValues = high;
    source.lowValues = low;
    source.closeValues = close;
    
    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    
    IGCategoryXAxis *xAxis = [[IGCategoryXAxis alloc] initWithKey:@"xAxis"];
    IGNumericYAxis *yAxis = [[IGNumericYAxis alloc] initWithKey:@"yAxis"];
    [infraChart addAxis:xAxis];
    [infraChart addAxis:yAxis];
    
    IGFinancialPriceSeries *financialPriceSeries = [[IGFinancialPriceSeries alloc] initWithKey:@"financialPriceSeries"];
    financialPriceSeries.xAxis = xAxis;
    financialPriceSeries.yAxis = yAxis;
    financialPriceSeries.dataSource = source;
    financialPriceSeries.displayType = IGPriceDisplayTypeCandlestick;
    
    [infraChart addSeries:financialPriceSeries];
    [self.view addSubview:infraChart];

In C#:

Random r = new Random();
 
   List<NSObject> open = new List<NSObject>();
   List<NSObject> high = new List<NSObject>();
   List<NSObject> low = new List<NSObject>();
   List<NSObject> close = new List<NSObject>();
   for(int i = 0;i <25; i++)
   {
    open.Add(new NSNumber(r.Next() % 100));
    high.Add(new NSNumber(r.Next() % 100 + 30));
    low.Add(new NSNumber(r.Next() % 100));
    close.Add(new NSNumber(r.Next() % 100 + 10));
   }

   IGOHLCSeriesDataSourceHelper source = new IGOHLCSeriesDataSourceHelper();
   source.OpenValues = open.ToArray();
   source.HighValues = high.ToArray();
   source.LowValues = low.ToArray();
   source.CloseValues = close.ToArray();

   IGChartView chart = new IGChartView(this.View.Frame);
   chart.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
   this.View.AddSubview(chart);

   IGCategoryXAxis xAxis = new IGCategoryXAxis("xAxis");
   IGNumericYAxis yAxis = new IGNumericYAxis("yAxis");
   chart.AddAxis(xAxis);
   chart.AddAxis(yAxis);

   IGFinancialPriceSeries series = new IGFinancialPriceSeries("series");
   series.XAxis = xAxis;
   series.YAxis = yAxis;
   series.DataSource = source;
   series.DisplayType = IGPriceDisplayType.IGPriceDisplayTypeCandlestick;

   chart.AddSeries(series);


Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

The IGChartView control chart series is divided into several groups, this parent topic contains links and details about each one.