Rad chart Yaxix tick label binding to graph

8 posts, 0 answers
  1. FIJO
    FIJO avatar
    19 posts
    Member since:
    Sep 2010

    Posted 23 Sep 2010 Link to this post

    HI,

    pLease respond asap , iam having a blocker with this.
    I am working on Telerick charts, I have graph which will look like this in the release tab area.

    please have look at  New RAd Chart without YAxix tick label binding to graph.png

    I would like to set Yaxix tick value as label for this control.

     

     

    Older asp application will have this look and fell after setting Y-axix tick value.
    please have look at  Older.png

    So how do I put y-axis tick label for these there column in my rad chart in the above rad chart .

     

     

    With thanks,

    Fijo Francis T.

     

     

     

     

     

  2. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 28 Sep 2010 Link to this post

    Hi,

    Thank you for contacting Telerik Support.

    To be able to set custom labels you should use Categorical chart where the category is your string. Categorical charts are described in our help topic - http://www.telerik.com/help/silverlight/radchart-features-categorical-charts.html with source code. As a side note -- this is actually the X axis which appears vertically in case of horizontal chart.

    I hope this information helps.

    Greetings,
    Evgenia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. FIJO
    FIJO avatar
    19 posts
    Member since:
    Sep 2010

    Posted 07 Oct 2010 Link to this post

    HI ,
    PLEASE HELP ME URGENT (:.-.:)
    As  per you suggested in previous reply i have done all the settings now graph look like as per attachment with this RADCHARTSAMPlE.JPG


    XAML part look like this

    In this YAxisDisplayName is a combined collection or concatnated string of FeatureName+ FeatureStatusName+ReviseEstimate

     

     

     

     

     

     

    It is coming now all the ytick label collection in above how do i get it as the chart in infragisticsSample.jpg  here each label and yaaxix value is directly aligen in a strigth y axix tick. HOW DO I DO THAT?

    Please have look at ReleaseFeatureChart.xaml which i am using now in RADCHARTSAMPlE.JPG . please respond me as soon as possible.

    With Thanks,
    Fijo
    ReleaseFeatureChart.xaml

     <UserControl  x:Class="LeMonNext.Client.Modules.ProjectCockpit.Views.ReleaseView.ReleaseFeatureChart"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
         >
        <UserControl.Resources>
            <ResourceDictionary >
                <ResourceDictionary.MergedDictionaries >
                    <ResourceDictionary Source="/LeMonNext.Client.Modules.ProjectCockpit;component/Style/Resource.xaml"></ResourceDictionary>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Border Grid.Column="0" Grid.Row="1" CornerRadius="1,1,1,1" BorderBrush="#193441" Background="#FCFFF5" BorderThickness="1,1,1,1" Margin="2" Padding="2">
                <telerik:RadChart  x:Name="_Features" ItemsSource="{Binding Features}" 
                  Style="{StaticResource CustomChartStyle}"  BorderBrush="#585ED681"
                                       Foreground="#FF88CC9D" OpacityMask="#FFBEDC9C">
                    <telerik:RadChart.DefaultView>
                        <telerik:ChartDefaultView>
                            <telerik:ChartDefaultView.ChartArea>
                                <telerik:ChartArea>
                                    <telerik:ChartArea.AxisX>
                                        <telerik:AxisX  Title="Features(In Order Of Priority)">
                                        </telerik:AxisX>
                                    </telerik:ChartArea.AxisX >
                                    <telerik:ChartArea.AxisY>
                                        <telerik:AxisY Title="Scheduled Effort (Hours)" >
                                        </telerik:AxisY>
                                    </telerik:ChartArea.AxisY>
                                </telerik:ChartArea>
                            </telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartDefaultView.ChartLegend>
                                <telerik:ChartLegend x:Name="chartLegend"
                                                     Background="LightYellow"
                                                     UseAutoGeneratedItems="True" FontSize="10" FontFamily="Arial" />
                            </telerik:ChartDefaultView.ChartLegend>
                        </telerik:ChartDefaultView>
                    </telerik:RadChart.DefaultView>
                    <telerik:RadChart.SeriesMappings>
                        <telerik:SeriesMapping>
                            <telerik:SeriesMapping.SeriesDefinition>
                                <telerik:HorizontalBarSeriesDefinition ShowItemToolTips="True" ShowItemLabels="True"
                                                                              ItemToolTipFormat="Scheduled Effort #Y{N},PercentageCompleted #Y{N}"
                                                                              ShowZeroValuesLabels="False"  
                                                                               />
                            </telerik:SeriesMapping.SeriesDefinition>
                            <telerikCharting:SeriesMapping.GroupingSettings>
                                <telerikCharting:GroupingSettings>
                                    <telerikCharting:GroupingSettings.GroupDescriptors>
                                        <telerikCharting:ChartGroupDescriptor Member="FeatureName"/>
                                        <telerikCharting:ChartGroupDescriptor Member="FeatureStatusName"/>
                                        <telerikCharting:ChartGroupDescriptor Member="ReviseEstimate"/>
                                    </telerikCharting:GroupingSettings.GroupDescriptors>
                                </telerikCharting:GroupingSettings>
                            </telerikCharting:SeriesMapping.GroupingSettings>
                            <telerik:SeriesMapping.ItemMappings>
                                <telerik:ItemMapping  FieldName="YAxisDisplayName"  DataPointMember="XCategory"/>
                                <telerik:ItemMapping FieldName="ScheduledEffort" DataPointMember="YValue"  />
                            </telerik:SeriesMapping.ItemMappings>
                        </telerik:SeriesMapping>
                    </telerik:RadChart.SeriesMappings>
                    <telerik:RadChart.PaletteBrushes>
                        <SolidColorBrush Color="Orange"/>
                    </telerik:RadChart.PaletteBrushes>
                </telerik:RadChart>
            </Border>
        </Grid>
    </UserControl>

     

     

     

     

  4. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 11 Oct 2010 Link to this post

    Hi,

    As I investigated your XAML I saw that you are trying to set Grouping. There is no need of this feature in your scenario as there are no similar category names. Here is how you can achieve the desired chart (shown in infragisticssample.jpg) :

    public partial class MainPage : UserControl
       {
           public class Company
           {
               public string FeatureStatusName { get; set; }
               public double Value1 { get; set; }
               public string ReviseEstimate { get; set; }
               public string Category { get; set; }
               public string FeatureName { get; set; }
               public Company(string featureName, string featureStatusName, string reviseEstimate, double value1)
               {
                   FeatureName = featureName;
                   FeatureStatusName = featureStatusName;
                   Value1 = value1;
                   Category = featureName + " " + featureStatusName + " " + reviseEstimate;
               }
               public override string ToString()
               {
                   return FeatureStatusName + Value1;
               }
           }
           public MainPage()
           {
               InitializeComponent();
                 
               List<Company> sampleData = new List<Company>();
               sampleData.Add(new Company("Release management for iteration 6", "Completed", "5", 100));
               sampleData.Add(new Company("Release management for iteration 5", "Completed", "5", 210));
               sampleData.Add(new Company("Rule interpreter or parser", "In progress", "21", 89));
                  
               SeriesMapping seriesMapping = new SeriesMapping { LegendLabel = "Series 1" }; 
               seriesMapping.ItemMappings.Add(new ItemMapping("Value1", DataPointMember.YValue)); 
               seriesMapping.ItemMappings.Add(new ItemMapping("Category" , DataPointMember.XCategory)); 
               seriesMapping.SeriesDefinition = new  HorizontalBarSeriesDefinition() { ShowItemLabels = true};
               RadChart1.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Inside;
               RadChart1.ItemsSource = sampleData;
                   
               RadChart1.SeriesMappings.Add(seriesMapping);
           }     
       }

    The chart is bound using  a list of business objects. In order to map to such kind of business objects, you have to create a new instance of SeriesMapping. Each SeriesMapping has ItemMapping property. For each ItemMappings the following properties are set - DataPointMember and FieldName which specifies from where the data should be taken. You can find more information about this in our help article - http://www.telerik.com/help/silverlight/radchart-populating-with-data-data-binding-with-manual-series-mapping.html
    To be able to show custom labels for Axis X tickpoints - chart uses Categories. In above XAML each XCategory is mapped to Category property of the class Company which is set to concatenated featureName , featureStatusName and reviseEstimate strings.

    Additionally the property LayoutMode is set to Inside so that ticks match labels as described here - http://www.telerik.com/help/silverlight/radchart-features-layout-mode.html.

    Best wishes,
    Evgenia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. FIJO
    FIJO avatar
    19 posts
    Member since:
    Sep 2010

    Posted 13 Oct 2010 Link to this post

    HI Evgenia,

    Thanks For your response, i have solved my issue the way  you told me and in between there was some data deficiency  from the entity which i am binding , together its works fine. ANy way thanks for you beautiful explanation.

    With Thank,
    Fijo Francis T,
    9986573129.
  6. FIJO
    FIJO avatar
    19 posts
    Member since:
    Sep 2010

    Posted 14 Oct 2010 Link to this post

    Hi Evgenia,

    I am facing following issues in the same Chart

     Issue 1:

     

    Old Chart: - Which look fine shown in OLDChart.JPG

     

     

    New Rad Chart Which looks different shown in NewRadChart.JPG

     

     

    Issue 1:

     

    In old Chart all the column we binding in the y-axis is showing in Column wise how do I achieve same in New rad chart.    

    Old chart Code snippet which does this job is

        e.YAxisTick.Label.Text +=

                    "<block hAlign='Left' " + extras + ">" + name + "<block hAlign='Center' " + extras + ">" +

                    e.Name + "<block hAlign='Center' " + extras + ">" + e.YValue;

     

    Here its doing html align.

    But as far I understand silver light is a XHTML render and much  like flash pluggin so ho do we do these kind of column align.

     

    Issue 2:

    In old chart with Pentage is showing with % symbol but in silver light it is not showing % symbol , I know I need to concatenate % symbol but where because I am setting it as label like this which I shown in green. I am using ItemToolTipFormat for showing ScheduledEffort but how do I achive it for DataPointMember="Label"?

    Please have look at new rad chart.

          <telerik:RadChart.SeriesMappings>

                        <telerik:SeriesMapping>

                            <telerik:SeriesMapping.SeriesDefinition>

                                <telerik:HorizontalBarSeriesDefinition ShowItemToolTips="True" ShowItemLabels="True"  

                                                                              ItemToolTipFormat="Scheduled Effort:#Y{N} Hours"

                                                                              ShowZeroValuesLabels="False"   StackGroupName="Stack0"

                                                                               />

                            </telerik:SeriesMapping.SeriesDefinition>

                            <telerik:SeriesMapping.ItemMappings>

                                <telerik:ItemMapping  FieldName="YAxisDisplayName"  DataPointMember="XCategory"/>

                                <telerik:ItemMapping FieldName="ScheduledEffort" DataPointMember="YValue"  />

                                <telerik:ItemMapping FieldName="PercentageCompleted" DataPointMember="Label" />

                            </telerik:SeriesMapping.ItemMappings>

                        </telerik:SeriesMapping>

                    </telerik:RadChart.SeriesMappings>

     

    Issue 3:-

    In old Chart it is showing ScheduledEffort and PercentageCompleted in same tooltip how I achive same in rad chart? Code is same as above

    Issue 4:

     

    In Old Chart 1000 is howing in X axix but in new rad chart 1000 is formatting 1K but I have to maintain same look and feel as old one what should I do , I mean to show as 1000?

     

    With Tahnks,

    FIJO Francis T

  7. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 18 Oct 2010 Link to this post

    Hello FIJO,

    Issue 1) Here is a suggestion which will make categories look maximum close to your requirement.
     You can set custom Style to your axis item labels as described here - http://www.telerik.com/help/silverlight/radchart-styling-and-appearance-styling-axis-item-label.html. The key Property you need is HorizontalAlignment which I'm setting to Right:
    <Style x:Key="ItemLabelStyle"
          TargetType="TextBlock">
                <Setter Property="Foreground"
               Value="Black" />
                <Setter Property="HorizontalAlignment" Value="Right"/>
            </Style>
    After that you can use horizontal tab "\t" escape sequence to provide equal space between strings. The example below sets in the data, but you may consider wiring the iItemDataBound event and modifying each DataPoint's Category in the same manner.
    List<Company> sampleData = new List<Company>(); 
              sampleData.Add(new Company("Release management for iteration 6\t", "\tCompleted", "\t5\t", 1000, "100")); 
              sampleData.Add(new Company("Release management for iteration 5\t", "\tCompleted", "\t5\t", 2010, "88.89")); 
              sampleData.Add(new Company("Rule interpreter or parser\t", "\tIn progress", "\t21\t", 890, "100"));
              sampleData.Add(new Company("Rule builder GUI\t", "\tCompleted", "\t21\t", 2000, "100"));
              sampleData.Add(new Company("Alerts Engine\t", "\tCompleted", "\t13\t", 3000, "100"));

    Issue 2) You are right that you need to concatenate "%" sign with Item Label string. You can do this in the constructor:
    public string FeatureStatusName { get; set; }
                public double Value1 { get; set; }
                public string ReviseEstimate { get; set; }
                public string Category { get; set; }
                public string FeatureName { get; set; }
                public string PercentageCompleted { get; set; }
                public Company(string featureName, string featureStatusName, string reviseEstimate, double value1, string percentageCompleted)
                {
                    FeatureName = featureName;
                    FeatureStatusName = featureStatusName;
                    Value1 = value1;
                    PercentageCompleted = percentageCompleted + "%";
                    Category = featureName + featureStatusName + reviseEstimate;
                }

    Then simply set ItemMapping's Label to PercentageCompleted field like this:
    seriesMapping.ItemMappings.Add(new ItemMapping("PercentageCompleted", DataPointMember.Label));

    Issue 3) You can show ScheduledEffort and PercentageCompleted in same tooltip using #DATAITEM token as described here - http://www.telerik.com/help/silverlight/radchart-features-format-expressions.html.
    Here is how your ItemToolTip should look like:
    seriesMapping.SeriesDefinition = new HorizontalBarSeriesDefinition()
              {
                  ItemToolTipFormat = "Scheduled Effort:#Y{N} Hours\nPercentage Completed: #DATAITEM.PercentageCompleted",
                  ShowItemToolTips = true,
                  ShowItemLabels = true
              };
    NOTE that you need to turn on visibility of ItemLabels and ToolTips. The tooltip is formatted to show two rows by the "\n" escaping sequence.

    Issue 4) RadChart allows you to specify how to format the axis labels by specifying ChartArea.LabelFormatBehavior property. In your case it is set to "HumanReadable" (by default) and you need to change it to None like this:

    RadChart1.DefaultView.ChartArea.LabelFormatBehavior = LabelFormatBehavior.None;

    This is described in our help article - http://www.telerik.com/help/silverlight/radchart-features-chart-area.html.

    I hope this information helps.

    Best wishes,
    Evgenia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. FIJO
    FIJO avatar
    19 posts
    Member since:
    Sep 2010

    Posted 19 Oct 2010 Link to this post

    Hi Evgenia ,

    ThanK you so much, Everything is working Fine  after applaying what you have told me to do.

    With Thanks,
    Fijo Francis T,
    91-9986573129
Back to Top