How to have a custom tooltip when hovered over a datapoint?
3 Answers 13 Views
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
Om Pushkara deep asked on 11 Jun 2021, 08:42 AM | edited on 14 Jun 2021, 10:44 AM

Hi ,

I am having a range bar series. When hovered over a range data point i need to get the plot value and display as a tooltip of that hovered data point. Attached is the sample code , where i need to capture range data point.


        

private void radChartView1_ToolTipTextNeeded(object sender, Telerik.WinControls.ToolTipTextNeededEventArgs e) { RadChartElement element = (RadChartElement)sender; //RangeDataPoint dataPoint = (RangeDataPoint)element.;//var item = sender as RadChartElement;//if (item != null)//{// var dataItem = item.DataPoint as RangeDataPoint;// e.ToolTipText = dataItem.High.ToString();//}//e.ToolTipText = "Hi"; }

 


    

private void LoadBarChart() { chart.View.AreaType = ChartAreaType.Cartesian; chart.AngleTransform = 90; RangeBarSeries rangeBarSeries = new RangeBarSeries(); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/17/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/17/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 4, DateTime.Now.TimeOfDay.TotalMinutes + 2, "5/17/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 30, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/18/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/18/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 4, DateTime.Now.TimeOfDay.TotalMinutes + 2, "5/19/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes - 89, DateTime.Now.TimeOfDay.TotalMinutes - 100, "5/20/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/20/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes - 79, DateTime.Now.TimeOfDay.TotalMinutes - 90, "5/21/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/21/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/22/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/22/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/23/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/23/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/25/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/24/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/26/2021")); rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/26/2021")); CategoricalAxis horizontalAxis = new CategoricalAxis(); horizontalAxis.ClipLabels = false; horizontalAxis.ShowLabels = false; //horizontalAxis.LabelRotationAngle = -90;//horizontalAxis.LabelFitMode = AxisLabelFitMode.Rotate; horizontalAxis.PlotMode = AxisPlotMode.BetweenTicks; rangeBarSeries.HorizontalAxis = horizontalAxis; chart.View.Series.Add(rangeBarSeries); chart.View.ShowToolTip = true; chart.View.ShowTrackBall = true; ChartTooltipController tooltipController = new ChartTooltipController(); tooltipController.DataPointTooltipTextNeeded += tooltipController_DataPointTooltipTextNeeded; this.chart.View.Controllers.Add(tooltipController); rangeBarSeries.VerticalAxis.LabelFormatProvider = new MyFormatProvider(); rangeBarSeries.VerticalAxis.ClipLabels = false; rangeBarSeries.VerticalAxis.LabelRotationAngle = -45; rangeBarSeries.VerticalAxis.LabelFitMode = AxisLabelFitMode.Rotate; LinearAxis verticalAxis = chart.View.Axes.Get<LinearAxis>(1); verticalAxis.Minimum = 0; //Minutes 0:00 verticalAxis.Maximum = 1380; //Minutes 23:00 verticalAxis.MajorStep = 60; //60 minutes in an hour }

 

 private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)
        {
            RangeDataPoint dp = e.DataPoint as RangeDataPoint;
            if (dp != null)
            {
                e.Text = dp.High + " " + dp.Low;
            }
        }


3 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 11 Jun 2021, 09:03 AM

Hi,

RadChartView offers the ChartTooltipController for showing tooltips. The DataPointTooltipTextNeeded event that the ChartTooltipController has is  a suitable place for changing the precalculated text. More information is available in the following help article:

https://docs.telerik.com/devtools/winforms/controls/chartview/features/tooltip 

 

            ChartTooltipController tooltipController = new ChartTooltipController();
            tooltipController.DataPointTooltipTextNeeded += tooltipController_DataPointTooltipTextNeeded;
            this.radChartView1.Controllers.Add(tooltipController);

        private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)
        {
            RangeDataPoint dp = e.DataPoint as RangeDataPoint;
            if (dp!=null)
            {
                e.Text = dp.High + " " + dp.Low;
            }
        }

I would like to note that RadChartView provides a trackball behavior. This controller can display a vertical line across the chart plot area and also to display little visual indicators (circles by default) at points where the trackball line crosses the visualization of a series object. Please refer to the following help article:

https://docs.telerik.com/devtools/winforms/controls/chartview/features/trackball

Feel free to use this approach which suits your requirements best.

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 11 Jun 2021, 09:44 AM

Thanks for the help . But the event doesnt get triggered when i hover over a datapoint . Am i missing anything here?
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 11 Jun 2021, 10:09 AM

Hello,

I have attached my sample project for your reference. Please give it a try and see how it works on your end. The below screenshot illustrates the observed result on my end:

Am I missing something? Could you please specify the exact steps how to reproduce the problem with the sample project?

I am looking forward to your reply.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 11 Jun 2021, 10:58 AM

Yes sure . Let me add my main code on top of the question for reference . I have done the same steps ( i hope) as your solution.
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 14 Jun 2021, 10:41 AM | edited

I think due to the angle rotated chart by 90 degrees the tooltips show way off and sometime hide the tooltips. Any way of showing the tooltip directly on top . Attached is the screenshot of the same. Tooltip.jpg
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 15 Jun 2021, 12:56 PM

Hello,

I have reviewed the updated code snippet in your initial post and modified my sample project accordingly. 

Indeed, the applied AngelTransform to the chart affects the trackball. The trackball is designed to be moved horizontally according to the horizontal axis. You can rotate tre trackball by using the following custom implementation which result is illustrated in the attached gif file. Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify and extend it in a way which suits your custom requirements best: 

        public RadForm1()
        {
            InitializeComponent();

            RangeBarSeries rangeBarSeries = new RangeBarSeries(); 
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(10, 7, DateTime.Now.Date));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(6, 3, DateTime.Now.Date));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(8, 5, DateTime.Now.Date.AddDays(1)));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(12, 9, DateTime.Now.Date.AddDays(2)));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(8, 7, DateTime.Now.Date.AddDays(3)));
            this.radChartView1.Series.Add(rangeBarSeries);

             
             radChartView1.Controllers.Add(new CustomChartTrackballController());

            this.radChartView1.ChartElement.AngleTransform = 90;

        }

        private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)
        {
            RangeDataPoint dp = e.DataPoint as RangeDataPoint;
            if (dp != null)
            {
                e.Text = dp.High + " " + dp.Low;
            }
        }

        public class CustomChartTrackballController : ChartTrackballController
        {
           
            public ViewResult Result
            {
                get
                {
                    FieldInfo fi = typeof(ChartTrackballController).GetField("result", BindingFlags.Instance | BindingFlags.NonPublic);
                    return (ViewResult)fi.GetValue(this);
                }
                set
                {
                    FieldInfo fi = typeof(ChartTrackballController).GetField("result", BindingFlags.Instance | BindingFlags.NonPublic);
                    fi.SetValue(this, value);
                }
            }

            protected override ActionResult OnMouseMove(MouseEventArgs e)
            {
                if (this.Area.View == null)
                {
                    return Controller.Empty;
                }

                double panX = ((IChartView)this.Area.View).PlotOriginX;
                double panY = ((IChartView)this.Area.View).PlotOriginY;
                PointF searchLocation = new Point();
                searchLocation.X = (float)(e.Location.Y - this.Area.View.Viewport.Y - panY);
                searchLocation.Y = (float)(e.Location.X - this.Area.View.Viewport.X - panX);

                this.MoveTrackball(searchLocation);
                this.Result.ShouldInvalidate = true;

                return this.Result;
            }
         
        }

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Asked by
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or