thumbnail12

Back to Blog

Individual Point Styling & Discontinuous Line Series in ShinobiCharts 2.7

Posted on 14 Jul 2014 Written by Ryan Grey

The release of ShinobiCharts 2.7.0 saw the introduction of two exciting new features – individual point styling and discontinuous line series. These were two of our most requested features, so we thought that all you eager charters out there would appreciate a crash course in the new API.

Individual Point Styling

Styling a series is done via one of the concrete SChartSeriesStyle sublasses, such as SChartColumnSeriesStyle. Instances of these style classes encapsulate details about how you would like a particular series to appear such as the colors or gradient to use.

The use of these style objects makes it easy for all data points in a series to have the same appearance – all you have to do is configure a series’ style property. For example, the following will make all the data points in a column series look red.

columnSeries.style.areaColor = [UIColor redColor];

But what happens when you want some data points in your column series to look different from others? This is why we have introduced the method styleForPoint: in ShinobiCharts 2.7.0 for every series except radial line series and pie/donut charts.

This new method returns a style object to be used for a given point within a series. The default implementation is simply to return the series.style or series.selectedStyle for every point, resulting in all points having the same appearance. However we can subclass the series type in question and overwrite this method to do whatever styling we want per point.

Individual Point Styling

We have a sample app that shows this in action: either take a look on Github, or download the zip. Checking out the code and running it should display a column series with two red columns, a green column and an orange column.

Take a look at the TrafficLightColumnSeries class to see how this is being achieved. The following method contains the interesting bits.

- (SChartColumnSeriesStyle *)styleForPoint:(id<SChartData>)point {

    SChartColumnSeriesStyle *newStyle = [super styleForPoint:point];
    if (point.sChartPointIsSelected) {
        //We want to let the superclass have its way if the point is selected.
        return newStyle;
    }

    float yValue = [[point sChartYValue] floatValue];
    newStyle.showAreaWithGradient = NO;

    if (yValue > 10) {
        newStyle.areaColor = [UIColor greenColor];
    } else if(yValue > 6) {
        newStyle.areaColor = [UIColor orangeColor];
    } else {
        newStyle.areaColor = [UIColor redColor];
    }
    return newStyle;
}

The selection statement where we just return the super style is used so that we return the normal series style when the point is selected. We’ve set columnSeries.selectionMode = SChartSelectionPoint to enable point selection. You can try this out by tapping a column in the chart. Prior to v2.7.0 single point selection didn’t work for column series (only entire series selection worked), but this now functions as expected and you should see the tapped column turn blue. Huzzah!

The rest of our overridden method chooses a color based on the point’s y-value in order to return green for high values, orange for mid values and red for low values.

Take a peek at the view controller to see the sChart:seriesAtIndex: method where we use and return an instance of the TrafficLightColumnSeries. And that’s all there really is to it, so let’s see what awesome rainbow colored series you can come up with!

Discontinuous Line Series

The second big feature we introduced in v2.7.0 is the ability to have discontinuous line series, which allows gaps to appear within the rendered series. This is as easy as returning a nil y-value for any data point in your line series where you would like a gap to appear. You can checkout an example of this on Github, or download the zip. The interesting bit of code is where we return the data points to the chart via the SChartDatasource method in the ViewController.m file.

- (id<SChartData>)sChart:(ShinobiChart *)chart dataPointAtIndex:(NSInteger)dataIndex forSeriesAtIndex:(NSInteger)seriesIndex {
    SChartDataPoint *dataPoint = _timeSeries[dataIndex];

    NSDate *lowerBound = [self dateFromString:@"01-01-2009"];
    NSDate *upperBound = [self dateFromString:@"01-01-2010"];

    if ([self isDate:dataPoint.xValue inRangeWithLowerBound:lowerBound upperBound:upperBound]) {
        //then we want a gap, so nil the y value
        dataPoint.yValue = nil;
    }

    return dataPoint;
}

Here we are using the isDate:inRangeWithLowerBound:upperBound: method from ViewController.m to decide if the data point in question lies between the randomly chosen date range of 1 Jan 2009 to 1 Jan 2010, and if so set the y-value to nil. Running the project will show that this results in a gap being rendered in our line series between those two dates. The two separate lines that are rendered actually belong to our one line series object.

This effect is slightly different from simply styling the data points in question to have an alpha of 0, in that those points technically don’t exist in the series when returning nil y-values. This is illustrated by the crosshair’s behavior when used on the series. In order to see this we have set lineSeries.crosshairEnabled = YES when returning the series from our data source method. This should allow you to long press on the chart to bring up the tooltip/crosshair. Continuing to long press and then panning on the chart will move the crosshair along the series. If you try doing this along the gap in the series the crosshair will jump to the closest line indicating that there are no points to track between 2009 and 2010.

Discontinuous Line Series

In this example we’re manipulating a complete dataset at runtime to insert gaps into the data. But we can see this feature being quite useful for when those gaps already exist within your dataset.

That concludes our quick intro to the new ShinobiCharts 2.7.0 features, which should get you going with the basics. Be sure to drop us a line if you feel we’ve missed anything that would be useful to know. We hope that these features add to the already large coverage of data visualization use cases that ShinobiControls supports and that they allow you to produce even cooler charts for your apps!

Back to Blog