SfChart with DateTimeCategoryAxis as primary axis and multiple series - X value binding problems

[Ondrej Slimak]

Hello,

I am trying to create a chart of price data of an asset; basically, it is a collection of pairs Date and Price. There are no data for weekends, holidays, etc. so I used a DateTimeCategory axis as my primary axis (and numerical as secondary axis). The chart is plotted as LineSeries and it works well, the chart is good.

However, now I need to add special symbols for points in a chart where an order occurred (buy or sell of the asset). For this, I receive another collection of data - Orders. These have the matching Date and Price of an item in the chart, and each contains a number of orders on a given day and a flag if it was a Buy or Sell (need a different symbol for Buy and for Sell).

I wanted to plot the orders as another series - ScatterSeries​. However, the order items XBindings do not respect the correct X positions, and they are plotted from the beginning of the X-axis.

Question: How can I plot the ScatterSeries chart points on correct X-axis positions in my chart? Or is not possible to make such a combination and I have should use a different approach?


Here is a simplified version of my chart:

<sfc:SfChart>

  <sfc:SfChart.PrimaryAxis>
    <charts:DateTimeCategoryAxisExt />
  </sfc:SfChart.PrimaryAxis>

  <sfc:SfChart.SecondaryAxis>
    <sfc:NumericalAxis />
  </sfc:SfChart.SecondaryAxis>

  <sfc:SfChart.Series>
    <sfc:FastLineSeries ItemsSource="{Binding PriceData}"
                        XBindingPath="Date"
                        YBindingPath="Price" />

    <sfc:FastScatterSeries ItemsSource="{Binding Orders}"
                           XBindingPath="OrderDate"
                           YBindingPath="OrderPrice" />
  </sfc:SfChart.Series>
</sfc:SfChart>

[Yuvaraj Palanisamy]

Hi Ondrej Slimak, 

 

We have analyzed your query and achieved your requirement “positioning the scatter series symbol at the correct datapoint” by using the DataMarker and DataMarkerLabelCreated event of the series as per the below code example 

 

CodeSnippet: [MainPage.xaml] 

<chart:LineSeries ItemsSource ="{Binding PriceData}"  

                  XBindingPath="Date"  

                  YBindingPath="Price"  

                  DataMarkerLabelCreated="LineSeries_DataMarkerLabelCreated"> 

    <chart:LineSeries.DataMarker> 

        <chart:ChartDataMarker ShowLabel="False"  

                               ShowMarker="True" 

                               MarkerHeight="10" 

                               MarkerWidth="10" 

                               MarkerBorderWidth="0"/> 

    </chart:LineSeries.DataMarker> 

</chart:LineSeries> 

 

[MainPage.xaml.cs] 

private void LineSeries_DataMarkerLabelCreated(object sender, ChartDataMarkerLabelCreatedEventArgs e) 

{ 

    var datapoint = e.DataMarkerLabel.Data as ChartModel; 

    if(datapoint.IsUpdate) 

    { 

        e.DataMarkerLabel.MarkerType = datapoint.IsBuy? DataMarkerType.Plus: DataMarkerType.Triangle; 

        e.DataMarkerLabel.MarkerColor = datapoint.IsBuy ? Color.Green: Color.Red; 

    } 

    else 

    { 

        e.DataMarkerLabel.MarkerWidth = 0; 

        e.DataMarkerLabel.MarkerHeight = 0; 

    } 

} 

 

 

 

Also, we have attached the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/172871/ze/SfChart_DataMarker-181598048  

 

Output: 

 

 

For more details, please refer the below link 

https://help.syncfusion.com/xamarin/charts/datamarker  

 

Regards, 

Yuvaraj. 

[Ondrej Slimak]

I think I got some more insight and that I can explain my problem a bit clearer...

I suppose the DateTimeCategoryAxis just plots the series' items chronologically, one by one. So, let's say I have a Price for Monday, Tuesday, ..., Friday, and Orders for Tuesday and Friday.

