unable to show the bar chart

2 posts, 0 answers
  1. Alex
    Alex avatar
    3 posts
    Member since:
    May 2012

    Posted 20 Aug 2012 Link to this post

    Hello,
    I am new to telerik controls. today i try to show a bar chart with data binding, but always unable to see the bars, only empty chart. below is the xaml and view model. thanks in advance for your help!

    Thank you,
    Alex

    <UserControl
        xmlns:MHSVisualBoard_ViewModels="clr-namespace:MHSVisualBoard.ViewModels"
        mc:Ignorable="d"
        x:Class="MHSVisualBoard.MissionsByForklift"
        x:Name="UserControl"
        d:DesignWidth="582" d:DesignHeight="400" MaxWidth="550" MaxHeight="300" Width="550" Height="Auto">
     
        <Grid x:Name="LayoutRoot">
            <UniformGrid Margin="0" Rows="2" Columns="1">
                <telerik:RadChart x:Name="charMissionsTrend" Content="" Style="{DynamicResource RadChartStyle}" OverridesDefaultStyle="True"/>
                <telerik:RadChart x:Name="chartMissionAssignedVsFinished" Content="" Style="{DynamicResource RadChartStyle}" OverridesDefaultStyle="True" ItemsSource="{Binding Data, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                    <telerik:RadChart.DataContext>
                        <MHSVisualBoard_ViewModels:MissionsByForkliftViewModel>
                            <MHSVisualBoard_ViewModels:MissionsByForkliftViewModel.Data>
                                <MHSVisualBoard_ViewModels:ForkliftMissions AssignedMissions="12" FinishedMissions="3" ForkliftId="E1"/>
                                <MHSVisualBoard_ViewModels:ForkliftMissions AssignedMissions="15" FinishedMissions="9" ForkliftId="E2"/>
                            </MHSVisualBoard_ViewModels:MissionsByForkliftViewModel.Data>
                        </MHSVisualBoard_ViewModels:MissionsByForkliftViewModel>
                    </telerik:RadChart.DataContext>
                    <telerik:RadChart.SeriesMappings>
                        <telerik:SeriesMapping SeriesDefinition="{DynamicResource ISeriesDefinitionBarOne}">
                            <telerik:ItemMapping DataPointMember="XCategory" FieldName="{Binding Data[0].ForkliftId}"/>
                            <telerik:ItemMapping FieldName="{Binding Data[0].AssignedMissions}" DataPointMember="YValue"/>
                        </telerik:SeriesMapping>
                    </telerik:RadChart.SeriesMappings>
                </telerik:RadChart>
            </UniformGrid>
        </Grid>
    </UserControl>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Telerik.Windows.Controls;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    namespace MHSVisualBoard.ViewModels
    {
        public class MissionsByForkliftViewModel : ViewModelBase
        {
            public MissionsByForkliftViewModel()
            {
                _data = new ObservableCollection<ForkliftMissions>();
            }
     
            public ObservableCollection<ForkliftMissions> Data
            {
                get
                {
                    return _data;
                }
                set
                {
                    if (value != _data)
                    {
                        _data = value;
                        this.OnPropertyChanged("Data");
                    }
                }
            }
     
            private ObservableCollection<ForkliftMissions> _data;
        }
     
        public class ForkliftMissions : INotifyPropertyChanged
        {
            public ForkliftMissions()
            {
     
            }
     
            public event PropertyChangedEventHandler PropertyChanged;
     
            public string ForkliftId
            {
                get
                {
                    return _forkliftId;
                }
                set
                {
                    _forkliftId = value;
                }
            }
     
            public int AssignedMissions
            {
                get
                {
                    return _assignedMissions;
                }
                set
                {
                    if (value != _assignedMissions)
                    {
                        _assignedMissions = value;
                        if (PropertyChanged != null)
                            PropertyChanged(this, new PropertyChangedEventArgs("AssignedMissions"));
                    }
                }
            }
     
            public int FinishedMissions
            {
                get
                {
                    return _finishedMissions;
                }
                set
                {
                    if (value != _finishedMissions)
                    {
                        _finishedMissions = value;
                        if (PropertyChanged != null)
                            PropertyChanged(this, new PropertyChangedEventArgs("FinishedMissions"));
                    }
                }
            }
     
            private string _forkliftId;
            private int _finishedMissions;
            private int _assignedMissions;
        }
    }
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 21 Aug 2012 Link to this post

    Hello Alex,

    Thank you for the attached code snippets. I was able to create a project based on the code you provided, however I had to alter some things as I did not have all of your resources. I think that the main problem was in the FieldName definition. The FieldName expects a name of a property or a field and not a Binding. Below I have pasted some code to show what changes need to be made in order to be able to see a properly populated chart:

      <telerik:SeriesMapping>
       <telerik:ItemMapping DataPointMember="XCategory" FieldName="ForkliftId"/>
       <telerik:ItemMapping DataPointMember="YValue" FieldName="AssignedMissions"/>



    I have also attached the project I ended up with, which shows two bars as expected.

    Kind regards,
    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top