Custom Technical Indicator - Multiple Y-Axis

[Alexander]

Hello,

I want to realise costum technical indicators. I've read this post  https://www.syncfusion.com/forums/124849/custom-technical-indicator

This works just fine for UWP too, however I have the problem, that the value of my points are very low and my Candle Data is ~factor 50x.

I've looked into the built-in Technical Indicators noticing, that there are two Y-Axis, one on the left for the main chart and one on the right for which is zoomed for the technical indicators.

For Example:     https://imgur.com/a/jjQJRxL

The line on the bottom is my own indicator which is scaled to the left Y-Axis, the MACD is scaled to the right Y-Axis

Is there any possibility to add and assign this second Y-Axis for custom technical indicators that are realized via a second chart?

Greetings

Alexander

[Muneesh Kumar G]

Hi Alexander, 

 

Greetings from Syncfusion. 

 

We have analyzed your requirement and you can achieve this by initializing common axis in Resources and set this to custom technical indicator and default technical indicator as per the below code snippet.   

 

Code snippet 

<Grid> 

        <Grid.DataContext> 

            <local:TestingValuesCollection /> 

        </Grid.DataContext> 

 

        <Grid.Resources> 

            <chart:NumericalAxis x:Key="yAxis" OpposedPosition="True"/> 

        </Grid.Resources> 

 

        <chart:SfChart x:Name="FastHiloOpenClose" 

                       AreaBorderThickness="0,1,1,1" 

                       AreaBorderBrush="DarkGray" 

                       HorizontalAlignment="Center" 

                       Margin="10"> 

 

.. 

            <chart:SfChart.PrimaryAxis> 

                <chart:DateTimeCategoryAxis LabelFormat="dd/MMM" x:Name="axis1"  

                                    Header="Product ID"> 

                </chart:DateTimeCategoryAxis> 

            </chart:SfChart.PrimaryAxis> 

 

            <chart:SfChart.SecondaryAxis> 

                <chart:NumericalAxis RangePadding="Round" 

                                     Header="Price in USD" 

                                     Interval="10" 

                                     Minimum="0" 

                                     Maximum="70"/> 

            </chart:SfChart.SecondaryAxis> 

 

            <chart:FastCandleBitmapSeries ItemsSource="{Binding ChartData}" 

                                                 XBindingPath="X" 

                                                 High="High" 

                                                 Low="Low" 

                                                 Open="Open" 

                                                 Close="Close" 

                                                 BullFillColor="Green" 

                                                 BearFillColor="Red" /> 

            <!--Customerize the indicator by setting the user defined formula calculation value to the FastLine series ItemsSource--> 

            <chart:FastLineSeries ItemsSource="{Binding IndicatorValues}" 

                                  XBindingPath="XValue" 

                                  YBindingPath="YValue" 

                                  Interior="Blue"  

                                  YAxis="{StaticResource yAxis}"/> 

 

            <chart:SfChart.TechnicalIndicators> 

                <chart:MACDTechnicalIndicator XBindingPath="X" 

                                                 High="High" 

                                                 Low="Low" 

                                                 Open="Open" 

                                                 Close="Close"  

                                              ItemsSource="{Binding ChartData}" 

                                              YAxis="{StaticResource yAxis}"> 

                  

                </chart:MACDTechnicalIndicator> 

            </chart:SfChart.TechnicalIndicators> 

        </chart:SfChart> 

    </Grid> 

 

We have prepared a sample based on this, please find the sample from the following location.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/143341/ze/CustomIndicator-309953433 

 

Screenshot: 

 

 

Hope it helps you.  

 

Thanks, 

Muneesh Kumar G. 

[Alexander]

Hello,

thanks for your answer, but it does not seem to work, my app breaks (Debugger break) when loading my Data Points. I'm using the following XAML:

<Grid>        <Grid.ColumnDefinitions>            <ColumnDefinition Width="200"/>            <ColumnDefinition Width="*"/>        </Grid.ColumnDefinitions>        <Grid.RowDefinitions>            <RowDefinition Height="250"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <Grid.Resources>            <sfchart:NumericalAxis x:Key="indicatorAxis" Header="Technical Indicator" OpposedPosition="True"/>        </Grid.Resources>
       <!--Some other XAML Elements here-->            <!--ComputedChart-->        <sfchart:SfChart Grid.Column="1" Grid.Row="1" x:Name="CandleChart">             <sfchart:SfChart.PrimaryAxis>                <sfchart:DateTimeAxis LabelFormat="dd/MM/YYYY" ShowTrackBallInfo="True"/>            </sfchart:SfChart.PrimaryAxis>            <sfchart:SfChart.SecondaryAxis>                <sfchart:NumericalAxis RangePadding="Round" Header="{Binding Metadata.Pair}"/>            </sfchart:SfChart.SecondaryAxis>            <sfchart:SfChart.Behaviors>                <sfchart:ChartZoomPanBehavior EnableMouseWheelZooming="True" EnablePinchZooming="True" ZoomRelativeToCursor="True" ZoomMode="X"/>            </sfchart:SfChart.Behaviors>                        <!--Charts-->            <sfchart:FastCandleBitmapSeries Foreground="{StaticResource ForegroundColor}" ItemsSource="{Binding Candles}" BearFillColor="Red"                     BullFillColor="Green" XBindingPath="Date" Open="Open" High="High" Low="Low" Close="Close"/>
            <sfchart:FastLineSeries x:Name="Line1Chart" YAxis="{StaticResource indicatorAxis}" Interior="Green" ItemsSource="{Binding Line1Points}"                     XBindingPath="Date" YBindingPath="Value"/>            <sfchart:FastLineSeries x:Name="Line2Chart" YAxis="{StaticResource indicatorAxis}" Interior="Yellow" ItemsSource="{Binding Line2Points}"                     XBindingPath="Date" YBindingPath="Value"/>
            <sfchart:SfChart.TechnicalIndicators>                <sfchart:MACDTechnicalIndicator x:Name="TIChart" Type="Line" YAxis="{StaticResource indicatorAxis}" ShortPeriod="12" Period="9" LongPeriod="26"                     XBindingPath="Date" Volume="Volume" SignalLineColor="Yellow" ConvergenceLineColor="Red" DivergenceLineColor="Blue"

                    ItemsSource="{Binding Candles}" High="High" Low="Low" Open="Open" Close="Close"/>            </sfchart:SfChart.TechnicalIndicators>        </sfchart:SfChart>    </Grid>

