Updating RadChart.DefaultView using data binding from view model

[Colm]

Hi,
I'm trying to write a test MVVM app based on your library. When my model fetches data, the view model presents this using data binding to the view. I want at this point to be able to update the axes settings and ranges based on the current data, as my X-axis is currently showing the datetime values overlapping (note, this is dependent on source xml, so I'm not guaranteed the x-axis will be a datetime. I need to update each time the user runs a query dynamically)

I can do everything I need by creating a chartArea item and updating the view, at least in theory. Currently, I'm having an issue binding to the defaultView property, as I'm guessing it isn't exposed as a framework element.

Here's my code, simplified to show the issue:

XAML:

<telerikChart:RadChart x:Name="RadChart"
                           ItemsSource="{Binding Path=SourceData, Mode=TwoWay}"
                           SeriesMappings="{Binding Path=SeriesMappings}"
                           DefaultView="{Binding Path=DefaultView}"
                           Margin="0,163,0,0">
        </telerikChart:RadChart>

View Model:

private ChartDefaultView m_defaultView;
public ChartDefaultView DefaultView
{
    get {return m_defaultView;}
    set
    {
        m_defaultView = value;
        RaisePropertyChanged("DefaultView");
    }
}

//CTor
public RadChartViewModel()
{
    ChartDataModel = new ChartDataModel();

    //Set datetime axis
    AxisX xAxis = new AxisX();
    xAxis.IsDateTime = true;
    //Turn on zooming
    ZoomScrollSettings zoomSettings = new ZoomScrollSettings();
    zoomSettings.MinZoomRange = 0.1;
    zoomSettings.RangeEnd = 0.3;
    zoomSettings.RangeStart = 0.2;
    zoomSettings.ScrollMode = ScrollMode.ScrollAndZoom;

    ChartArea currentChartArea = new ChartArea();
    currentChartArea.AxisX = xAxis;
    currentChartArea.ZoomScrollSettingsX = zoomSettings;

    ChartDefaultView chartDefaultV = new ChartDefaultView();
    chartDefaultV.ChartArea = currentChartArea;
    DefaultView = chartDefaultV;

    //Create series
    SeriesMappings = createSeriesMapping();
}

I get the following error at runtime:

{System.Windows.Markup.XamlParseException: Set property 'Telerik.Windows.Controls.RadChart.DefaultView' threw an exception. [Line: 23 Position: 40] ---> System.ArgumentException: Object of type 'System.Windows.Data.Binding' cannot be converted to type 'Telerik.Windows.Controls.Charting.ChartDefaultView'.
   at System.RuntimeType.TryChangeType(Object value, Binder binder, CultureInfo culture, Boolean needsSpecialCast)
   at System.RuntimeType.CheckValue(Object value, Binder binder, CultureInfo culture, BindingFlags invokeAttr)
   at System.Reflection.MethodBase.CheckArguments(Object[] parameters, Binder binder, BindingFlags invokeAttr, CultureInfo culture, Signature sig)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture, Boolean skipVisibilityChecks)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
   at System.Reflection.RuntimePropertyInfo.SetValue(Object obj, Object value, BindingFlags invokeAttr, Binder binder, Object[] index, CultureInfo culture)
   at System.Reflection.RuntimePropertyInfo.SetValue(Object obj, Object value, Object[] index)
   at MS.Internal.XamlMemberInfo.SetValue(Object target, Object value)
   at MS.Internal.XamlManagedRuntimeRPInvokes.SetValue(XamlTypeToken inType, XamlQualifiedObject& inObj, XamlPropertyToken inProperty, XamlQualifiedObject& inValue)
   --- End of inner exception stack trace ---
   at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
   at InfragisticsEval.Silverlight.Views.RadChartView.InitializeComponent()
   at InfragisticsEval.Silverlight.Views.RadChartView..ctor()}

Can you suggest a way of achieving what I need?

Thanks in advance,
Colm

[Giuseppe]

Hello Colm,

Indeed you are right -- the RadChart.DefaultView property is not a dependency property so you will not be possible to set it via binding expression. However, you can achieve the desired functionality by binding the respective properties of the AxisX object directly:

<telerik:RadChart x:Name="RadChart1" ItemsSource="{Binding Data}">
    <telerik:RadChart.DefaultView>
        <telerik:ChartDefaultView>
            <telerik:ChartDefaultView.ChartArea>
                <telerik:ChartArea>
                    <telerik:ChartArea.AxisX>
                        <telerik:AxisX AutoRange="{Binding AxisXAutoRange}"
                                        IsDateTime="{Binding AxisXIsDateTime}"
                                        MinValue="{Binding AxisXMinValue}"
                                        MaxValue="{Binding AxisXMaxValue}"
                                        Step="{Binding AxisXMaxStep}"
                                        LayoutMode="Inside"
                                        StepLabelLevelCount="2" />
                    </telerik:ChartArea.AxisX>
                </telerik:ChartArea>
            </telerik:ChartDefaultView.ChartArea>
        </telerik:ChartDefaultView>
    </telerik:RadChart.DefaultView>
    <telerik:RadChart.SeriesMappings>
        <telerik:SeriesMapping>
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:LineSeriesDefinition />
            </telerik:SeriesMapping.SeriesDefinition>
            <telerik:ItemMapping FieldName="{Binding SeriesMappingX.DataField}" DataPointMember="{Binding SeriesMappingX.DataPointMember}" />
            <telerik:ItemMapping FieldName="{Binding SeriesMappingY.DataField}" DataPointMember="{Binding SeriesMappingY.DataPointMember}" />
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>
</telerik:RadChart>

We have attached a sample application to get you started as well.


Greetings,
Freddie
the Telerik team

[Colm]

Hi,
That's a neat solution. However, what if I wanted to define multiple Y axis? I can't bind to the additionalYAxis property for the same reasons I'm guessing.

I've instead gone with the approach of disabling the default view, then binding to the content property. In my view model, I am then defining the chart view to be shown to the user. It's not the neatest, but it does the job.

[Giuseppe]

Hi Colm,

Generally it is possible to bind the ChartArea.AdditionalYAxes property -- find a modified version of the sample application that demonstrates this in action.

Hope this helps.


Regards,
Freddie
the Telerik team

[Colm]

Hi,
I had tried this but had no success. Thanks for the example project. I'll compare against my own version and see where I went wrong.

Thanks,
Colm