Lesson 2: How to Create a Cartesian Chart

• Aug 16, 2019
• 5 minutes to read

This guide introduces the DevExpress Charts Suite for iOS. You will develop an application to display the annual GDP of 3 countries. The following image demonstrates the result:

Step 1. Create a new application

First, create a new single view application and add the Cartesian Chart to it by following steps below.

• Create a new application using your preferred IDE.

• Import the library into the application’s project. The Import the Library guide explains how to do this.

• Add a new view to the Main storyboard and set its class to DXChart.

  

• Connect the DXChart view with the view controller using an Outlet. Switch to the Assistant editor and right click the view. Drag-and-drop the New Referencing Outlet item from the invoked menu to the ViewController class declaration.

  

• Type the chart name and click Connect in the invoked menu.

  

  Note

  You should import the library into the class file for the Chart’s correct work.

  Objective C

  #include <DXCharts/DXCHarts.h>
  

  Swift

  import DXCharts
  

  C#

  using DevExpress.Charts; 
  

Step 2. Populate a chart with a data

This step populates the DXChart with series.

• Create a new class that adopts the DXNumericSeriesData protocol:

  Objective C

  @interface GdpData: NSObject<DXNumericSeriesData>
      +(instancetype) dataWithYears: NSInteger[] years values: double[] values;
  @end
  
  @implementation GdpData {
      NSArray<NSNumber *> *years;
      NSArray<NSNumber *> *values;
  }
  +(instancetype)dataWithYears:(NSArray<NSNumber *> *)years values: (NSArray<NSNumber *> *)values {
      GdpData *data = [[GdpData alloc] init];
      if (data != nil) {
          data->years = years;
          data->values = values;
      }
      return data;
  }
  -(int) getDataCount {
      return (int)years.count;
  }
  -(double) getArgumentByIndex: (int) index {
      return [[years objectAtIndex:(NSInteger)index] doubleValue];
  }
  -(double) getValueByIndex: (int) index {
      return [[values objectAtIndex:(NSInteger)index] doubleValue];
  }
  @end
  

  Swift

  class GdpData : NSObject, DXNumericSeriesData {
      let years: [Int]
      let values: [Double]
  
      required init(years: [Int], values: [Double]) {
          self.years = years
          self.values = values
      }
      public func getCount() -> Int32 {
          return Int32(years.count)
      }
      public func getArgumentBy(_ index: Int32) -> Double {
          return Double(years[Int(index)])
      }
      public func getValueBy(_ index: Int32) -> Double {
          return values[Int(index)]
      }
  }
  

  C#

  class GdpData : DXNumericSeriesData {
      List<int> years;
      List<double> values;
  
      public GdpData(List<int> years,List<double> values) {
          this.years = years;
          this.values = values;
      }
  
      public override int DataCount { get { return years.Count; } }
  
      public override double GetArgumentByIndex(int index) {
          return years[index];
      }
  
      public override double GetValueByIndex(int index) {
          return values[index];
      }
  }
  

• In the controller’s viewDidLoad method, create a new DXLineSeries instance, and assign a data object with the specified parameters to the data property. Then add a series to the chart:

  Objective C

  DXLineSeries *usaSeries = [[DXLineSeries alloc] init];
  usaSeries.displayName = @"USA";
  usaSeries.data = [GdpData dataWithYears: @[@2015, @2014, @2013, @2012, @2011, @2010, @2009, @2008]
                                   values: @[@18.037, @17.393, @16.692, @16.155, @15.518, @14.964, @14.419, @14.719]];
  [self.chart addSeries:usaSeries];
  

  Swift

  let usaGdpSeries = DXLineSeries()
  usaGdpSeries.displayName = "USA"
  usaGdpSeries.data = GdpData(years: [2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008],
                             values: [18.037, 17.393, 16.692, 16.155, 15.518, 14.964, 14.419, 14.719])
  self.chart.addSeries(usaGdpSeries)
  

  C#

  this.chart.AddSeries(new DXLineSeries {
      DisplayName = "USA",
      Data = new GdpData(
          years: new List<int> { 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008 },
          values: new List<double> { 18.037, 17.393, 16.692, 16.155, 15.518, 14.964, 14.419, 14.719 }
      )
  });
  

