Search code examples
objective-cchartsshinobi

Shinobi Chart LineSeries Swift/Obj-C


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 Current Situation

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


Solution

  • 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.