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 Stephan,
Thanks for your help and sample. My requirement is changed. I need to plot Point Series instead of Scatter Series for TradeData points.
I need to have DateTime on X-Axis both TickData and FillData or TradeData. User need to see at particular time when there is TradeData what was the PriceData on same time.
Please see my previous post. I was able to plot Financial Price Series (Tick Data) and Point Series (FillData) on same chart. But all the FillData points are plotted in one line vertically. I need to plot each TradeData with TickData on same time.
Please let me me know.
I have modified the sample I sent you before, so now it uses PointSeries.
Hi Stephen,
Thanks for your response. In your example you have same number (30) of TickData points and FillData points and all points are at same time.
We don't have this case. We can have few thousands TickData point (for example, from 12AM to 3PM at every second) and very few FillData points (or may be zero filldata point) at any time.
In your example make following changes,
======================================================================
ObservableCollection<ChartData> _fillDataPoints = ChartData.GenerateData(10); (line 31)
Date = DateTime.Now.AddMinutes(i) (line 139)
Date = DateTime.Now.AddMinutes(i+1) (line 188)
and Line 31 in .xaml ---- <ig:AxisLabelSettings Visibility="Collapsed" /> remove Visiblity
=================================================================
You will see at the same time (for example 1:50:10PM) TickData point and FillData point are not in same line vertically.
I also bounded both CatergoryXAxis from TickData points. I still don't see the result which I want.
(PriceChart.Axes[0] as CategoryXAxis).ItemsSource = _tickDataPoints;(PriceChart.Axes[1] as CategoryXAxis).ItemsSource = _tickDataPoints;
Basically TickData and FillData point at same time should be plotted in same line vertically using same XAxis. TickData points can be very large (in 100s or 1000s) while FillData can be very few. And first TickData point and FillData point can't be on same time and also last points too.
We have similar kind of application in WinForms in which both of these data points are plotted this way using same X-Axis. Please let me know if this is possible here.
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.
Stefen,
Thanks for your help.
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.
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.
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.