Ios CrossHair ToolTip


#1

My issue is that the tooltip does not work on the entire frame of the graph, if the legend is on the topMiddle . It works from the top until certain point, only and nothing below that shows up in tooltip, will not get selected at all.
But if I add the legend to right vertical tooltip shows for the entire graph, from the bottom of the graph to the top of the graph. I also observer that if i add legend to the left vertical the right most point on the graph do not show tooltip.
but if i decrease the font, ToolTip works for some more points below. In my case if i want to get all points selected i am forced to have legend on the right, which is not my preference.

Can i know the reason as to why the graph is behaving in such a manner.
My requirement is to add the legend on the Top Middle and later the graph would spread the entire frame, but now i have my legend on the right which makes my graph smaller comparatively.
Can i know the reason for such behaviour and also how do i fix it ?

I have attached screenshots for the same stating my issue.




How to select only datapoints in SChart Line Series?
#2

Hi skr,

It looks like this is a custom crosshair and/or tooltip so it’s possible your code is basing its calculations on the wrong part of the chart, e.g. using the chart or canvas frame instead of the plot area frame. The shinobi user guide explains the difference.

If you could share your custom crosshair code then that could help us spot the problem.

Kind regards,

Alison


#3

Hi, I’m sharing you teh code could ypu please help me out regarding this.

// Create and style the chart
self.dollarAmountChart = [[ShinobiChart alloc] initWithFrame:CGRectMake(5, 0, self.ChartView.bounds.size.width, self.ChartView.bounds.size.height)];
self.dollarAmountChart.licenseKey = kPCYCShinobiLicenseKey;
self.dollarAmountChart.datasource = self;
self.dollarAmountChart.delegate = self;

self.dollarAmountChart.backgroundColor = [UIColor clearColor];
self.dollarAmountChart.autoresizingMask =  UIViewAutoresizingFlexibleWidth ;
self.dollarAmountChart.rotatesOnDeviceRotation = NO;
self.dollarAmountChart.plotAreaBorderThickness = 0;
self.dollarAmountChart.borderThickness = 0;

// Legend
self.dollarAmountChart.legend.position = SChartLegendPositionTopRight;
self.dollarAmountChart.legend.style.orientation = SChartLegendOrientationVertical;


self.dollarAmountChart.legend.style.textAlignment = NSTextAlignmentLeft;
self.dollarAmountChart.legend.style.font = [PCYCFonts fontForChartLegend];
self.dollarAmountChart.legend.style.borderWidth = 0;
self.dollarAmountChart.legend.style.symbolAlignment = SChartSeriesLegendAlignSymbolsLeft;
self.dollarAmountChart.legend.style.marginWidth = @(0);
self.dollarAmountChart.legend.symbolWidth = @(4);

self.dollarAmountChart.legend.hidden = NO;

// Crosshair and Tooltip
self.customCrosshair = [[SChartCrosshair alloc] initWithChart:self.dollarAmountChart];
self.customCrosshair.style.lineColor = [UIColor grayColor];
self.customCrosshair.style.lineWidth = @1;
self.customCrosshair.interpolatePoints = NO;
ChannelInventoryChartTooltip *customTooltip = [ChannelInventoryChartTooltip new];
self.customCrosshair.tooltip = customTooltip;
self.customCrosshair.tooltip.backgroundColor = [UIColor greenColor];


self.dollarAmountChart.crosshair = self.customCrosshair;

// X-axis (Time)
self.xAxis = [SChartDateTimeAxis new];
self.xAxis.enableGesturePanning = YES;
self.xAxis.enableGestureZooming = YES;

// Add padding to show the data points at the edges
NSDate *todayDate = [NSDate date];

NSDateComponents *dateComponents = [[NSDateComponents alloc] init];
[dateComponents setMonth:-month];
NSDate *fromdate = [[NSCalendar currentCalendar] dateByAddingComponents:dateComponents toDate:todayDate options:0];
// Add padding to show the data points at the edges
self.xAxis.defaultRange = [[SChartDateRange alloc]initWithDateMinimum:fromdate andDateMaximum:todayDate];
[self.xAxis setRange: [[SChartDateRange alloc]initWithDateMinimum:fromdate andDateMaximum:todayDate]];

// self.xAxis.majorTickFrequency = [SChartDateFrequency dateFrequencyWithDay:7];
// self.xAxis.rangePaddingHigh = [SChartDateFrequency dateFrequencyWithDay:7];

self.xAxis.style.lineColor = [UIColor clearColor];
self.xAxis.style.majorTickStyle.labelFont = [PCYCFonts fontForChartAxis];

// self.xAxis.style.majorTickStyle.labelFont = [UIFont fontWithName:@“DINPro-CondBold” size:6.0f];
self.dollarAmountChart.xAxis = self.xAxis;