Any advise on what I'm missing?

[Muneesh Kumar G]

Hi Alexander, 

 

Thanks for your update, we have prepared a sample to replicate the issue based on the provided code snippet, but we are afraid, that we are not able to reproduce the issue at our end. The sample we tried can be downloaded from the below location. 

  

Sample: http://www.syncfusion.com/downloads/support/forum/143341/ze/CustomIndicator-569654406 

 

Screenshot: 

 

  

Since we are not aware of your exact application scenario we were not able to reproduce this at our end, can you please revert us by modifying the sample based on your application along with replication procedure and please mention our product version used in your application. This will be helpful for us to provide you better solution at the earliest.   

 

Thanks,  

Muneesh Kumar G. 

 

[Alexander]

Hello,

thanks for your help so far.

I've created a sample of my code and reduced the complexity to a minimum. Still I get the described error.

You can find the Sample in the attachment.

When removing the line YAxis = {StaticResource indicatorAxis} from the xaml, the app runs normal. But when added, the app crashes.

/edit: I'm using the most current nuget version: 16.4.0.54

Greetings

Alexander

Attachment: SfChartIndicatorAxisSample_9466da3f.7z

[Muneesh Kumar G]

Hi Alexander,  

 

Sorry for the inconvenience caused. We were able to reproduce the reported problem at our end. You can resolve this problem by initializing YAxis directly to the required series and reuse the axis by using ElementName binding as per the below code snippet.  

 

Code snippet 

   <sfchart:SfChart  x:Name="CandleChart" Margin="10,0,10,10" > 

                <sfchart:SfChart.PrimaryAxis> 

                    <sfchart:DateTimeAxis ShowTrackBallInfo="True" LabelsIntersectAction="Auto" LabelFormat="dd/MM/yyyy - hh:mm"/> 

                </sfchart:SfChart.PrimaryAxis> 

                <sfchart:SfChart.SecondaryAxis> 

                    <sfchart:NumericalAxis RangePadding="Round"/> 

                </sfchart:SfChart.SecondaryAxis> 

.. 

 

                <!--Charts--> 

                <sfchart:FastCandleBitmapSeries Foreground="{StaticResource ForegroundColor}" ItemsSource="{Binding Candles}" 

                                                BearFillColor="Red" BullFillColor="Green" XBindingPath="Date"  

                                                Open="Open" High="High" Low="Low" Close="Close"> 

                    <sfchart:FastCandleBitmapSeries.YAxis> 

                        <sfchart:NumericalAxis x:Name="indicatorAxis" OpposedPosition="True" Header="Test"/> 

                    </sfchart:FastCandleBitmapSeries.YAxis> 

                </sfchart:FastCandleBitmapSeries> 

                <sfchart:FastLineSeries x:Name="Line1Chart" Interior="Green" 

                                        ItemsSource="{Binding Line1Points}" XBindingPath="Date" YBindingPath="Value"> 

                   

                </sfchart:FastLineSeries> 

 

                <sfchart:SfChart.TechnicalIndicators> 

                    <sfchart:BollingerBandIndicator      ItemsSource="{Binding Candles}" 

                                                 XBindingPath="Date"  

                                                YAxis="{Binding ElementName=indicatorAxis}" 

                                                Open="Open" High="High" Low="Low" Close="Close"/> 

                </sfchart:SfChart.TechnicalIndicators> 

 

            </sfchart:SfChart> 

 

 

Screenshot: 

 

 

Please let us know if you have any queries.  

 

Thanks,  

Muneesh Kumar G.  

 

[Alexander]

Hello,

thank you a lot, this worked!

Greetings

Alexander

[Muneesh Kumar G]

Hi Alexander,   

 

Thanks for the update. 

  

We are glad to know that the given solution works. Please let us know if you need any further assistance. 

 

Thanks,  

Muneesh Kumar G.