Varying styles for points on a line series


#1

Hi, I’m trying to do some custom skinning to a line chart and am wondering if this is possible. We want to have all of the points along a line series be different colors based on the y value. It looks like when setting the pointstyle in seriesAtIndex delegate method, that I can only set a universal style per series. To help explain what I’m looking to do, I’ve attached an image of our mockup for this graph. Any advice would be appreciated. Thanks.

varying colors


#2

You could use the following instead:

 - (UIImage *)sChartTextureForPoint:(ShinobiChart *)chart dataPointAtIndex:(int)dataIndex forSeriesAtIndex:(int)seriesIndex

But, I agree, that a convenience method to return a different color for each data point would be nice to have. With this method you’d have to provide your own UIImage, so you have to take care of rendering them in code and caching them yourself, or prerender them as assets for the app.


#3

Thanks for the workaround. Definitely not as convenient, but I imagine it should work well enough.


#4

I have recently been asked by a customer if it is possible to achieve this using ShinobiCharts for Android. In order to help anyone else who may also be asking this I am posting my response below:

Whilst ShinobiCharts for Android does not directly support a line series with multi coloured data points, there are several ways you could potentially achieve this.

The first option is to use several line series as I describe below:

1 - First, create 1 line series as usual with your colour fill, but ensure the data points are hidden:

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.0/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/PointStyle.html#setPointsShown(boolean)

2 - For each different coloured point needed, create a new line series with a data point at each position you need to display the colour. So in the image on the forum post to which you refer, let’s consider the blue points. For this you would create 1 line series, with 2 data points, both at y = 6 and x at the appropriate points  (the x axis is not shown on the image). You would need to hide the line for this series:

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.0/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/LineSeriesStyle.html#setLineShown(boolean)

You would then style the points accordingly (for example set the colour to blue):

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.0/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/PointStyle.html#setColor(int)

You would repeat this for each coloured point set that you need.

The second option involves using one line series:

1 - Create your line series as before, again hiding the points.

2 - For each desired point, you would add a custom view annotation, to set the point image as a coloured circle, or any image of your choice:

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.0/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/AnnotationsManager.html#addViewAnnotation(android.view.View, java.lang.Object, java.lang.Object, com.shinobicontrols.charts.Axis<?, ?>, com.shinobicontrols.charts.Axis<?, ?>)

Please note, Annotations are a premium feature of ShinobiCharts for Android.


#5

A 3rd option could be to use a bubble serie for the points:

1 - Create your line series as before, again hiding the points.

2- Create a customBubbleSeries inherits from SChartBubbleSeries and overload the styleForPoint: method to return the right size / colour dot for each of the points of your line series. Note, that way you can even use images instead of coloured dots using the texture attribute of SChartBubblePointStyle. Here is an code example for the customBubbleSeries class:

@interface customBubbleSeries:SChartBubbleSeries

@end

@implementation customBubbleSeries

  • (SChartBaselinePointStyle *)styleForPoint:(id<SChartData>)point {

    SChartBubblePointStyle *newStyle = [superstyleForPoint:point];

    int xIndex = [[point sChartXValue] intValue];

    switch (myData[xIndex]) {

        case value1:

            newStyle.color = [UIColor colour1];

//            newStyle.texture = [UIImage imageNamed:@“image1.png”];

            break;

        case value2: // comfy

            newStyle.color = [UIColor colour2];

//            newStyle.texture = [UIImage imageNamed:@“image2.png”];

            break;

        case value3: // cosy

            newStyle.color = [UIColor colour3];

//            newStyle.texture = [UIImage imageNamed:@“image3.png”];

            break;

    }

    return newStyle;

}