Shinobi Charts: example of how to subclass SChartCrosshairTooltip or SChartCrosshairMultiValueTooltip

Question

I'm using the Shinobi Controls charting package on iOS and I cannot fathom how to implement a crosshair tooltip showing multiple y values. In my case I have a candlestick chart showing standard financial OHLC data values using the SChartCandlestickSeries class. The documentation seems to imply that I need to subclass an SChartSeries in order to implement some SChartData protocol methods, but I can't believe it's that involved.

I'm still struggling through the documentation here, but if anyone has some example code it would be worth its weight in gold right now!

Note: I've tried simply assigning an instance of SChartCrosshairMultiValueTooltip to the chart's crosshair.tooltip property but that doesn't seem to do very much - I just see a normal tooltip displaying a single x and y value.

score 2 · Accepted Answer · answered Oct 30 '13 at 19:30

It sounds like you're very much along the right lines. You need a multi-valued series (supplied by the appropriate datasource method):

- (SChartSeries *)sChart:(ShinobiChart *)chart seriesAtIndex:(int)index
{
    SChartCandleStickSeries *series = [SChartCandlestickSeries new];
    series.crosshairEnabled = YES;
    return series;
}

And then the chart needs to have a tooltip set to an instance of the type you mentioned (SChartCrosshairMultiValueTooltip):

ShinobiChart *chart = [[ShinobiChart alloc] initWithFrame:self.view.bounds
                                     withPrimaryXAxisType:SChartAxisTypeNumber
                                     withPrimaryYAxisType:SChartAxisTypeNumber];
chart.datasource = self;
[self.view addSubview:chart];
chart.delegate = self;
chart.crosshair.tooltip = [SChartCrosshairMultiValueTooltip new];

For completeness, the following is the data point method of the datasource:

- (id<SChartData>)sChart:(ShinobiChart *)chart
        dataPointAtIndex:(int)dataIndex
        forSeriesAtIndex:(int)seriesIndex
{
    SChartMultiYDataPoint *d = [SChartMultiYDataPoint new];
    d.xValue = @(dataIndex);
    [d.yValues setValue:_data[dataIndex] forKey:SChartCandlestickKeyOpen];
    [d.yValues setValue:@([_data[dataIndex] doubleValue] * 1.3) forKey:SChartCandlestickKeyHigh];
    [d.yValues setValue:@([_data[dataIndex] doubleValue] * 0.8) forKey:SChartCandlestickKeyLow];
    [d.yValues setValue:@([_data[dataIndex] doubleValue] * 1.1) forKey:SChartCandlestickKeyClose];
    return d;
}

(Note that the values here are just samples)

Sample Chart

Thanks for the great answer, that makes me realise that the basic tooltip operation is as straightforward as I thought it should be. I can now get it to work as you demonstrate; I think I'd mucked up my SChartSeries yesterday with all the desperate hacking around I was doing. Now I just need to subclass the tooltip to get the appearance I need... — Echelon, Oct 31 '13 at 08:09

Shinobi Charts: example of how to subclass SChartCrosshairTooltip or SChartCrosshairMultiValueTooltip

1 Answers1