Hi,
I am using two different series in single IGChartView.
1) is IGColumnSeries and 2) is IGStackedColumnSeries.
Now problem is i couldn't apply two different series in single chart view. When i applied, it displayed some unnecessary white space between y-axis and its label. I have taken same axis for both series and set different keys for both of axis.
Is there any way to do this ?
Thanks..
The chart is capable of displaying multiple category series side by side. Here's a small example with a stacked column and column series. This code snippet assumes that you have an array called _data with objects that have value1 and value2 properties for stacked data, value property for column data and labelString property for the labels on the x axis. You should see that there is no extra space in the axes and the columns are displayed side by side.
- (void)viewDidLoad
{
NSArray *fields = @[@"value1", @"value2"];
_chartView = [[IGChartView alloc]initWithFrame:self.view.frame];
_categorySourceHelper = [[IGCategorySeriesDataSourceHelper alloc]initWithData:_data andValuePath:@"value"];
_stackedChartDataSourceHelper = [[IGStackedSeriesDataSourceHelper alloc]initWithData:_data fields:fields labelPath:@"labelString"];
IGColumnSeries *series = (IGColumnSeries*)[_chartView addSeriesForType:[IGColumnSeries class] usingKey:@"series" withDataSource:_categorySourceHelper firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];
IGStackedColumnSeries *stackedSeries = (IGStackedColumnSeries*)[_chartView addStackedSeriesForType:[IGStackedColumnSeries class] usingKey:@"stackedSeries" withDataSource:_stackedChartDataSourceHelper firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];
[self.view addSubview:_chartView];
}
Hi Max,
thanks for reply, i tried your given suggestion & got solution upto certain extend but i stuck on a following issue...
i tried your code this way....
IGCategorySeriesDataSourceHelper *source = [[IGCategorySeriesDataSourceHelper alloc] init];
source.data = data;
source.valuePath = @"cost";
source.labelPath = @"product";
infraChart = [[IGChartView alloc] initWithFrame:CGRectMake(0, 10, 295, 171)];
[infraChart setAutoresizingMask:UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight];
infraChart.delegate = self;
IGCategoryXAxis *xAxis = [[IGCategoryXAxis alloc] initWithKey:@"xAxis"];
IGNumericYAxis *yAxis = [[IGNumericYAxis alloc] initWithKey:@"yAxis"];
[infraChart addAxis:xAxis];
[infraChart addAxis:yAxis];
IGColumnSeries *colSeries = (IGColumnSeries *) [infraChart addSeriesForType:[IGColumnSeries class] usingKey:@"series" withDataSource:source firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];
IGStackedSeriesDataSourceHelper* stackedChartDataSourceHelper = [[IGStackedSeriesDataSourceHelper alloc]initWithData:arrStackedBarSeries fields:[[NSArray alloc]initWithObjects: @"sales", @"pending", nil]];
IGStackedColumnSeries *stackedColSeries = (IGStackedColumnSeries *) [infraChart addStackedSeriesForType:[IGStackedColumnSeries class] usingKey:@"series2" withDataSource:stackedChartDataSourceHelper firstAxisKey:@"xAxis1" secondAxisKey:@"yAxis1"];
colSeries.xAxis.gap = 0.7;
IGChartThemeDefinition *def = [IGChartDefaultThemes DefaultTheme];
infraChart.theme = def;
[goalSalesChart addSubview:infraChart];
& i got solution upto this .....
https://ramjansayyad.opendrive.com/files?Nl8zMDc0MTM1MV9hWVF3ag
But
if you see above screen shot here, I'm getting too much space between graph & it's Y-axis.
& I'm unable to reduce it.
Also,
In your solution you pass xAxis & yAxis same for IGColumnSeries & IGStackedColumnSeries ...but if i go with the same my code gets break so i pass (xAxis,yAxis) for IGColumnSeries & (xAxis1,yAxis1) for IGStackedColumnSeries ....
So please ,if you help me to get out of this issue that will be so glad.....
When you have multiple axes in the same location, they get stacked. For example, you have added 2 different Y axes. By default they will be placed on the left side and will have an extent. You can set extent to 0 on your yAxis1 or make it invisible to reclaim the space. Note, that your column series will not be displayed side by side with the stacked series, because they use two different X axes. I don't know why you're getting errors when you use the same axes for both series. Can you post the error message? If you get a generic error, perhaps the console output will show a more detailed message.
Actually, my main aim here is to get the column series and stacked series to overlap and not be side by side.
You can see the image attached to see the final output that we are trying to create.
Also in the image on the right you can see the actual output we are getting from the code.
The data that we have for the column series and stacked series share the same X-Axis data points.
When we are creating the series using same Xaxis and Yaxis the resulting chart created shows the series side by side. (The chart is laid out properly without any unnecessary blank space between labels and YAxis)
But when using the separate XAxis and Yaxis we are able to get the overlapping series that we are acutally looking for. But the chart created has unnecessary blank space between labels and YAxis.
P.S. The error that we mentioned above was error of duplicated keys for axis. we have solved that error.
This should eliminate the extra white space:stackedColSeries.xAxis.labelsVisible = NO;stackedColSeries.xAxis.extent = 0;
stackedColSeries.yAxis.labelsVisible = NO;stackedColSeries.yAxis.extent = 0;
I'm not sure if you've tried this already, but the code above hides the extra pair of axes you've created for the second series.
Hello Max,
I have set the properties as you have described for an issue of shifting y-Axis in chart view. Now it works perfectly. But my ultimate goal is still not being fulfilled.Let me explain you in brief. I have three type of values first is Goal Value second is Sales value and third one is Pending value.So my requirement is to draw a chart with column series for Goal value and StackedColumnSeries for Sales and Pending values.
In this demo example, i took one ColumnSeries and one StackedColumnSeries.
See the first snap shot.Graph displays single y-Axis as i have given same key for both ColumnSeries and StackedColumnSeries.
i.e. [infraChart addStackedSeriesForType:[IGStackedColumnSeries class] usingKey:@"series2" withDataSource:stackedChartDataSourceHelper firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];[infraChart addSeriesForType:[IGColumnSeries class] usingKey:@"series" withDataSource:source firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];
I don't want side by side series as in first snap shot.
now have a look at second snap shot.
This graph displays two y-Axis since i have set two different keys for both series.
i.e. [infraChart addStackedSeriesForType:[IGStackedColumnSeries class] usingKey:@"series2" withDataSource:stackedChartDataSourceHelper firstAxisKey:@"xAxis1" secondAxisKey:@"yAxis1"];[infraChart addSeriesForType:[IGColumnSeries class] usingKey:@"series" withDataSource:source firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];
Here, first y-Axis depicts StackedColumnSeries labels and second y-Axis depicts ColumnSeries labels.
So i want the same output as second snap shot has. I want ColumnSeries overlapped by StackedColumnSeries as in second snap shot. However an issue is,it displaying two y-Axis for two different series. Can i set single y-Axis labels for both ColumnSeries and StackedColumnSeries that can provide the values for both series ?
Have a look at the last snap shot. This is what i want to do.
Following code snippet that i am using to draw a graph.
@interface GraphObject : NSObject
@property (nonatomic,retain) NSString *territory;
@property (nonatomic,assign) double productCost;
@end
@implementation GraphObject
@synthesize territory,productCost;
@interface DataModel : NSObject
@property (nonatomic,retain) NSString *territory1;
@property (nonatomic, assign) double cost1;
@property (nonatomic, assign) double cost2;
@implementation DataModel
@synthesize cost1, territory1,cost2;
[super viewDidLoad];
arrGoal = [[NSMutableArray alloc] initWithObjects:@"70",@"20",@"30",@"40",@"50", nil]; // Blue Color Bar
arrSales = [[NSMutableArray alloc] initWithObjects:@"20",@"80",@"90",@"20",@"40", nil]; // Orange Color Bar
arrPending = [[NSMutableArray alloc] initWithObjects:@"20",@"180",@"190",@"120",@"140", nil]; // Yellow Color Bar
[self generateData];
IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
// Stacked column series
IGStackedSeriesDataSourceHelper* stackedChartDataSourceHelper = [[IGStackedSeriesDataSourceHelper alloc]initWithData:data2 fields:[[NSArray alloc]initWithObjects: @"territory1", @"cost1",@"cost2", nil]];
[infraChart addStackedSeriesForType:[IGStackedColumnSeries class] usingKey:@"series2" withDataSource:stackedChartDataSourceHelper firstAxisKey:@"xAxis1" secondAxisKey:@"yAxis1"];
//coulmn series
source.valuePath = @"productCost";
source.labelPath = @"territory";
[infraChart addSeriesForType:[IGColumnSeries class] usingKey:@"series" withDataSource:source firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];
[self.view addSubview:infraChart];
-(void)generateData
{ territories = [NSArray arrayWithObjects:@"Canada", @"Finland", @"Holland", @"Japan", @"USA", nil];
data = [[NSMutableArray alloc] init];
for (int i = 0; i < 5; i++)
GraphObject *graphObject = [[GraphObject alloc] init];
graphObject.territory = [territories objectAtIndex:i];
graphObject.productCost = [[arrGoal objectAtIndex:i]doubleValue];
[data addObject:graphObject];
data2 = [[NSMutableArray alloc] init];
for (int j = 0; j < 5; j++)
{ DataModel *graphObject = [[DataModel alloc] init];
graphObject.territory1 = [territories objectAtIndex:j];
graphObject.cost1 = [[arrSales objectAtIndex:j] doubleValue];
graphObject.cost2 = [[arrPending objectAtIndex:j] doubleValue];
[data2 addObject:graphObject];
Please, give me your valuable suggestion. If you help me to get out of this issue that will be so glad.
Thanks.
The grouping of your series is only determined by the X axis. If it's the same, the series will be grouped, otherwise, they will overlap.
The Y axis can be the same for both of your series, regardless of grouping. Set both your series to use the same Y axis, but different X axes and you will get overlapping series that use the same Y axis.
Hi Dave,
I extremely sorry for previous post. Actually the older framework of infragistics didn't remove properly and didn't replace by new one which has fixes.
So now it works perfectly.
Thank you so much for this fix. Good support by your team thanks.
I have refereed your demo. You absolutely correct when you go with two IGColumn series.
However in my case, i have used two different series to draw a chart i.e.
1) IGColumnSeries
2) IGStackedColumnSeries
So issue is still persist. kindly refer previous post.
Please resolved this issue as soon as possible.
Hello Kosta,
Thank you for you response.
There is no Service Release later than May 9th. I created the attached sample project to test the issue with. If you swap lines 64 and 65 in DCViewController.m you will see that the order in which the series are drawn changes.
Please note that after installing the Service Release you may need to remove and add the IGChart framework reference.
Hi Dave
I cannot access the service release on my account.
The one that is available to me is of date 9th May 2014 under the name NUCLiOS 2014 Vol. 1 - Service Release
That one does not fix this issue.
Where can I access the service release for 13th May?
Regards
Kosta
P.S. Manish and Me work for the same team.
We bought Nuclios from my account.
Hello Manish,
This issue has been resolved in the latest Service Release for Nuclios as of May 13, 2014. You can download the Service Release from the Keys & Downloads page of our web-site.