Problem with datapoint labels and charts area


#1

Im trying to replicate this chart:

2 series needed. Line series with 10 values. Column series with 2 values , 1 at the beginning and 1 at the end.

And I ended up with this:

There are 2 issues.

The charts area is missing half of the first column, so I need to pan to the left so the chart area is focused properly. Any ideas?

Im using 2 Series (ColumnSeries and a LineSeries), the first and the last values of the ColumnSeries are 150 and the rest are 0’s. Is it possible to hide the 0’s datapoint labels from ColumnSeries?

Here is the code:

myChart = [[ShinobiChart alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
myChart.autoresizingMask = UIViewAutoresizingNone;
myChart.delegate = self;
myChart.canvasInset = UIEdgeInsetsMake(10, 10, 10, 20);
    
SChartNumberRange *xAxisRange = [[SChartNumberRange alloc] initWithMinimum:[NSNumber numberWithInt:0] andMaximum:[NSNumber numberWithInt:12]];
SChartCategoryAxis *customXAxis = [[SChartCategoryAxis alloc] initWithRange:xAxisRange];
customXAxis.enableGestureZooming = YES;
customXAxis.enableMomentumZooming = YES;
customXAxis.enableGesturePanning = YES;
customXAxis.enableMomentumPanning = YES;
myChart.xAxis = customXAxis;
 
SChartNumberAxis *yAxis = [[SChartNumberAxis alloc] init];
yAxis.enableGestureZooming = YES;
yAxis.enableMomentumPanning = YES;
yAxis.enableGesturePanning = YES;  
yAxis.rangePaddingHigh = @100;
    
SChartMajorGridlineStyle *majorYGridline = [SChartMajorGridlineStyle new];
majorYGridline.showMajorGridLines = YES;
majorYGridline.lineWidth = [NSNumber numberWithInteger:2];    
yAxis.style.majorGridLineStyle = majorYGridline;
myChart.yAxis = yAxis;
myChart.datasource = self;
    
[self.view addSubview:myChart];


#pragma mark - ShinobiChartDataSource
- (int)numberOfSeriesInSChart:(ShinobiChart *)chart
{
    return 2;
}

-(SChartSeries *)sChart:(ShinobiChart *)chart seriesAtIndex:(int)index
{
    if (index == 0)
    {
        SChartColumnSeries *lastCurrentYearColumnSeries = [[SChartColumnSeries alloc] init];
        lastCurrentYearColumnSeries.style.dataPointLabelStyle.showLabels = YES;
        lastCurrentYearColumnSeries.style.dataPointLabelStyle.offsetFromDataPoint = CGPointMake(0, -10);
        lastCurrentYearColumnSeries.title = @"Column";
        return lastCurrentYearColumnSeries;
    }
    else
    {
        SChartLineSeries *lineSeries = [[SChartLineSeries alloc] init];
        lineSeries.style.pointStyle.showPoints = YES;
        
        lineSeries.style.dataPointLabelStyle.showLabels = YES;
        lineSeries.style.dataPointLabelStyle.offsetFromDataPoint = CGPointMake(0, -12);
        
        lineSeries.style.pointStyle.radius = [NSNumber numberWithInt:10];
        lineSeries.style.pointStyle.innerRadius = [NSNumber numberWithInt:7];
        lineSeries.style.lineWidth = [NSNumber numberWithInt:2];
        lineSeries.title = [NSString stringWithFormat:@"Line"];
        return lineSeries;
    }
}

- (int)sChart:(ShinobiChart *)chart numberOfDataPointsForSeriesAtIndex:(int)seriesIndex
{
    if (seriesIndex == 0)
    {
        return 12;
    }
    else
    {
        return [self.numberOfCarsArray count];
    }
}

- (id<SChartData>)sChart:(ShinobiChart *)chart dataPointAtIndex:(int)dataIndex forSeriesAtIndex:(int)seriesIndex
{
    SChartDataPoint *datapoint = [[SChartDataPoint alloc] init];
    //datapoint.xValue = [NSNumber numberWithInt:dataIndex];
    if (seriesIndex == 0) {
        switch (dataIndex) {
            case 0:
                datapoint.xValue = @"LYR";
                datapoint.yValue = [NSNumber numberWithInt:150];
                break;
            case 1:
                datapoint.xValue = @"Jan";
                datapoint.yValue = [NSNumber numberWithInt:0];
                break;
            case 2:
                datapoint.xValue = @"Feb";
                datapoint.yValue = [NSNumber numberWithInt:0];
                break;
            case 3:
                datapoint.xValue = @"Mar";
                datapoint.yValue = [NSNumber numberWithInt:0];
                break;
            case 4:
                datapoint.xValue = @"Apr";
                datapoint.yValue = [NSNumber numberWithInt:0];
                break;
            case 5:
                datapoint.xValue = @"May";
                datapoint.yValue = [NSNumber numberWithInt:0];
                break;
            case 6:
                datapoint.xValue = @"Jun";
                datapoint.yValue = [NSNumber numberWithInt:0];
                break;
            case 7:
                datapoint.xValue = @"Jul";
                datapoint.yValue = [NSNumber numberWithInt:0];
                break;
            case 8:
                datapoint.xValue = @"Aug";
                datapoint.yValue = [NSNumber numberWithInt:0];
                break;
            case 9:
                datapoint.xValue = @"Sep";
                datapoint.yValue = [NSNumber numberWithInt:0];
                break;
            case 10:
                datapoint.xValue = @"Oct";
                datapoint.yValue = [NSNumber numberWithInt:0];
                break;
            case 11:
                datapoint.xValue = @"CYR";
                datapoint.yValue = [NSNumber numberWithInt:150];
                break;
            default:
                break;
        }
    }
    else
    {
        switch (dataIndex) {
            case 0:
                datapoint.xValue = @"Jan";
                break;
            case 1:
                datapoint.xValue = @"Feb";
                break;
            case 2:
                datapoint.xValue = @"Mar";
                break;
            case 3:
                datapoint.xValue = @"Apr";
                break;
            case 4:
                datapoint.xValue = @"May";
                break;
            case 5:
                datapoint.xValue = @"Jun";
                break;
            case 6:
                datapoint.xValue = @"Jul";
                break;
            case 7:
                datapoint.xValue = @"Aug";
                break;
            case 8:
                datapoint.xValue = @"Sep";
                break;
            case 9:
                datapoint.xValue = @"Oct";
                break;
            default:
                break;
        }
        datapoint.yValue = [NSNumber numberWithInt:[[self.numberOfCarsArray objectAtIndex:dataIndex]intValue]];
    }
    return datapoint;
}

I also tried using 3 Series (Column, Line, Column) but the width of each Column was like 100px and the “focus” area was missing 1 column.

Do you have any tips, ideas, better ways to make the chart? Any help is greatly appreciated  :smile:


#2

Hi Rodrigo,

The X-axis problem is because of the SChartNumberRange you initialised with; intead of 0 to 12, you will need to initialise it to -0,5 to 11.5.

To hide the “0” labels, you should only need to add datapoints at LYR and CYR, so make the numberOfDataPointsForSeries count “2” for seriesIndex == 0, and remove cases 1 to 10 in the dataPointAtIndex for seriesIndex == 0.


#3

Hi tkelly,

I tried what you said, but got this:

To solve the missing Column and Point, had to change the range to -1 and 12.

But changing the numberOfDataPointsForSeries to 2, is not solving the problem.

Any ideas?


#4

Ah, I see what you mean. It might be possible then to modify the SChartCategoryAxis’ “categories” property, setting it to the order you want.

If this doesn’t work, your best bet would be to use the SChartDelegate method alterTickMarkLabel:, and have it set label.hidden = YES if value == 0.


#5

Hi there 

May I ask it is possible to hide the value yAxis when it is “0”

Screenshot%2018/9/14%207:00%20pm

Thank you


#6

Hi bosslee,

It’s possible to customise individual tick labels using the delegate method sChart:alterTickMark:beforeAddingToAxis:. You should be able to implement this method to test for a 0 value on your y-axis and then hide the label if found.

Hope that helps!  :laughing:

Ryan