Hi There,
I want to display TickData(FinancialPriceSeries) and FillData(ScatterSeries) on same DataChart. X-Axis has timestamp and Y-Axis has price value. Here is the part of code
public class TickDataPoint {.........................
public int Index { get { return _index; } set { if (_index == value) return; _index = value; OnPropertyChanged("Index"); } } public double Open { get { return _open; } set { if (_open == value) return; _open = value; OnPropertyChanged("Open"); } } public double High { get { return _high; } set { if (_high == value) return; _high = value; OnPropertyChanged("High"); } } public double Low { get { return _low; } set { if (_low == value) return; _low = value; OnPropertyChanged("Low"); } } public double Close { get { return _close; } set { if (_close == value) return; _close = value; OnPropertyChanged("Close"); } } public double Volume { get { return _volume; } set { if (_volume == value) return; _volume = value; OnPropertyChanged("Volume"); } } public DateTime Date { get { return _date; } set { if (_date == value) return; _date = value; OnPropertyChanged("Date"); } } ................................................... }
=========
public class FillDataPoint : ObservableModel{ ............................ public double FillPrice { get { return _fillPrice; } set { if (_fillPrice == value) return; _fillPrice = value; OnPropertyChanged("FillPrice"); }} public DateTime Date{get { return _date; }set { if (_date == value) return; _date = value; OnPropertyChanged("Date"); }} public string Side{get { return _side; }set { if (_side == value) return; _side = value; OnPropertyChanged("Side"); }} ......................}
public class DataCollection
{
ObservableCollection<TickDataPoint> _tickDataPoints = GetTickData(); ObservableCollection<FillDataPoint> _fillDataPoints = GetTradeData();
}
========================
<ig:XamDataChart x:Name="PriceChart" Legend="{Binding ElementName=PriceLegend}" Margin="5" VerticalZoomable="True" HorizontalZoomable="True" Grid.Row="1" > <ig:SyncManager.SyncSettings> <ig:SyncSettings SyncChannel="syncDynamicCharts" SynchronizeHorizontally="True" SynchronizeVertically="False" /> </ig:SyncManager.SyncSettings> <ig:XamDataChart.Axes> <ig:CategoryXAxis x:Name="DateXAxis" Label="{}{Date:HH:mm:ss}"> <ig:CategoryXAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideBottom" Extent="30" Visibility="Collapsed" /> </ig:CategoryXAxis.LabelSettings> </ig:CategoryXAxis> <ig:NumericYAxis x:Name="PriceYAxis" > <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideLeft" Extent="55" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:FinancialPriceSeries x:Name="TickDataSeries" Title="Stock Price" DisplayType="Candlestick" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" XAxis="{Binding ElementName=DateXAxis}" YAxis="{Binding ElementName=PriceYAxis}"> </ig:FinancialPriceSeries> <ig:ScatterSeries x:Name="FillDataSeries" MarkerType="Circle" XMemberPath="Date" YMemberPath="FillPrice" XAxis="{Binding ElementName=DateXAxis}" YAxis="{Binding ElementName=PriceYAxis}"> </ig:ScatterSeries> </ig:XamDataChart.Series> </ig:XamDataChart>
=====================================================
I tried
TickDataSeries.DataContext = _dataCollection.TickDataPoints;FillDataSeries.DataContext = _dataCollection.FillDataPoints;
And
TickDataSeries.ItemSource = _oneTickDataModel.TickDataPoints;FillDataSeries.ItemSource = _oneTickDataModel.FillDataPoints;
===========
How can I bind two different Observable collection to these two different series of same chart?
Please let me know.
Thanking you in advance for your help.
Nasir
I am still waiting if anyone knows how to draw Financial Series (TickData) and Point Series (FillData) on same data chart. Both series are bound to different data source.
I made some changes in the code and was able to plot the FillData points with Tickdata points. But all the filldata points are drawing in one line.
===============================================
<ig:XamDataChart x:Name="PriceChart" Legend="{Binding ElementName=PriceLegend}" Margin="5" VerticalZoomable="True" HorizontalZoomable="True" Grid.Row="1" > <ig:SyncManager.SyncSettings> <ig:SyncSettings SyncChannel="syncDynamicCharts" SynchronizeHorizontally="True" SynchronizeVertically="False" /> </ig:SyncManager.SyncSettings> <ig:XamDataChart.Axes> <ig:CategoryXAxis x:Name="DateXAxis" Label="{}{Date:HH:mm:ss}"> <ig:CategoryXAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideBottom" Extent="30" /> </ig:CategoryXAxis.LabelSettings> </ig:CategoryXAxis> <ig:NumericYAxis x:Name="PriceYAxis" > <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideLeft" Extent="55" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:FinancialPriceSeries x:Name="TickDataSeries" Title="Stock Price" DisplayType="Candlestick" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" XAxis="{Binding ElementName=DateXAxis}" YAxis="{Binding ElementName=PriceYAxis}"> </ig:FinancialPriceSeries> <ig:PointSeries x:Name="FillDataSeries" ValueMemberPath="FillPrice" XAxis="{Binding ElementName=DateXAxis}" YAxis="{Binding ElementName=PriceYAxis}"> </ig:PointSeries> </ig:XamDataChart.Series> </ig:XamDataChart>
===================================
DateXAxis.ItemsSource = _oneTickDataModel.TickDataPoints;TickDataSeries.ItemsSource = _oneTickDataModel.TickDataPoints;FillDataSeries.ItemsSource = _oneTickDataModel.FillDataPoints;
=========================================
Can anyone check what is wrong here?
Is there any other way to draw these data on DataChart?
Thanks
Hello Nasir,
Thank you for your post. I have been looking into and I created a sample project for you with the functionality you want. Also I can say that for the ScatterLineSeries yo uneed two numeric Axes.
Hope this helps you.
Hi Stefan,
Thanks for your help. I can see expected result in the sample.
But in my application when I tried to use CategoryDateTimeXAxis instead of CategoryXAxis it is taking very long (or application hung) to plot the points. I have more than 30,000 TickDataPoint and around 200 FillDataPoint.
And if I change back to CategoryXAxis it works fine but Datapoints aren't aligned as before.
You can change your previous sample to generate more than 30,00 TickData points and 200 FillData Points and check the result.
Let me know what can be the issue here.
Hello Nasir
To achieve the functionality you want, you have to use CategiryDateTimeXAxis, because the spaces between data points, based on the amount of time span between them, are important and since CategiryDateTimeXAxis perform sorts on the data it is expected the it takes more time to load than the CategoryXAxis. Also I can say that both Axis should have the same Minimum and Maximum Values equal to the Minimum and Maximum Date of the TickDataPoint collection.
Hi Stefen,
Thanks for your help. I got the point. I will do work around to reduce the time.
I have other question related to same application.
How can I change/format the color for FinancialSeries. I want Candle Stick to be red or blue. I also want to change the color of point in PointSeries based on value.
Please let me know and if its possible give me sample code.
I have modified the sample, so now it has the functionality you want. Basically I set FinancialPriceSeries' NegativeBrush in order to make the Series Red. Also I create a MarkerTempalte for the PointSeries and used a Converter to set the color based on the value.
Stefen,
Thanks for your help.
Thank you for your feedback. I am glad that you resolved your issue and I believe that other community members may benefit from this as well.
Thanks again.