// Y-axis (Dollars)
self.yAxis = [SChartNumberAxis new];
self.yAxis.enableGesturePanning = YES;
self.yAxis.enableGestureZooming = YES;
self.yAxis.style.lineColor = [UIColor clearColor];
self.yAxis.width = @(25);
self.yAxis.majorTickFrequency = @(0);
self.yAxis.style.majorGridLineStyle .lineColor = [UIColor redColor];
self.yAxis.style.majorGridLineStyle.lineWidth = @(1);

//
[self.yAxis setDefaultRange: [[SChartNumberRange alloc] initWithMinimum:[NSNumber numberWithInt: 0] andMaximum:[NSNumber numberWithInt: 20]]];
[self.yAxis setMajorTickFrequency:[NSNumber numberWithInt: 3]];

self.yAxis.style.majorTickStyle.labelFont = [PCYCFonts fontForChartAxisSmall];;
self.dollarAmountChart.yAxis = self.yAxis;
self.yAxis.rangePaddingLow = @(0.5);
self.yAxis.rangePaddingHigh = @(0.5);

[self.ChartView addSubview:self.dollarAmountChart];
  • (NSInteger)numberOfSeriesInSChart:(ShinobiChart *)chart {

    // Total, 90 and 120
    //return 3;
    return self.displayModels.count;
    }

-(SChartSeries *)sChart:(ShinobiChart *)chart seriesAtIndex:(NSInteger)index {

SChartLineSeries *lineSeries = [SChartLineSeries new];
lineSeries.selectionMode = SChartSelectionPoint;
lineSeries.style.pointStyle.showPoints = YES;

lineSeries.crosshairEnabled = YES;
lineSeries.style.showFill = NO;
lineSeries.style.pointStyle.showPoints = YES;
lineSeries.style.pointStyle.radius = @(5);




ChannelDOH *model = self.displayModels[index][0];
lineSeries.title = model.channel;

return lineSeries;
}

  • (NSInteger)sChart:(ShinobiChart *)chart numberOfDataPointsForSeriesAtIndex:(NSInteger)seriesIndex {

    // 5 weeks only for now
    return [self.displayModels[seriesIndex] count];
    }

  • (id)sChart:(ShinobiChart *)chart dataPointAtIndex:(NSInteger)dataIndex forSeriesAtIndex:(NSInteger)seriesIndex {

    SChartDataPoint *datapoint = [SChartDataPoint new];

    ChannelDOH *model = self.displayModels[seriesIndex][dataIndex];
    datapoint.xValue = model.periodEnd;
    if(_selectedIndex ==0){
    float yValue = model.DOH_4WEEK;
    datapoint.yValue = @(yValue);

    }

    else {
    float yValue = model.DOH_CURRENTWEEK;
    datapoint.yValue = @(yValue);

    }
    return datapoint;
    }

-(void)sChart:(ShinobiChart *)chart crosshairMovedToXValue:(id)x andYValue:(id)y {

// Alter text (MMM dd, dollars)

NSString *tooltipText = self.customCrosshair.tooltip.label.text;
int index = (int) [tooltipText rangeOfString:@" " options:NSBackwardsSearch].location;
NSDate *dateValue = (NSDate *)x;
NSString *timeText = [dateValue stringWithFormat:@"M/d/yy"];
NSString *valueText = [tooltipText substringFromIndex:index+1];
valueText = [valueText stringByReplacingOccurrencesOfString:@"," withString:@""];
valueText = [CommonUtil stringFromNumber:@([valueText floatValue]) returnCurrencySymbol:NO];
tooltipText = [NSString stringWithFormat:@"%@,%@", timeText, y];
NSLog(@"color:%@",chart.legend.title);

self.customCrosshair.tooltip.backgroundColor = [UIColor yellowColor];
self.customCrosshair.tooltip.label.text = tooltipText;

}

#pragma mark - SChartDelegate

  • (void)sChart:(ShinobiChart *)chart alterTickMark:(SChartTickMark *)tickMark beforeAddingToAxis:(SChartAxis *)axis {

    // Only change dollar amount
    if (axis == chart.xAxis) {
    return;
    }
    // Format dollar amount
    // tickMark.tickLabel.text = [CommonUtil mFormatForNumberToString:@(tickMark.value)];
    tickMark.tickLabel.text = [CommonUtil stringFromNumber:@(tickMark.value) returnCurrencySymbol:NO];
    }

  • (void)sChartDidFinishLoadingData:(ShinobiChart *)chart {

    // Add padding to show the data points at the edges
    if (chart.yAxis.rangePaddingLow == 0) {
    int padding = ([chart.yAxis.range.maximum intValue] - [chart.yAxis.range.minimum intValue]) / 100;
    chart.yAxis.rangePaddingLow = @(padding);
    chart.yAxis.rangePaddingHigh = @(padding);
    [chart reloadData];
    }
    }

I’ve taken the chartview in the storyboard.


#4

Hi skr,

It looks like you’re using a custom tooltip:

but you haven’t included the code for ChannelInventoryChartTooltip? I think that’s what we need to see in order to work out what’s going on.

Regards,

Alison