Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
645
Display multiple series in XamDataChart
posted

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

Parents
  • 645
    posted

    Hi There,

    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?

    Please let me know.

    Thanks

Reply Children