Chart and sub-chart

[svrz]

Greetings

As you are aware, in financial charting a price\volume chart where the price is the main chart and volume is a sub-chart (displayed below the price chart) is quite common. I have attempted to create this type of a display with two SfChart components. Please see the attached image.

In order to have the vertical grid lines on each chart line up with another, I had to play with the format of the y-axis for each chart. This is not the most elegant way of achieving this task and perhaps it is highly problematic.  So the questions are:

1) What is most effective way of achieving this task?
2) What is the best way of 'syncing' these two charts as far as zooming, panning and scrolling are concerned?
3) I understand this is a difficult question to answer, but in a generic way can you recommend how to approach placing a moving crosshair across the chart (i.e. inherent methods and properties of SfChart)?

Thanks very much in advance.

Attachment: 20180124_232400_rmscr_ac92b05b.zip

[svrz]

If I may ask one more question:

Here is the layout for this small project:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <include
      android:id="@+id/toolbar"
      layout="@layout/toolbar" />
  <LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:id="@+id/main_content"
      android:weightSum="3"
      android:layout_below="@id/toolbar">
    <FrameLayout
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/frameLayout1" />
    <View
         android:layout_width="match_parent"
         android:layout_height="1dp"
         android:layout_marginTop="0dp"
         android:background="#000000"
         android:layout_marginLeft="0dp"
         android:layout_marginRight="0dp" />
    <FrameLayout
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/frameLayout2" />
  </LinearLayout>
</RelativeLayout>

and the relevant code:

priceChart.LayoutParameters = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent);
volumeChart.LayoutParameters = new
                FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent);

FrameLayout fl1 = FindViewById<FrameLayout>(Resource.Id.frameLayout1);
FrameLayout fl2 = FindViewById<FrameLayout>(Resource.Id.frameLayout2);

fl1.AddView(priceChart);
fl2.AddView(volumeChart);

If the height for the 'priceChart' is not explicitly set, it devours the entire screen and eclipses the volume chart.  This can be problematic.

Can you kindly recommend a solution?

Thanks again.

[Divya Venkatesan]

Hi Svrz, 

 

Regarding “What is most effective way of achieving this task?” 

This is an elegant way to plot two different Chart in a single page and make synchronized while zooming and panning. Also, we can hide the X axis of the Chart which is placed at top of the page. 

 

primaryAxis1.Visibility = Visibility.Gone; 

 

 

Regarding “What is the best way of 'syncing' these two charts as far as zooming, panning and scrolling are concerned?”  

We have synced the zooming, panning and scrolling of two charts by setting same ZoomFactor and ZoomPosition in ZoomEnd and Scroll events of SfChart. 

Regarding “I understand this is a difficult question to answer, but in a generic way can you recommend how to approach placing a moving crosshair across the chart (i.e. inherent methods and properties of SfChart)?” 

 

We have achieved the crosshair behavior using HorizontalLineAnnotation and VerticalLineAnnotation in the class extended from ChartTrackballBehavior. 

 

We have prepared sample for this which can be downloaded from the following location. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/135622/ze/ChartSample946484016  

 

Please let us know if you know any further assistance. 

 

Regards, 

Divya Venkatesan 

 

[svrz]

Greetings Divya

I immensely thank you for the detailed response. I will study it in detail and likely implement much of it.

Take care

[Divya Venkatesan]

Hi Svrz,

Thanks for the update.

Please let us know if you need any further assistance.

Regards,
Divya Venkatesan