1
votes

I'm implementing a line chart on iOS with ability for comparing data using iOS Charts and Swift

Simplest Scenario

Compare data of Jan 04 to Jan 05, Jan 05 to Jan 06, Jan 06 to Jan 07 and so on...

So, I need to draw 2 lines with different XAxis (second line is 1 day shifted of first line) and same YAxis

I did

Create 2 line chart views (LineChartView), 1 with top XAxis and legend ; and 1 with bottom XAxis and legend

Problems

  1. Because of space of XAxis labels and legends, 2 lines has different YAxis position (e.g: 0 value of line 1 is around 96 value of line 2). I think some margin may resolve this problem but I can find only 1 option minOffset, which set margins for all top, bottom, left and right. What thing I can use to only margin top and bottom?

  2. All interactions (drag, zoom, touch, etc) only affect 1 of them, not both. How can I make interactions applied to both of them?

Update I resolved first issue by adding minTopBottomOffset and modifying ChartViewBase to use it

More information about what I'm expecting:

  • I have a data like this: [{time: Jan 01, value: 10}, {time: Jan 02, value: 13}, {time: Jan 03, value: 5}]
  • time is X, value is Y
  • I want to draw first line with XAxis at bottom, second line with XAxis displayed on top and second line has XAxis shifted to the right 1 day. 2 lines have same data

See my expected chart here: https://drive.google.com/file/d/0B5DT3STrB2t3UW0wTXpKU1RHSTA/view

Thank you!

1
Can you show the code of how you're setting it up? - Aditya Garg
@AdityaGarg I only created 2 LineChartView inside same UIView and draw them. 1 with top XAxis and legend ; and 1 with bottom XAxis and legend. No special configurations - metamon
I dont think Im quite following. If you are comparing 2 days, wouldnt they both have the same x and y axis? Thats the only way the comparison makes sense. Can you elaborate on what you mean by "day shifted" - Aditya Garg
@AdityaGarg Thanks for replying. I have same YAxis but not XAxis. My example: - I have a data like this: [{time: Jan 01, value: 10}, {time: Jan 02, value: 13}, {time: Jan 03, value: 5}] - time is X, value is Y - I want to draw first line with XAxis at bottom, second line with XAxis displayed on top and second line has XAxis shifted to the right 1 day. 2 lines have same data See my expected chart here: drive.google.com/file/d/0B5DT3STrB2t3UW0wTXpKU1RHSTA/… - metamon

1 Answers

1
votes

OK,I think your graph is as strange as mine. :p

1,What thing I can use to only margin top and bottom?

You need not add minTopBottomOffset to the BarLineChartViewBase.You should just use setViewPortOffsets method.

chartView.setViewPortOffsets(left: left, top: top, right: right, bottom: bottom)

2,All interactions (drag, zoom, touch, etc) only affect 1 of them, not both. How can I make interactions applied to both of them?

We can just do it in a little dirty way -- Add a block view to receive all gestures ,and pass them to each chart.

First, in BarLineChartViewBase ,add a method as below(The code is uncompleted.It only works for TapGestureRecognizer and PanGestureRecognizer now.).

//Modify
@objc open func receiveGestureRecognized(_ recognizer: NSUIGestureRecognizer)
{
    if recognizer is NSUITapGestureRecognizer
    {
        self.tapGestureRecognized(recognizer as! NSUITapGestureRecognizer)
    }
    else if recognizer is NSUIPanGestureRecognizer
    {
        self.panGestureRecognized(recognizer as! NSUIPanGestureRecognizer)
    }
}

Secondly ,you should add a block view in front of your two charts and cover them all.

Then add some code like these(example for PanGestureRecognizer):

 UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)];
[self.blockView addGestureRecognizer:panGestureRecognizer];

handleGesture:

- (void)handleGesture:(UIPanGestureRecognizer *)gestureRecognizer
{
[self.chartView1 receiveGestureRecognized:gestureRecognizer];
[self.chartView2 receiveGestureRecognized:gestureRecognizer];
}

So finally you can drag them at the same time.