custom ToolTip Required in Multiple Y-Axis Line Series.

5 posts, 1 answers
  1. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 15 Mar 2011 Link to this post

    custom ToolTip Required in Multiple Y-Axis Line Series. I'm posting my Code here.
    Plz have a generous look. Also check out the attachment for my tooltip requirement.
    Please try to answer in c# only or code behind.

    private void MultipleYAxis()
    {
              radChart1.DefaultView.ChartArea.AdditionalYAxes.Add(new AxisY());
              radChart1.DefaultView.ChartArea.AdditionalYAxes.Add(new AxisY());
              radChart1.DefaultView.ChartArea.AdditionalYAxes.Add(new AxisY());
              radChart1.DefaultView.ChartArea.AdditionalYAxes[0].AxisName = "Visits";
              radChart1.DefaultView.ChartArea.AdditionalYAxes[1].AxisName = "IMPVisits";
              radChart1.DefaultView.ChartArea.AdditionalYAxes[2].AxisName = "MissedVisits";
     
              //radChart1.DefaultSeriesDefinition.InteractivitySettings.HoverScope = InteractivityScope.Series;
              //radChart1.DefaultSeriesDefinition.InteractivitySettings.SelectionScope = InteractivityScope.Series;
               
     
              SeriesMapping seriesMapping = new SeriesMapping();
              seriesMapping.SeriesDefinition = new LineSeriesDefinition() { PointMarkItemStyle = this.Resources["CustomStyle"] as Style};
              seriesMapping.SeriesDefinition.InteractivitySettings.HoverScope = InteractivityScope.Series;
              seriesMapping.SeriesDefinition.AxisName = "Visits";
              seriesMapping.LegendLabel = "Visits";
              seriesMapping.SeriesDefinition.ShowItemLabels = false;
              seriesMapping.ItemMappings.Add( new ItemMapping( "Visits", DataPointMember.YValue ) );
              seriesMapping.ItemMappings.Add(new ItemMapping("Date", DataPointMember.XValue));
              radChart1.SeriesMappings.Add( seriesMapping );
              seriesMapping = new SeriesMapping();
              seriesMapping.LegendLabel = "IMPVisits";
              seriesMapping.SeriesDefinition = new LineSeriesDefinition();
              seriesMapping.SeriesDefinition.InteractivitySettings.HoverScope = InteractivityScope.Series;
              seriesMapping.SeriesDefinition.AxisName = "IMPVisits";
              seriesMapping.SeriesDefinition.ShowItemLabels = false;
              seriesMapping.ItemMappings.Add( new ItemMapping( "IMPVisits", DataPointMember.YValue ) );
              seriesMapping.ItemMappings.Add(new ItemMapping("Date", DataPointMember.XValue));
              radChart1.SeriesMappings.Add( seriesMapping );
     
              seriesMapping = new SeriesMapping();
              seriesMapping.LegendLabel = "Missed Visits";
              seriesMapping.SeriesDefinition = new LineSeriesDefinition();
              seriesMapping.SeriesDefinition.InteractivitySettings.HoverScope = InteractivityScope.Series;
              seriesMapping.SeriesDefinition.AxisName = "MissedVisits";
              seriesMapping.SeriesDefinition.ShowItemLabels = false;
              seriesMapping.ItemMappings.Add(new ItemMapping("MissedVisits", DataPointMember.YValue));
              seriesMapping.ItemMappings.Add(new ItemMapping("Date", DataPointMember.XValue));
              radChart1.SeriesMappings.Add(seriesMapping);
     
     
              //Chart Legend
              radChart1.DefaultView.ChartLegend.UseAutoGeneratedItems = true;
              radChart1.DefaultView.ChartLegend.Header = "Monthly Visits";
              radChart1.DefaultView.ChartLegendPosition = Telerik.Windows.Controls.Dock.Top;
     
              //Chart X-Axis Labels
              radChart1.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "dd-MMM-yyyy";
              radChart1.DefaultView.ChartArea.AxisX.LabelRotationAngle = 50;
               
              radChart1.ItemsSource = new TrafficInfoCollection();
               
          }
    //Items Source for Chart
    public
    class TrafficInfoCollection : IEnumerable<TrafficInfo>
     {
         public IEnumerator<TrafficInfo> GetEnumerator()
         {
             yield return new TrafficInfo { Date = DateTime.Parse("12/27/2008", CultureInfo.InvariantCulture), Visits = 1991, IMPVisits = 1900,MissedVisits=1581 };
             yield return new TrafficInfo { Date = DateTime.Parse("12/28/2008", CultureInfo.InvariantCulture), Visits = 2141, IMPVisits = 1800,MissedVisits=1652 };
             yield return new TrafficInfo { Date = DateTime.Parse("12/29/2008", CultureInfo.InvariantCulture), Visits = 3820, IMPVisits = 1700 ,MissedVisits=6876};
             yield return new TrafficInfo { Date = DateTime.Parse("12/30/2008", CultureInfo.InvariantCulture), Visits = 3945, IMPVisits = 3900 ,MissedVisits=1235};
             yield return new TrafficInfo { Date = DateTime.Parse("12/31/2008", CultureInfo.InvariantCulture), Visits = 3256, IMPVisits = 2900 ,MissedVisits=1648};
     
             yield return new TrafficInfo { Date = DateTime.Parse("1/1/2009", CultureInfo.InvariantCulture), Visits = 1633, IMPVisits = 3200 ,MissedVisits=3265};
             yield return new TrafficInfo { Date = DateTime.Parse("1/2/2009", CultureInfo.InvariantCulture), Visits = 3311, IMPVisits = 4900 ,MissedVisits=5896};
             yield return new TrafficInfo { Date = DateTime.Parse("1/3/2009", CultureInfo.InvariantCulture), Visits = 2171, IMPVisits = 4320 ,MissedVisits=4578};
             yield return new TrafficInfo { Date = DateTime.Parse("1/4/2009", CultureInfo.InvariantCulture), Visits = 2053, IMPVisits = 2100 ,MissedVisits=7562};
             yield return new TrafficInfo { Date = DateTime.Parse("1/5/2009", CultureInfo.InvariantCulture), Visits = 4582, IMPVisits = 2450 ,MissedVisits=6564};
     
             yield return new TrafficInfo { Date = DateTime.Parse("1/6/2009", CultureInfo.InvariantCulture), Visits = 5117, IMPVisits = 4200 ,MissedVisits=1354};
             yield return new TrafficInfo { Date = DateTime.Parse("1/7/2009", CultureInfo.InvariantCulture), Visits = 5383, IMPVisits = 1560,MissedVisits= 1354};
             yield return new TrafficInfo { Date = DateTime.Parse("1/8/2009", CultureInfo.InvariantCulture), Visits = 5882, IMPVisits = 4500 ,MissedVisits=5463};
             yield return new TrafficInfo { Date = DateTime.Parse("1/9/2009", CultureInfo.InvariantCulture), Visits = 5399, IMPVisits = 2900 ,MissedVisits=5463};
             yield return new TrafficInfo { Date = DateTime.Parse("1/10/2009", CultureInfo.InvariantCulture), Visits = 2838, IMPVisits = 4190 ,MissedVisits=7945};
             yield return new TrafficInfo { Date = DateTime.Parse("1/11/2009", CultureInfo.InvariantCulture), Visits = 3416, IMPVisits = 3500 ,MissedVisits=1235};
             yield return new TrafficInfo { Date = DateTime.Parse("1/12/2009", CultureInfo.InvariantCulture), Visits = 5833, IMPVisits = 2500 ,MissedVisits=3164};
     
             yield return new TrafficInfo { Date = DateTime.Parse("1/13/2009", CultureInfo.InvariantCulture), Visits = 6167, IMPVisits = 1230 ,MissedVisits=1356};
             yield return new TrafficInfo { Date = DateTime.Parse("1/14/2009", CultureInfo.InvariantCulture), Visits = 5813, IMPVisits = 2150 ,MissedVisits=9652};
             yield return new TrafficInfo { Date = DateTime.Parse("1/15/2009", CultureInfo.InvariantCulture), Visits = 5584, IMPVisits = 2640 ,MissedVisits=4566};
             yield return new TrafficInfo { Date = DateTime.Parse("1/16/2009", CultureInfo.InvariantCulture), Visits = 5061, IMPVisits = 4123 ,MissedVisits=3215};
             yield return new TrafficInfo { Date = DateTime.Parse("1/17/2009", CultureInfo.InvariantCulture), Visits = 2268, IMPVisits = 2134 ,MissedVisits=5544};
             yield return new TrafficInfo { Date = DateTime.Parse("1/18/2009", CultureInfo.InvariantCulture), Visits = 2231, IMPVisits = 4215 ,MissedVisits=1456};
             yield return new TrafficInfo { Date = DateTime.Parse("1/19/2009", CultureInfo.InvariantCulture), Visits = 5385, IMPVisits = 1956 ,MissedVisits=1369};
     
             yield return new TrafficInfo { Date = DateTime.Parse("1/20/2009", CultureInfo.InvariantCulture), Visits = 5632, IMPVisits = 2300 ,MissedVisits=1548};
             yield return new TrafficInfo { Date = DateTime.Parse("1/21/2009", CultureInfo.InvariantCulture), Visits = 5749, IMPVisits = 1900,MissedVisits= 4462};
             yield return new TrafficInfo { Date = DateTime.Parse("1/22/2009", CultureInfo.InvariantCulture), Visits = 5800, IMPVisits = 2640,MissedVisits= 4152};
             yield return new TrafficInfo { Date = DateTime.Parse("1/23/2009", CultureInfo.InvariantCulture), Visits = 5057, IMPVisits = 3500 ,MissedVisits=1236};
             yield return new TrafficInfo { Date = DateTime.Parse("1/24/2009", CultureInfo.InvariantCulture), Visits = 2418, IMPVisits = 3800,MissedVisits= 1639};
             yield return new TrafficInfo { Date = DateTime.Parse("1/25/2009", CultureInfo.InvariantCulture), Visits = 2221, IMPVisits = 4000 ,MissedVisits=1475};
             yield return new TrafficInfo { Date = DateTime.Parse("1/26/2009", CultureInfo.InvariantCulture), Visits = 4584, IMPVisits = 4250,MissedVisits=1369 };
         }
     
         System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
         {
             return ((IEnumerable<TrafficInfo>)this).GetEnumerator();
         }
     }
     public class TrafficInfo
     {
         public DateTime Date { get; set; }
         public int Visits { get; set; }
         public int IMPVisits { get; set; }
         public int MissedVisits { get; set; }
     }
  2. Missing user
    Missing user avatar

    Posted 18 Mar 2011 Link to this post

    Hello Rahul,

    You need to create a custom control with the desired ToolTip style and template. In the ChartArea.ItemToolTipOpening event initialize the ToolTip control and set the values that will be displayed. For example:
    radChart1.DefaultView.ChartArea.ItemToolTipOpening += new ItemToolTipEventHandler(ChartArea_ItemToolTipOpening);

    private void ChartArea_ItemToolTipOpening(ItemToolTip2D tooltip, ItemToolTipEventArgs e)
    {
        TrafficInfo trafficInfoData = e.DataPoint.DataItem as TrafficInfo;
     
        ToolTipCustomControl toolTipControl = new ToolTipCustomControl();
        toolTipControl.Date = trafficInfoData.Date;
        toolTipControl.Visits = trafficInfoData.Visits;
        toolTipControl.IMPVisits = trafficInfoData.IMPVisits;
        toolTipControl.MissedVisits = trafficInfoData.MissedVisits;
     
        tooltip.Content = toolTipControl;
    }

    In order to allow the ToolTips visibility you need to set SeriesMapping.SeriesDefinition.ShowItemToolTips = true

    You can find the full details on how to achieve this functionality in this help topic:
    http://www.telerik.com/help/silverlight/radchart-features-tooltips.html

    Regards,
    Polina
    the Telerik team
  3. DevCraft banner
  4. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 18 Mar 2011 Link to this post

    Hi Polina. Thanx for ur valuable reply.
      I'm using Line Series in my RadChart.
    I've added one class to my project called ToolTipCustomControl.

    Even breakpoint is not hitting this code or control is not coming to ChartArea_ItemToolTipOpening this function.
    I've used this line also in my code.
    radChart1.DefaultView.ChartArea.ItemToolTipOpening += new ItemToolTipEventHandler(ChartArea_ItemToolTipOpening);

    Still this code not calling the ChartArea_ItemToolTipOpening this function.
    namespace Telerik_All_Styles
    {
        public class ToolTipCustomControl
        {
            public DateTime Date { get; set; }
            public int Visits { get; set; }
            public int IMPVisits { get; set; }
            public int MissedVisits { get; set; }
        }
    }

    private void ChartArea_ItemToolTipOpening(ItemToolTip2D tooltip, ItemToolTipEventArgs e)
           {
               TrafficInfo trafficInfoData = e.DataPoint.DataItem as TrafficInfo;
     
               ToolTipCustomControl toolTipControl = new ToolTipCustomControl();
               toolTipControl.Date = trafficInfoData.Date;
               toolTipControl.Visits = trafficInfoData.Visits;
               toolTipControl.IMPVisits = trafficInfoData.IMPVisits;
               toolTipControl.MissedVisits = trafficInfoData.MissedVisits;
     
               tooltip.Content = toolTipControl;
           }

    Plz have a look into this.
    Thank You.
  5. Answer
    Missing user
    Missing user avatar

    Posted 22 Mar 2011 Link to this post

    Hi Rahul,

    Make sure that you have created a Custom User Control, as it is explained in the link that I have posted in the previous answer. For example:

    ToolTipCustomControl.xaml
    <UserControl>
        <UserControl.Resources>
            <Style x:Key="textStyle" TargetType="TextBlock">
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="FontSize" Value="10.667"/>
            </Style>
        </UserControl.Resources>
        <Border BorderThickness="2">
            <Grid x:Name="LayoutRoot">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                 
                <TextBlock Text="Date: " Grid.Column="0" Grid.Row="0" Style="{StaticResource textStyle}" />
                <TextBlock Text="N/A" x:Name="tbDate" Grid.Column="1" Grid.Row="0" Style="{StaticResource textStyle}" />
                <TextBlock Text="Visits: " Grid.Column="0" Grid.Row="1" Style="{StaticResource textStyle}" />
                <TextBlock Text="N/A" x:Name="tbVisits" Grid.Column="1" Grid.Row="1" Style="{StaticResource textStyle}" />
                <TextBlock Text="IMPVisits: " Grid.Column="0" Grid.Row="2" Style="{StaticResource textStyle}" />
                <TextBlock Text="N/A" x:Name="tbIMPVisits" Grid.Column="1" Grid.Row="2" Style="{StaticResource textStyle}" />
                <TextBlock Text="MissedVisits: " Grid.Column="0" Grid.Row="3" Style="{StaticResource textStyle}" />
                <TextBlock Text="N/A" x:Name="tbMissedVisits" Grid.Column="1" Grid.Row="3" Style="{StaticResource textStyle}" />
            </Grid>
        </Border>
    </UserControl>

    and ToolTipCustomControl.xaml.cs
    public partial class ToolTipCustomControl : UserControl
    {
        public DateTime Date
        {
            set
            {
                this.tbDate.Text = value.ToString("MMM/dd/yyyy");
            }
        }
     
        public int Visits
        {
            set
            {
                this.tbVisits.Text = value.ToString();
            }
        }
     
        public int IMPVisits
        {
            set
            {
                this.tbIMPVisits.Text = value.ToString();
            }
        }
     
        public int MissedVisits
        {
            set
            {
                this.tbMissedVisits.Text = value.ToString();
            }
        }
     
        public ToolTipCustomControl()
        {
            InitializeComponent();
        }
    }

    Greetings,
    Polina
    the Telerik team
  6. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 22 Mar 2011 Link to this post

    Polina Thanks a lot. That's what i want.
    But be in touch. If I get any difficulty later I will
    contact you.

    Thanx once again.
Back to Top
DevCraft banner