Shinobi Chart LineSeries Swift/Obj-C

Question

I am new to Shinobi Tools and I have a set of points, which I want to connect to a line series. I saw that shinobi offers this function as SChartLineSeries. Could somebody be that nice and explain it to me:D? I really don't get the documentation. A code sample would be nice!!

This is What I currently have

This is what I want to achieve. I have 5 x- and y-Values. Those shouldn't be connected with straight lines. KEYWORD: Spline

Nat · Accepted Answer · 2015-11-06T15:54:21.223

1

Did you read this: https://www.shinobicontrols.com/ios/shinobicharts/quickstartguide? Quite good in fact, but their page is not so user friendly and at first I had troubles to find it.

The below solution is in Objective-C but it should be straightforward to translate it to Swift.

In short: Firstly import the framework:

#import <ShinobiCharts/ShinobiChart.h>

Then create the chart object and the axes:

// in viewDidLoad
ShinobiChart* _chart;
_chart.xAxis = [[SChartNumberAxis alloc] init];
_chart.yAxis = [[SChartNumberAxis alloc] init];
_chart = [[ShinobiChart alloc] initWithFrame:self.view.bounds];

[self.view addSubview:_chart];

Then implement the datasource <SChartDatasource>:

// in viewDidLoad
_chart.datasource = self;

- (int)numberOfSeriesInSChart:(ShinobiChart *)chart {
    return 2;
} 

-(SChartSeries *)sChart:(ShinobiChart *)chart seriesAtIndex:(int)index {
SChartLineSeries *lineSeries = [[SChartLineSeries alloc] init];
    if (index == 0) {
        lineSeries.title = [NSString stringWithFormat:@"y = cos(x)"];
    } else {
        lineSeries.title = [NSString stringWithFormat:@"y = sin(x)"];
    }

    return lineSeries;
}

- (int)sChart:(ShinobiChart *)chart numberOfDataPointsForSeriesAtIndex:(int)seriesIndex {
    return 100;
}

- (id<SChartData>)sChart:(ShinobiChart *)chart dataPointAtIndex:(int)dataIndex forSeriesAtIndex:(int)seriesIndex {

    SChartDataPoint *datapoint = [[SChartDataPoint alloc] init];

    // both functions share the same x-values
    double xValue = dataIndex / 10.0;
    datapoint.xValue = [NSNumber numberWithDouble:xValue];

    // compute the y-value for each series
    if (seriesIndex == 0) {
        datapoint.yValue = [NSNumber numberWithDouble:cosf(xValue)];
    } else {
        datapoint.yValue = [NSNumber numberWithDouble:sinf(xValue)];
    }

    return datapoint;
}

Disclaimer: The datasource implementation is from the quick start guide to which link I've presented above.

-- edit --

To curve the graph you need to add more datapoints by yourself (calculate the value and set more than 5 points). Please see the discussion on Shinobi Chart support forum: https://www.shinobicontrols.com/forum/shinobicontrols/2015/6/spline-line-chart.

edited Nov 06 '15 at 15:54

answered Nov 06 '15 at 14:47

Nat

12,032
9
56
103

Thanks yes I have seen this already. But if I fill the x and y-Values with my own, then I only get a line chart. But what I want is that those lines get rounded, not those straight lines. I will upload a picutre – Tom el Safadi Nov 06 '15 at 15:10
@Anokrize I don't understand what you exactly need to do. Mention me in the comments after you edit your question. Maybe add more details (if you'd add it previously, I wouldn't rewrite what you've already did...) with that picture. – Nat Nov 06 '15 at 15:14
See now the picture below is what I want to achieve @Vive – Tom el Safadi Nov 06 '15 at 15:15
@Anokrize I'm not sure, but I didn't find any method to make the chart "not sharp". I suspect you'll need to add some virtual data points between your real data points to make it look "curved". – Nat Nov 06 '15 at 15:36
I think the keyword is: SChartLineSeries. There you can add **datapoints**, which I have as I said that I currently have 5 datapoints. I think the graph will then connect it to a spline. But I don't get this... – Tom el Safadi Nov 06 '15 at 15:38
@Anokrize Now I'm confused. You just want to have more than 5 data points or you want the chart not to be straight line between 2 specific points? – Nat Nov 06 '15 at 15:40
No. I want the graph to connect these 5 datapoints which I have to a "curved" graph. There is a function called SChartSeries. In SChartSeries I can give in my datapoints and then they will get calculated to a curved graph. – Tom el Safadi Nov 06 '15 at 15:42
https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiCharts/2.8.0/Premium/Normal/html/Classes/SChartSeries.html see this but I don't get it. – Tom el Safadi Nov 06 '15 at 15:43
@Anokrize Ok I've found a good reference, please see my updated answer. ShinobiChart for the time being is not able to "curve" the graph. You need to add more datapoints so it seems to be curved. The reference you've shown displays many datapoints, when zoomed out it looks like "curved". In fact you have there many straight connected points. – Nat Nov 06 '15 at 15:55

score 0 · Answer 2 · answered Nov 06 '15 at 17:34

DISCLAIMER: I am a developer for Shinobi Controls.

Our current SChartLineSeries doesn't support smooth lines straight out of the box.

However, this is a feature that has been requested frequently and because of this our next version of charts that contains functionality to make it easier to achieve smoothed lines.

In the mean time, you can achieve smoothed lines by adding a lot more datapoints to your chart, giving them data values that will draw your curve. As Vive explained in her answer.

We will update this post when the release containing this feature has been released.

Kind regards,

Andrew Polkinghorn.

Shinobi Chart LineSeries Swift/Obj-C

2 Answers2