Tooltips like in the Impress example in ShinobiPlay app


#1

Could you kindly explain how to achieve tooltips like in the Impress example in ShinobiPlay app (one single view with all the values from the different series)?

Thanks
Paolo


#2

Hi Paulo,

Have you seen the tutorial on our blog about customizing the crosshair: http://www.shinobicontrols.com/blog/posts/2012/07/19/customizing-that-crosshair/?

That might be a useful starting point!


#3

Hi Paolo,

The main challenge with this is getting hold of the right data point from each series.  In the Impress example in ShinobiPlay, we achieved this by creating our own custom tooltip, and overriding the SChartCrosshairTooltip setDataPoint:fromSeries:fromChart method like so:

- (void)setDataPoint:(id<SChartData>)dataPoint fromSeries:(SChartSeries *)series fromChart:(ShinobiChart *)chart {
    
    // Find the index of the data point within our series
    int dataPointIndex = [dataPoint sChartDataPointIndex];
    
    // Go through each series and contribute the relevant data
    for (SChartSeries *seriesInChart in chart.chartSeries) {
        
        // If we are looking at the Bollinger band series, move onto the next series. We don't use this series for our tooltip, and it has fewer data points in it than the other series
        if ([seriesInChart isKindOfClass:[SChartBandSeries class]]) {
            continue;
        }
        
        id<SChartData> dataPointInSeries = [seriesInChart.dataSeries.dataPoints objectAtIndex:dataPointIndex];
        
        // OHLC data
        if ([seriesInChart isKindOfClass:[SChartOHLCSeries class]]) {
            SChartMultiYDataPoint *dp = dataPointInSeries;
            
            NSNumber *secondsSinceEpoch = [chart.xAxis transformValueToExternal:dp.xValue];
            NSDate *date = [NSDate dateWithTimeIntervalSince1970:[secondsSinceEpoch doubleValue]];
            NSString *formattedDateString = [dateFormatter stringFromDate:date];
            
            label.text = [NSString stringWithFormat:@"%@", formattedDateString];
            label.textAlignment = UITextAlignmentLeft;
            
            NSNumber *open = [dp.yValues objectForKey:@"Open"];
            openLabel.text = [NSString stringWithFormat:@"Open: %.2f", [open floatValue]];
            
            NSNumber *high = [dp.yValues objectForKey:@"High"];
            highLabel.text = [NSString stringWithFormat:@"High: %.2f", [high floatValue]];
            
            NSNumber *low = [dp.yValues objectForKey:@"Low"];
            lowLabel.text = [NSString stringWithFormat:@"Low: %.2f", [low floatValue]];
            
            NSNumber *close = [dp.yValues objectForKey:@"Close"];
            closeLabel.text = [NSString stringWithFormat:@"Close: %.2f", [close floatValue]];
        }
        // Volume data
        else if ([seriesInChart isKindOfClass:[SChartColumnSeries class]]) {
            // Otherwise we are dealing with a column chart series. This will contain standard data points.
            SChartDataPoint *dp = dataPointInSeries;

            volumeLabel.text = [NSString stringWithFormat:@"Volume: %@", [volumeFormatter stringFromNumber:dp.yValue]];
        }
    }
}

There are a few things to note in our implementation there.  We have a few different series in the Impress chart, and we deal with each of them in turn.  We aren’t displaying values for the Bollinger bands in the chart, so we can ignore that series.

The first thing we do is to get the index of the current data point in its series.  We then go through each of our series and get the data point at the corresponding index.  Once we’ve got the right data point, we can query its y values.

I haven’t put in the code to create or position the labels in our custom tooltip, I figure that probably won’t be too relevant to you.  The code above should allow you to get started with querying the right values to display in your tooltip.

Hope that helps!

Dan