JBLineChartView scrollable

Question

I am using JBLineChartView for charting, but I got a lot of data and it looks very squeezed when I display all data points in one view. So I was curious if it is possible to activate/adding scrolling to the chart?

Answer 1

I've come with a simple solution. However, if you intend to have this chart displaying tooltips at the touched points the same way as the JBChartViewDemo, it won't work (I'll post the workarround here)

Create a UIScrollView, and inside it, add your JBLineChartView.

//You can call this method in -(void)viewDidLoad{}
-(void) initializeChart
{
       //UIScrollView (an IBOutlet called chartScrollView) with 5 Pages
        [JBLineChartView *balanceLineChartView = [[JBLineChartView alloc] initWithFrame:CGRectMake(0, 0,1400, 300)];

        //Setting up the UIScrollView contents frame size 
        self.chartScrollView.contentSize = balanceLineChartView.bounds.size;
        //Preventing vertical scrolling
        self.chartScrollView.contentInset = UIEdgeInsetsMake(-80,0,0,0);
        //UIScrollView frame
        self.chartScrollView.frame = CGRectMake(15, 235, 280, 300);
        //JBLineChartView setup
        self.balanceLineChartView.delegate = self;
        self.balanceLineChartView.dataSource = self;
        self.balanceLineChartView.headerPadding = kJBLineChartViewControllerChartHeaderPadding;
        self.balanceLineChartView.backgroundColor = kJBColorLineChartBackground;
        //Add your parameters, create header, footer, etc.
        //...
        //Then add your JBLineChartView to your UIScrollView
        [chartScrollView setClipsToBounds:YES];
        [chartScrollView addSubview:balanceLineChartView];

        //This is a custom view for Tooltip I've made with Interface Builder. For more info on that,
        //This link is about making custom UITableViewCell with Interface Builder, but you can build
        //other UIViews. http://www.appcoda.com/customize-table-view-cells-for-uitableview/
        //It has two UIlabels, and called "chartTooltipView". It is a property 
        //of myUIViewController.     
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"UIMyCustomViewWithTwoLabels" owner:
    self   options:nil];
        chartTooltipView = [nib objectAtIndex:0];
        [self.view addSubview: chartTooltipView];
}

To make the tooltips appear when you click on the points, I had to do something like this:

//Define JBLineChartViewDelegate method
- (void)lineChartView:(JBLineChartView *)lineChartView didSelectLineAtIndex:
        (NSUInteger)lineIndex horizontalIndex:(NSUInteger)horizontalIndex touchPoint:
        (CGPoint)touchPoint
{
    //Tooltip settings

    float tooltipOriginX =0;
    float tooltipOriginY = 0;

        //Calculate tooltip position inside UIScrollView frame area (inside it's frame)
        //kMaxChartPointX is a float constant I defined based on the UIScrollView frame 
        //(to prevent the tooltip from appearing outside the chart visible area. I've used 
        //218.0f in this case.) 
        CGPoint contentOffset = [chartScrollView contentOffset];
        tooltipOriginX = ((touchPoint.x - contentOffset.x)>=
                     kMaxChartPointX)? kMaxChartPointX: (touchPoint.x -contentOffset.x);

        chartTooltipView.frame =
        CGRectMake(tooltipOriginX, tooltipOriginY, kUITicketChartTooltipViewWidth, 
                                                                    kUITicketChartTooltipViewHeight);
        //Show tooltip
        [chartTooltipView setHidden: NO];
        [self.view bringSubviewToFront:chartTooltipView];
        //Add the points data to the tooltip view from your datasource. 
        chartTooltipView.label1.text = @"MyDataText1";
        chartTooltipView.label2.text = @"MyDataText2";
}


//Hide the tooltip view
- (void)didUnselectLineInLineChartView:(JBLineChartView *)lineChartView
{
    [chartTooltipView setHidden: YES];
}

Screenshots: