SChartLineSeries, curved lines


#1

Hello, I was looking for a solution to make the lines curved like the attached screen

what we have now, is the screen in my comment below ,

Thank you in advanced for your help


#2

This is what we have now


#3

Hi Fouad,

It looks like you want to use a data smoother, which is a component that adds intermediate points to your original dataset to give the impression of a curved line.

You can either create your own by supplying a custom object to the series.dataSmoother property, or alternatively use those supplied as part of our Advanced Charting Kit product. If you’re a professional (or above) customer you should see this in the customer portal. Alternatively, you may want to download a free trial and take a look at our sample app which demonstrates smoothing in action.

I hope that helps!

Sam


#4

Hi Sam,

Actually we have the pro license since I’m not working as individual developer, and we are developing a project for banking client,

Anyway, we want to use Shinobi for iOS, Android & web, its a big project, Im a junior iOS developer & Im developing using Objective C, I couldn’t figure out the series.dataSmoother thing, would you please provide me a code snippet or something similar, that would helps a lot as well,

Thank you in advanced,


#5

I’ve written a blog post that details how to use the smoother.
https://www.shinobicontrols.com/blog/advanced-charting-for-ios-part-2-smoothing

This will be the best place to start as it explains what is happening. Adding the smoothing effect should only be a single line of code once you work out which smoother you want to use :slight_smile:

There is also a sample included with the library which might help too.


#6

Hello,

We saw your blog about this issue but also we couldn’t figure it out with Swift, we are building this section with Objc, if you please provide us a sample written with objc, such like this line ACKCatmullRomSplineSmoother(numberOfSegments: index+1) we couldn’t know what these values are

Thanks


#7

Once you have imported the ACK library it’s just one line of code to enable a smoother.

Here is the code to create and assign a Mid-Point smoother. The number “2” is an arbitrary value and you should use trial and error to find a value that produces the effect you would like:

lineSeries.dataSmoother = [ACKMidPointSmoother initWithNumberOfPasses:2];


#8

Thank you for your help, but we found that a bug happened when we did the dataSmoother,
We are using SChartAnnotation points, the position of the points is not following the curved line anymore …

SChartAnnotation *releaseBeforeLabel = [SChartAnnotation annotationWithText:@""
andFont:[UIFont systemFontOfSize:20.f]
withXAxis:lineChart.xAxis
andYAxis:lineChart.yAxis
atXPosition:date
andYPosition:yBeforeValue
withTextColor:[UIColor clearColor]
withBackgroundColor:[UIColor clearColor]];

    releaseBeforeLabel.transform = rotationTransform;
    releaseBeforeLabel.position = SChartAnnotationAboveData;
    
    UIView *pointView = [[UIView alloc] init];
    pointView.frame = CGRectMake(0, 0, 15, 15);
    pointView.backgroundColor = [[infoArray objectAtIndex:0]objectForKey:@"color"];
    pointView.center = CGPointMake(releaseBeforeLabel.frame.size.width/2, releaseBeforeLabel.frame.size.height/2+5);
    pointView.layer.cornerRadius  = pointView.frame.size.height/2;
    pointView.layer.masksToBounds = NO;
    pointView.layer.shadowColor   = [UIColor blackColor].CGColor;
    pointView.layer.shadowOffset  = CGSizeMake(0.5f, 0.5f);
    pointView.layer.shadowOpacity = 0.2f;
    
    UIView *dotView = [[UIView alloc] init];
    dotView.backgroundColor = COLOR_WHITE;
    dotView.frame  = CGRectMake(0, 0, 5, 5);
    dotView.center = CGPointMake(pointView.frame.size.width/2, pointView.frame.size.height/2);
    dotView.layer.cornerRadius = dotView.frame.size.height/2;
    
    [pointView addSubview:dotView];
    [releaseBeforeLabel addSubview:pointView];

this is a screen shot

any suggestions will be appreciated

Thank you a lot,


#9

Hi Foaud,

This is expected behaviour as our ACKMidPointSmoother creates a smoothed line representing the average.

We have implemented a smoother that goes through all the points and is called ACKCatmullRomSplineSmoother and can be used like so:

lineSeries.dataSmoother = [ACKCatmullRomSplineSmoother new];

Let me know if you have any questions.

Kind regards,
Andrew Polkinghorn.


#10

Thank you very much, that was helpful,
Cheers