Metro XAML charts and binding

5 posts, 1 answers
  1. Igor
    Igor avatar
    3 posts
    Member since:
    Dec 2011

    Posted 27 Jun 2012 Link to this post

    I am building an app that uses Windows 8 Metro XAML preview controls. I have downloaded and examined the sample app, but it mostly uses code-behind to define all the stuff necessary for the charts. I am trying to accomplish something similar with bindings, and the charts remain empty. Actually, they get the data, but plot nothing (for example, I can see the borderline of the RadPieChart and all zeroes for RadCartesianChart). Here is the code for RadPieChart:

    <telerik:RadPieChart>
        <telerik:PieSeries ItemsSource="{Binding AssetsData}" />
    </telerik:RadPieChart>

    And AssetsData is defined like this:

    private ElementCollection<PieDataPoint> assetsData;

    public ElementCollection<PieDataPoint> AssetsData
        {
            get
            {
                return assetsData;
            }
            set
            {
                assetsData = value;
                Notify("AssetsData");
            }
        }

    Filled with data, like this:
    PieSeries series = new PieSeries();
    series.RadiusFactor = 0.9;
      
    foreach (var entry in dataSource)
    {
        series.DataPoints.Add(new PieDataPoint() { Value = entry.Percentage, Label = entry.Title });
    }
      
    assetsData = series.DataPoints;

    Everything works fine when I use code-behind (C#) like in the sample app. I define the series, add the datapoints to series and add that series to chart control. When using the same data and trying to bind like this, it doesn't work.

    What am I doing wrong here?
    I checked if the values in the collection are set properly, and they are (since I'm using the same logic as when I use code-behind, there shouldn't be any difference really, and there isn't).

    Also, is there a way to set RadCartesianChart to scale it's minimum and maximum according to the data that's being drawn?
  2. Answer
    Tsvyatko
    Admin
    Tsvyatko avatar
    832 posts

    Posted 29 Jun 2012 Link to this post

    Hi Igor,

     you can setup the RadPieChart using series ItemsSource and property bindings (custom bindings for charts) The XAML setup can like that (similar setup is available for code-behind as well):

    <telerik:RadPieChart Palette="{Binding DefaultPalette}">
               <telerik:PieSeries ItemsSource="{Binding Data}" RadiusFactor="0.7">
                   <telerik:PieSeries.ValueBinding>
                       <telerik:PropertyNameDataPointBinding PropertyName="Amount"></telerik:PropertyNameDataPointBinding>
                   </telerik:PieSeries.ValueBinding>
                   <telerik:PieSeries.LabelDefinitions>
                       <telerik:ChartSeriesLabelDefinition Margin="-7">
                           <telerik:ChartSeriesLabelDefinition.Binding>
                               <telerik:PropertyNameDataPointBinding PropertyName="Title"></telerik:PropertyNameDataPointBinding>
                           </telerik:ChartSeriesLabelDefinition.Binding>
                       </telerik:ChartSeriesLabelDefinition>
                   </telerik:PieSeries.LabelDefinitions>
               </telerik:PieSeries>
           </telerik:RadPieChart>

    Regarding the Cartesian Chart min/max - you can control it though the axis minimum maximum value. If not set they will automatically build their values according the data suplied.
    <telerik:RadCartesianChart.VerticalAxis>
                 <telerik:LinearAxis Minimum="2" Maximum="15"/>
    </telerik:RadCartesianChart.VerticalAxis>

    I have also attached sample project demonstrating the two setups. 

    If you have any other questions do not hesitate to contact us. Kind regards,
    Tsvyatko
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. Igor
    Igor avatar
    3 posts
    Member since:
    Dec 2011

    Posted 29 Jun 2012 Link to this post

    Thank you! This has been extremely helpful. Now it finally works! :)
  4. Wade
    Wade avatar
    22 posts
    Member since:
    Dec 2012

    Posted 20 Feb 2013 Link to this post

    I'm trying to use this example to display the data label along with the value in the pie slice.

    <telerik:PieSeries.LabelDefinitions>
    <telerik:ChartSeriesLabelDefinition>
    <telerik:ChartSeriesLabelDefinition.Binding>
    <telerik:PropertyNameDataPointBinding PropertyName="Label" />
    <
    /telerik:ChartSeriesLabelDefinition.Binding>
    </telerik:ChartSeriesLabelDefinition>
    </telerik:PieSeries.LabelDefinitions>
    But when I try to compile my solution, I get the following:

    System.ArgumentException was unhandled
      HResult=-2147024809
      Message=ChartSeriesLabelDefinition.Binding is valid when owning series is data-bound.
      Source=Telerik.Windows.Controls.Chart
      StackTrace:
           at Telerik.Windows.Controls.ChartView.ChartSeries.GetLabelContent(ChartSeriesLabelUpdateContext context) in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\Common\ChartSeries.cs:line 454
           at Telerik.Windows.Controls.ChartView.ChartSeries.GetLabelVisual(ChartSeriesLabelUpdateContext context) in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\Common\ChartSeries.cs:line 692
           at Telerik.Windows.Controls.ChartView.ChartSeries.ProcessLabelDefinition(ChartSeriesLabelUpdateContext context) in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\Common\ChartSeries.cs:line 788
           at Telerik.Windows.Controls.ChartView.ChartSeries.ProcessDataPointLabels(ChartSeriesLabelUpdateContext context) in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\Common\ChartSeries.cs:line 755
           at Telerik.Windows.Controls.ChartView.ChartSeries.UpdateLabels(ChartLayoutContext context) in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\Common\ChartSeries.cs:line 729
           at Telerik.Windows.Controls.ChartView.ChartSeries.UpdateUICore(ChartLayoutContext context) in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\Common\ChartSeries.cs:line 361
           at Telerik.Windows.Controls.ChartView.PieSeries.UpdateUICore(ChartLayoutContext context) in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\PieChart\PieSeries.cs:line 369
           at Telerik.Windows.Controls.ChartView.PresenterBase.UpdateUI(ChartLayoutContext context) in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\Common\PresenterBase.cs:line 204
           at Telerik.Windows.Controls.ChartView.RadChartBase.UpdateUICore(ChartLayoutContext context) in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\RadChartBase.cs:line 349
           at Telerik.Windows.Controls.ChartView.PresenterBase.UpdateUI(ChartLayoutContext context) in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\Common\PresenterBase.cs:line 204
           at Telerik.Windows.Controls.ChartView.RadChartBase.CallUpdateUI() in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\RadChartBase.cs:line 843
           at Telerik.Windows.Controls.ChartView.RadChartBase.ArrangeOverride(Size finalSize) in c:\TB\102\WPF_Scrum\Release_WPF\Sources\Development\Controls\Chart\Visualization\RadChartBase.cs:line 569
           at System.Windows.FrameworkElement.ArrangeCore(Rect finalRect)
           at System.Windows.UIElement.Arrange(Rect finalRect)
           at System.Windows.Controls.Grid.ArrangeOverride(Size arrangeSize)
           at System.Windows.FrameworkElement.ArrangeCore(Rect finalRect)
           at System.Windows.UIElement.Arrange(Rect finalRect)
           at MS.Internal.Helper.ArrangeElementWithSingleChild(UIElement element, Size arrangeSize)
           at System.Windows.Controls.ContentPresenter.ArrangeOverride(Size arrangeSize)
           at System.Windows.FrameworkElement.ArrangeCore(Rect finalRect)
           at System.Windows.UIElement.Arrange(Rect finalRect)
           at System.Windows.Documents.AdornerDecorator.ArrangeOverride(Size finalSize)
           at System.Windows.FrameworkElement.ArrangeCore(Rect finalRect)
           at System.Windows.UIElement.Arrange(Rect finalRect)
           at System.Windows.Controls.Border.ArrangeOverride(Size finalSize)
           at System.Windows.FrameworkElement.ArrangeCore(Rect finalRect)
           at System.Windows.UIElement.Arrange(Rect finalRect)
           at System.Windows.Window.ArrangeOverride(Size arrangeBounds)
           at System.Windows.FrameworkElement.ArrangeCore(Rect finalRect)
           at System.Windows.UIElement.Arrange(Rect finalRect)
           at System.Windows.Interop.HwndSource.SetLayoutSize()
           at System.Windows.Interop.HwndSource.set_RootVisualInternal(Visual value)
           at System.Windows.Interop.HwndSource.set_RootVisual(Visual value)
           at System.Windows.Window.SetRootVisual()
           at System.Windows.Window.SetRootVisualAndUpdateSTC()
           at System.Windows.Window.SetupInitialState(Double requestedTop, Double requestedLeft, Double requestedWidth, Double requestedHeight)
           at System.Windows.Window.CreateSourceWindow(Boolean duringShow)
           at System.Windows.Window.CreateSourceWindowDuringShow()
           at System.Windows.Window.SafeCreateWindowDuringShow()
           at System.Windows.Window.ShowHelper(Object booleanBox)
           at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
           at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
           at System.Windows.Threading.DispatcherOperation.InvokeImpl()
           at System.Windows.Threading.DispatcherOperation.InvokeInSecurityContext(Object state)
           at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
           at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
           at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
           at System.Windows.Threading.DispatcherOperation.Invoke()
           at System.Windows.Threading.Dispatcher.ProcessQueue()
           at System.Windows.Threading.Dispatcher.WndProcHook(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
           at MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
           at MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
           at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
           at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
           at System.Windows.Threading.Dispatcher.LegacyInvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Int32 numArgs)
           at MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
           at MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
           at System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
           at System.Windows.Threading.Dispatcher.PushFrame(DispatcherFrame frame)
           at System.Windows.Threading.Dispatcher.Run()
           at System.Windows.Application.RunDispatcher(Object ignore)
           at System.Windows.Application.RunInternal(Window window)
           at System.Windows.Application.Run(Window window)
           at System.Windows.Application.Run()
           at WpfApplication3.App.Main() in C:\Users\wadec\Documents\Visual Studio 2010\Projects\WpfApplication3\WpfApplication3\obj\x86\Debug\App.g.cs:line 0
           at System.AppDomain._nExecuteAssembly(RuntimeAssembly assembly, String[] args)
           at System.AppDomain.ExecuteAssembly(String assemblyFile, Evidence assemblySecurity, String[] args)
           at Microsoft.VisualStudio.HostingProcess.HostProc.RunUsersAssembly()
           at System.Threading.ThreadHelper.ThreadStart_Context(Object state)
           at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
           at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
           at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
           at System.Threading.ThreadHelper.ThreadStart()
      InnerException:

  5. Bartholomeo Rocca
    Bartholomeo Rocca avatar
    247 posts
    Member since:
    May 2006

    Posted 21 Feb 2013 Link to this post

    Hello Wade,

    As the exception suggests, you can use the ChartSeriesLabelDefinition.Binding property only in scenarios where the series data is databound (i.e. you are not creating the PieDataPoints manually). Could you confirm you are using databound chart? If not, I would suggest you to check this help topic here to get you started with creating data-bound chart in WPF (your stack trace implies you are using this technology).


    Greetings,
    Bart.
Back to Top