Hello,

I'm working on a stacked bar chart for a client project and running into a bit of a snag with the amount of data being displayed in the chart. Below is a summary of the requirements I need to meet:

1. Each series is to contain twenty-four data points, one for each hour of the day (0-23)
2. A total of three separate series are to be rendered as a stacked bar chart
3. The chart shall initially display the seven hours closest to the current time of the user's device for the selected day
4. Horizontal scrolling shall be used to view remaining hours of the selected day

To add some clarity to point (3) above, if the current time is 5 PM, the chart needs to display data for 2 PM, 3 PM, 4 PM, 5 PM, 6 PM, 7 PM, and 8 PM. If the current time is 10 PM it'll display 5 PM, 6 PM, 7 PM, 8 PM, 9 PM, 10 PM and 11 PM.

I've seen this feature referred to as "Autoscrolling" by other UI toolkits for Xamarin Forms. How would I go about implementing this using Telerik UI?

Hi Nicholas,

The Xamarin.Forms Chart control has support for panning and zooming using the PanAndZoomBehavior with PanMode and ZoomMode set to Horizontal. However, these  can only be set by user gestures.

At this time there is no programmatic way to set the precise zoom and pan amount from Xamarin.Forms.


Custom Development Using Native Control Features

You can access the native controls that get rendered on the platforms by our Platform Renderer using a Xamarin.Forms custom renderer, see the article on registering custom renderers.

An alternative approach is to access native controls using a new Xamarin feature called Xamarin.Forms Effects, see Microsoft's documentation on how to use Platform Effect. If you would like to be able to pass a value from the Xamarin.Forms project, you can easily pass parameters to an effect.

With access to the native control, you can manually set each platform's specific usage of the manipulation of the canvas area.

iOS - You can set the XAxis.Pan and XAxis.Zoom values on the axis, see the native TKChartView Pan documentation
UWP - You can use the ChartBase to set ScrollOffset and Zoom
Android - You can use the SetPanOffset and SetZoom methods


Custom Implementation

If you would like to move forward and try the native approach, I can give you a good head start. Please note that the code below is not production ready and will require experimentation and testing in your scenario to get the exact results you want. Additionally, I strongly recommend first reviewing the above Effect articles I linked to above so that you know where to put the following classes.

Okay, let's get started...


Routing Effect

In the XF project, you can have the Routing Effect class defined with 3 parameters. This is because all three platforms have different ways to set the values. However, you could just have one and do the conversion to the native platform type in the platform's Effect.


Important Note: In order for Pan to even work, there must be an initial amount of Zoom applied (otherwise, there is nothing to pan to). In this case, I have added a ZoomLevel property to the effect.

With that defined, you can apply the Effect to the chart instance and set the experiment values:



iOS Platform Effect

Now, in the iOS Platform Effect class, retrieve the values from the Routing Effect and apply them to the native control



Runtime

In my test, I have 10 categories, so there will be 10 X-axis positions. Setting the normalized Pan to 4, the chart loaded at the 5th position on the axis:




UWP Platform Effect

The ChartBase class has a couple helpful properties we can use. Please take a moment to review Zoom and ScrollOffset property descriptions in the Properties documentation, this is critical to understanding what values to use.



Runtime

If you go back to the XAML, you'll see that I set the UWP pan to -1, this will shift the axis exactly one viewport-width over. Since I set the zoom level to 2x, this represents exactly half of the viewable area and should start at exactly halfway.. the "Six" category.



Android Platform Effect

Android has two methods you can use: SetZoom and SetPanOffset




Further Assistance

Due to the complexity of this configuration, if you need additional assistance with the native controls, please open an official support ticket using your Support License so that the development team for that native control can provide additional insight into the native chart's functionality.

I hope I was able to help you get closer to your goal.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

Hello Nicholas,

I have update for you. You can do everything in Xamarin.Forms, the only catch is you'll need to measure the width using the NativeControlLoaded event handler.

Here's the code:




Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik