Tooltip in xaml code

2 posts, 1 answers
  1. scorp
    scorp avatar
    59 posts
    Member since:
    Dec 2010

    Posted 03 Dec 2010 Link to this post

    <chart:SeriesMapping>
                               <chart:SeriesMapping.SeriesDefinition>
                                   <chart:BarSeriesDefinition  ShowItemToolTips="True" />
                               </chart:SeriesMapping.SeriesDefinition>                          
                               <chart:SeriesMapping.ItemMappings>
                                   <chart:ItemMapping FieldName="A" DataPointMember="YValue" />
                                   <chart:ItemMapping FieldName="B" DataPointMember="XCategory" />
                               </chart:SeriesMapping.ItemMappings>
                           </chart:SeriesMapping>

    how do we add a tooltip to show data returned via Binding property on our charts from xaml code. For instance data returns columns A, B and C. A is bound to Y axis B is bound to X axis and C needs to be the tooltip on the bars.
    Thanks.
  2.
  3. Answer
    Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 08 Dec 2010 Link to this post

    Hi,

    The Tooltips can be shown using  ItemMapping with DataPointMemeber = "Tooltip" and FieldName which specifies from where the data should be taken. The approach is the same as those used to bind XCategory and YValue using ItemMappings. Here is what I mean:
    <telerikChart:RadChart x:Name="radChart1">
             <telerikChart:RadChart.SeriesMappings>
                 <telerikCharting:SeriesMapping>
                     <telerikCharting:SeriesMapping.SeriesDefinition>
                         <telerikCharting:BarSeriesDefinition ShowItemLabels="True" ShowItemToolTips="True"/>
                     </telerikCharting:SeriesMapping.SeriesDefinition>
                     <telerik:SeriesMapping.ItemMappings>
                         <telerik:ItemMapping DataPointMember="YValue"
                                            FieldName="Value1" />
                         <telerik:ItemMapping DataPointMember="XCategory"
                                            FieldName="Name" />
                         <telerik:ItemMapping DataPointMember="Tooltip"
                                            FieldName="MyTooltip" />
                     </telerik:SeriesMapping.ItemMappings>
                 </telerikCharting:SeriesMapping>
             </telerikChart:RadChart.SeriesMappings>
         </telerikChart:RadChart>

    And here is the code-behind:
    public partial class MainPage : UserControl
        {
            public class Company
            {
                public string Name { get; set; }
                public double Value1 { get; set; }
                public string MyTooltip { get; set; }
      
                public Company(string name, double value1, string myTooltip)
                {
                    Name = name;
                    Value1 = value1;
                    MyTooltip = myTooltip;
                }
            }
      
            public MainPage()
            {
                InitializeComponent();
                List<Company> sampleData = new List<Company>();
                sampleData.Add(new Company("RadChart", 100, "My Tooltip 1 - Chart"));
                sampleData.Add(new Company("RadGauge", 600,"My Tooltip 2 - Gauge"));
                sampleData.Add(new Company("RadMap", 300, "My Tooltip 3 - Map"));
                  
                radChart1.ItemsSource = sampleData;
                radChart1.DefaultView.ChartArea.AxisY.AutoRange = false;
                radChart1.DefaultView.ChartArea.AxisY.AddRange(0, 1200, 100);
            }
        }

    Kind regards,
    Evgenia
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
Back to Top