Monotouch Example of Impress Chart


#1

Are there any monotouch examples that are similar to the impress chart on ShinobiPlay? I want to have an upper chart that reflects the range that is viewed in the range selector below it. I cannot find any documentation on how to go about this. Also the overlays that appear with instruction on how to use the chart when the chart is first viewed are very helpful. Is there an easy way to add these overlays to our app or is it just a custom view with a low alpha background?

Thanks!

Brandon


#2

Hi Brandon,

I’m afraid we don’t currently have any monotouch examples which are similar to the Impress chart.  I’ll give you an overview of how we did the Impress chart, and hopefully that’ll give you a bit of headstart on your project.  I’ll put some code snippets in the explanation - they’ll be in Objective-C rather than C#, but hopefully they’ll be enough to give you the idea.

As you have probably guessed, the Impress example contains two charts - the main one at the top showing the currently selected range, and the range chart at the bottom.  On the range chart, we’ve added a set of chart annotations to show the currently selected range.  There are the two grey translucent bands to the left and right of the selected range, two line annotations at the edge of the selected range, and two custom handle annotations which the user can drag.

The view controller for the example is a delegate of the main chart.  When the sChartIsPanning:withChartMovementInformation or the sChartIsZooming:withChartMovementInformation delegate methods are called, the view controller updates the annotations on the range chart to show the current range being displayed in the main chart.

The main chart listens for when the range annotations on the bottom chart change.  To do this, we define a delegate protocol, with the method:

- (void)rangeAnnotationMovedToStartX:(NSDate*)startX EndX:(NSDate*)endX

When this delegate method is called on the main chart, it updates its x axis and redraws the chart: 

[mainChart.xAxis setRangeWithMinimum:startX andMaximum:endX];
[mainChart redrawChartAndGL:NO];

The second topic you raised is the overlays which we add onto our examples in ShinobiPlay. As you guessed, we do these by adding custom views with a low alpha. In iOS-world, we handled fading the overlays in and out using animation blocks - I’m not sure how you would do this in Monotouch.

I hope that helps!

Dan


#3

Ok thanks for the help, I know objective-c well enough to convert it to c# so your examples were helpful. Thanks again!