The DateTimeCategoryAxis plots a line connecting the Price series of 5 points in a chronological fashion (Mon-Fri). Afterwards, it takes the Orders series and, again, plots those 2 points at 1st and 2nd position in the plot (Monday and Tuesday); however, these orders were expected to be plotted on Tuesday and Friday in the chart.

Question: Can I achieve the correct positioning for the Orders in the chart with this setup, or do I need additional logic/conversion/matching for the order positioning?

[Ondrej Slimak]

Thank you for your reply.

My issue is that I have two separate series, LineSeries for Price, ScatterSeries for Orders. The OrdersSeries a date matching specific item in the Price series, so I hoped the chart would plot the Order markers on the correct X position. 

However, the Order markers are plotted from the left to right:

The Order markers (the green circles), are supposed to be in different locations. The first from the left has a Date Feb-12, the second marker should be on Feb-14 (their Y location is correct). I have tried to explain this in the second post (http://www.syncfusion.com/forums/172871/sfchart-with-datetimecategoryaxis-as-primary-axis-and-multiple-series-x-value-binding?reply=S2PeKX)

[Yuvaraj Palanisamy]

Hi Ondrej Slimak, 

 

We have analyzed your query and we would like to let you know that the DateTimeCategoryAxis is an Index based axis. Hence, the scatter series(Orders series) rendered based on the index value. To resolve this issue by adding empty datapoints in the Orders Collection for remaining indexes as per the code example below.  

 

CodeSnippet: 

<chart:ScatterSeries ItemsSource ="{Binding Orders}"  

                     Color="Green" 

                     ScatterWidth ="20" 

                     ScatterHeight="20"  

                     XBindingPath="Date"  

                     YBindingPath="Price"  

                     DataMarkerLabelCreated="ScatterSeries_DataMarkerLabelCreated"> 

    <chart:ScatterSeries.DataMarker> 

        <chart:ChartDataMarker ShowLabel="False"  

                               ShowMarker="True" 

                               MarkerHeight="10" 

                               MarkerWidth="10" 

                               MarkerType="Plus" 

                               MarkerColor="White" 

                               MarkerBorderWidth="0"/> 

    </chart:ScatterSeries.DataMarker> 

</chart:ScatterSeries> 

 

MainPage.xaml.cs 

private void ScatterSeries_DataMarkerLabelCreated(object sender, ChartDataMarkerLabelCreatedEventArgs e) 

{ 

    var datapoint = e.DataMarkerLabel.Data as ChartModel; 

    if(datapoint.Price != double.NaN && datapoint.IsSold) 

    { 

        e.DataMarkerLabel.MarkerType = DataMarkerType.Triangle; 

    }             

} 

 

ViewModel.cs 

Orders  = new ObservableCollection<ChartModel>() 

{ 

    new ChartModel(){Date=dateTime, Price=double.NaN }, 

    new ChartModel(){Date=dateTime.AddDays(1), Price=34, IsBuy = true }, 

    new ChartModel(){Date=dateTime.AddDays(2), Price=double.NaN }, 

    new ChartModel(){Date=dateTime.AddDays(3), Price=32, IsBuy = true  }, 

    new ChartModel(){Date=dateTime.AddDays(6), Price=double.NaN }, 

    new ChartModel(){Date=dateTime.AddDays(7), Price=double.NaN }, 

    new ChartModel(){Date=dateTime.AddDays(8), Price=double.NaN }, 

    new ChartModel(){Date=dateTime.AddDays(9), Price=double.NaN }, 

    new ChartModel(){Date=dateTime.AddDays(10), Price=double.NaN } 

}; 

 

 

Also, we have attached the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/172871/ze/SfChart-DateTimeCategory-691649856  

  

Output: 

 

 

Please let us know if you have any further assistance. 

 

Regards, 

Yuvaraj.