Simple Column Chart Example


#1

Hi! Could you guys provide an example of a simples column chart? I’m a bit confused with the demos. Thanks


#2

Hi, I’ll see if I can help out! Typically with a column chart you will want a category x-axis (i.e. an axis that displays discrete, non-ordered values), and a numeric y-axis.

As an example, if you want to render the following sales figures in a chart:

NSDictionary* _sales;
   
...
    
_sales = @{@"Broccoli" : @5.65, @"Carrots" : @12.6, @"Mushrooms" : @8.4};

Set up your chart as follows:

- (void)viewDidLoad
{
    [super viewDidLoad];
    
   	
    // Create the chart
    CGFloat margin = (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) ? 10.0 : 50.0;
    _chart = [[ShinobiChart alloc] initWithFrame:CGRectInset(self.view.bounds, margin, margin)];
    _chart.title = @"Grocery Sales Figures";
    
    _chart.autoresizingMask = ~UIViewAutoresizingNone;
    
    _chart.licenseKey = @""; // TODO: add your trial licence key here!
    
    // add a pair of axes
    SChartCategoryAxis *xAxis = [[SChartCategoryAxis alloc] init];
    _chart.xAxis = xAxis;
    
    SChartAxis *yAxis = [[SChartNumberAxis alloc] init];
    yAxis.title = @"Sales (1000s)";
    _chart.yAxis = yAxis;
    
    
    // add to the view
    [self.view addSubview:_chart];
    
    _chart.datasource = self;
    
    // show the legend 
    _chart.legend.hidden = NO;
    _chart.legend.placement = SChartLegendPlacementInsidePlotArea;
}

Then implement the SChartDataSource protocol, supplying the data from the dictionary as follows:

- (int)numberOfSeriesInSChart:(ShinobiChart *)chart {
    return 1;
}

-(SChartSeries *)sChart:(ShinobiChart *)chart seriesAtIndex:(int)index {
    SChartColumnSeries *lineSeries = [[SChartColumnSeries alloc] init];
    return lineSeries;
}

- (int)sChart:(ShinobiChart *)chart numberOfDataPointsForSeriesAtIndex:(int)seriesIndex {
    return _sales.allKeys.count;
}

- (id<SChartData>)sChart:(ShinobiChart *)chart dataPointAtIndex:(int)dataIndex forSeriesAtIndex:(int)seriesIndex {
    SChartDataPoint *datapoint = [[SChartDataPoint alloc] init];
    NSString* key = _sales.allKeys[dataIndex];
    datapoint.xValue = key;
    datapoint.yValue = _sales[key];
    return datapoint;
}

Hope that helps!

Colin E.


#3

Hi! Could you guys provide an example of a simples Bar chart? I’m a bit confused with the demos of column chart. Thanks

This is urgent. So please help me.


#4

The difference between a column chart and bar chart is the orientation of the bars/columns. Bar charts are horizontal, whereas column charts are vertical.

With ShinobiCharts changing between the 2 is really simple. Most of the code is exactly the same as the code which Colin provided for the column chart, with the following differences:

  1. The axes are switched. Rather than having a category x-axis and a numeric y-axis, you’ll need a numeric x-axis and a category y-axis. Switch the axis code in the previous code sample with the following:

    // add a pair of axes
    SChartNumberAxis *xAxis = [[SChartNumberAxis alloc] init];
    xAxis.title = @“Sales (1000s)”;
    _chart.xAxis = xAxis;

     SChartCategoryAxis *yAxis = [[SChartCategoryAxis alloc] init];
     _chart.yAxis = yAxis;
    
  2. The series is of bar type. A column chart has a series of type SChartColumnSeries, whereas a bar chart has a type SChartBarSeries. Update the datasource method as follows:

    • (SChartSeries *)sChart:(ShinobiChart *)chart seriesAtIndex:(int)index {
      SChartBarSeries *barSeries = [[SChartBarSeries alloc] init];
      return barSeries;
      }
  3. The x and y values on the datapoint are flipped. This matches the flip of x and y axes in step 1. Update the datasource method as follows:

    • (id)sChart:(ShinobiChart *)chart dataPointAtIndex:(int)dataIndex forSeriesAtIndex:(int)seriesIndex {
      SChartDataPoint datapoint = [[SChartDataPoint alloc] init];
      NSString
      key = _sales.allKeys[dataIndex];
      datapoint.xValue = _sales[key];
      datapoint.yValue = key;
      return datapoint;
      }

I hope that helps you create your bar series,

+sam


#5

sam

The difference between a column chart and bar chart is the orientation of the bars/columns. Bar charts are horizontal, whereas column charts are vertical.

With ShinobiCharts changing between the 2 is really simple. Most of the code is exactly the same as the code which Colin provided for the column chart, with the following differences:

  1. The axes are switched. Rather than having a category x-axis and a numeric y-axis, you’ll need a numeric x-axis and a category y-axis. Switch the axis code in the previous code sample with the following:

    // add a pair of axes
    SChartNumberAxis *xAxis = [[SChartNumberAxis alloc] init];
    xAxis.title = @“Sales (1000s)”;
    _chart.xAxis = xAxis;

     SChartCategoryAxis *yAxis = [[SChartCategoryAxis alloc] init];
     _chart.yAxis = yAxis;
    
  2. The series is of bar type. A column chart has a series of type SChartColumnSeries, whereas a bar chart has a type SChartBarSeries. Update the datasource method as follows:

    • (SChartSeries *)sChart:(ShinobiChart *)chart seriesAtIndex:(int)index {
      SChartBarSeries *barSeries = [[SChartBarSeries alloc] init];
      return barSeries;
      }
  3. The x and y values on the datapoint are flipped. This matches the flip of x and y axes in step 1. Update the datasource method as follows:

    • (id)sChart:(ShinobiChart *)chart dataPointAtIndex:(int)dataIndex forSeriesAtIndex:(int)seriesIndex {
      SChartDataPoint datapoint = [[SChartDataPoint alloc] init];
      NSString
      key = _sales.allKeys[dataIndex];
      datapoint.xValue = _sales[key];
      datapoint.yValue = key;
      return datapoint;
      }

I hope that helps you create your bar series,

+sam

Thanks for this support.

It is working. :grin: