Binding ScatterPointSeries.XValueBinding to DateTime

[Jinyan]

Hi all,

I am having trouble with trying to bind the x-value for a ScatterPointSeries to DateTime variable. The chart is based on live data, so I know that the data binding in general is working because the Y-axis is adjusting correctly. However, no tick marks are showing up for the X-axis, and thus no scatter points are showing up on the graph. Below is the code snippet for the dynamic data binding.

def = new ScatterPointSeries()
                    {
                        XValueBinding = new PropertyNameDataPointBinding("Time"),
                        YValueBinding = new PropertyNameDataPointBinding("Value")

                    };
...
(def as ScatterPointSeries).PointTemplate = (DataTemplate)System.Windows.Markup.XamlReader.Parse(
                        @"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">
                        <Ellipse Width=""5"" Height=""5"" Fill=""" + BrushColor.ToString() + @""" Opacity=""" + WPConstants.DEFAULT_LINE_FILL_OPACITY + @"""/>
                        </DataTemplate>");

Thanks,
Jin

[Jinyan]

Bump any updates on this?

[Petar Kirov]

Hello Jinyan,

The ScatterPoint series does not support Categorical Axis. You may have read this help topic, but it is incorrect and we will fix it. We're sorry for the troubles it may have caused you.

However what you want to accomplish can be easily done by using LineSeries with a Transparent Stroke, and a custom PointTemplate. Here is an example:

<telerik:RadCartesianChart x:Name="chart">
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:DateTimeContinuousAxis LabelFormat="mmm/yyyy"
                     PlotMode="OnTicksPadded"/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.Series>
        <telerik:LineSeries x:Name="Series1" ValueBinding="Value"
                 CategoryBinding="Time" Stroke="Transparent">
            <telerik:LineSeries.PointTemplate>
                <DataTemplate>
                    <Ellipse Fill="Red" Width="20" Height="20"/>
                </DataTemplate>
            </telerik:LineSeries.PointTemplate>
        </telerik:LineSeries>
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

Feel free to customize it to your needs.

Regards,
Petar Kirov
the Telerik team