• Add other series to the chart:

  Objective C

  DXLineSeries *chinaGdpSeries = [[DXLineSeries alloc] init];
  chinaGdpSeries.displayName = @"China";
  chinaGdpSeries.data = [GdpData dataWithYears: @[@2015, @2014, @2013, @2012, @2011, @2010, @2009, @2008]
                                        values: @[@11.065, @10.482, @9.607, @8.561, @7.573, @6.101, @5.11, @4.598]];
  [self.chart addSeries:chinaGdpSeries];
  
  DXLineSeries *japanGdpSeries = [[DXLineSeries alloc] init];
  japanGdpSeries.displayName = @"Japan";
  japanGdpSeries.data = [GdpData dataWithYears: @[@2015, @2014, @2013, @2012, @2011, @2010, @2009, @2008]
                                        values: @[@4.383, @4.849, @5.156, @6.203, @6.157, @5.7, @5.231, @5.038]];
  [self.chart addSeries:japanGdpSeries];
  

  Swift

  let chinaGdpSeries = DXLineSeries()
  chinaGdpSeries.displayName = "China"
  chinaGdpSeries.data = GdpData(years: [2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008],
                               values: [11.065, 10.482, 9.607, 8.561, 7.573, 6.101, 5.11, 4.598])
  self.chart.addSeries(chinaGdpSeries)
  
  let japanGdpSeries = DXLineSeries()
  japanGdpSeries.displayName = "Japan"
  japanGdpSeries.data = GdpData(years: [2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008],
                               values: [4.383, 4.849, 5.156, 6.203, 6.157, 5.7, 5.231, 5.038])
  self.chart.addSeries(japanGdpSeries)
  

  C#

  this.chart.AddSeries(new DXLineSeries {
      DisplayName = "China",
      Data = new GdpData(
          years: new List<int> { 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008 },
          values: new List<double> { 11.065, 10.482, 9.607, 8.561, 7.573, 6.101, 5.11, 4.598 }
      )
  });
  this.chart.AddSeries(new DXLineSeries {
      DisplayName = "Japan",
      Data = new GdpData(
          years: new List<int> { 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008 },
          values: new List<double> { 4.383, 4.849, 5.156, 6.203, 6.157, 5.7, 5.231, 5.038 }
      )
  });
  

Step 3. Configure chart axes

In this step, the arguments’ axis is configured to show labels for each argument. The text and position of the values’ axis labels are customized.

• Create a new instance of DXNumericAxisX object, configure it, and assign to the DXChart.axisX property:

  Objective C

  DXNumericAxisX *axisX = [[DXNumericAxisX alloc] init];
  axisX.gridOffset = 0;
  axisX.gridAlignment = 1;
  self.chart.axisX = axisX;
  

  Swift

  let axisX = DXNumericAxisX()
  axisX.gridOffset = 0
  axisX.gridAlignment = 1
  self.chart.axisX = axisX
  

  C#

  this.chart.AxisX = new DXNumericAxisX {
      GridOffset = 0,
      GridAlignment = 1
  };
  

  Note

  The X-axis type should be compatible with the series data type. Refer to the Axes guide for more information.

• Create a new DXNumericAxisY class instance, configure its labels’ options via the DXAxisBase.label property and a DXAxisLabel object, and assign the axis to the DXChart.axisY property:

  Objective C

  DXAxisLabel *axisLabel = [[DXAxisLabel alloc] init];
  axisLabel.format = @"$#.# tn";
  
  DXNumericAxisY *axisY = [[DXNumericAxisY alloc] init];
  axisY.label = axisLabel;
  self.chart.axisY = axisY;
  

  Swift

  let axisLabel = DXAxisLabel()
  axisLabel.format = "$#.# tn"
  
  let axisY = DXNumericAxisY()
  axisY.label = axisLabel
  self.chart.axisY = axisY
  

  C#

  this.chart.AxisY = new DXNumericAxisY {
      Label = new DXAxisLabel {
          Format = @"$#.# tn"
      }
  };
  

Step 4. Add a legend to the chart

Finally, add a legend to the chart. Create a new DXLegend object, modify its settings, and assign it to the DXChartBase.legend property:

Objective C

DXLegend *legend = [[DXLegend alloc] init];
legend.horizontalPosition = DXLegendHorizontalPositionCenter;
legend.verticalPosition = DXLegendVerticalPositionTopOutside;
self.chart.legend = legend;

Swift

let legend = DXLegend()
legend.horizontalPosition = .center
legend.verticalPosition = .topOutside
self.chart.legend = legend

C#

this.chart.Legend = new DXLegend {
    HorizontalPosition = DXLegendHorizontalPosition.Center,
    VerticalPosition = DXLegendVerticalPosition.TopOutside
};

Result

Launch the application to see the results: