Custom Tooltips

[Josh]

I am using the new ChartView (scatter data series) and I would like to know if there is a way to use custom tooltips on the data points instead of the regular XValue and YValue.
Thanks

[Ivan Petrov]

Hello Josh,

Thank you for writing.

Currently, RadChartView does not offer support for tooltips. We have tooltip support in our plans and we would appreciate any feedback on what feature you would like to see in it.

If you are referring to the trackball controller, in its current version it cannot be modified, but we are working on it and we will introduce a fully customizable trackball in our next release.

I hope this will be informative. Do not hesitate to write back with any further questions.
 
Kind regards,
Ivan Petrov
the Telerik team

[Josh]

Hello Ivan,

I was referring to the tooltips in this tutorial. I was able to get the tooltips showing by adding a ChartToolTipController but they only show XValue and YValue. I wish to change the text that is displayed by adding some extra info from the data record.

[Ivan Petrov]

Hello Josh,

Thank you for writing back.

The situation with the tooltip support of RadChartView is pretty much the same as with the trackball. We are currently working on a new fully customizable version of the controller, which will allow developers to tailor fit the controller to their needs. As I said in my previous post we would welcome any feedback on features you would like to see in the tooltip controller.

I hope this will be useful. Should you have further questions, I would be glad to help.
 
Regards,
Ivan Petrov
the Telerik team

[Michelle]

Hi Ivan,

Are we able to change the tooltip text size in the radchartview?

[Stefan]

Hello Michelle,

Currently, this is not possible. I will add a feature request for this in PITS so you can track its progress. Feel free to vote for it here: http://www.telerik.com/support/pits.aspx#/public/winforms/12576.

Regards,
Stefan
the Telerik team

[Robert Schoen]

Has there been any progress with tooltips in Charts?   The last update I see for this was in 2012.   I am needing to customize the tool tip when my customer hovers over a bar section or area.

[Dess | Tech Support Engineer, Principal]

Hello Robert ,

Thank you for contacting Telerik Support.

We introduced the referred feature in Q2 2013 (version 2013.2.612). Here is a sample code snippet, demonstrating how to customize the standard ToolTip:

public Form1()
{
    InitializeComponent();
    radChartView1.AreaType = ChartAreaType.Cartesian;
    BarSeries barSeries1 = new BarSeries();
    barSeries1.DataPoints.Add(new CategoricalDataPoint(10, "1"));
    barSeries1.DataPoints.Add(new CategoricalDataPoint(4, "2"));
    barSeries1.DataPoints.Add(new CategoricalDataPoint(23, "3"));
    barSeries1.DataPoints.Add(new CategoricalDataPoint(11, "4"));
    barSeries1.DataPoints.Add(new CategoricalDataPoint(15, "5"));
    barSeries1.DataPoints.Add(new CategoricalDataPoint(10, "6"));
    barSeries1.DataPoints.Add(new CategoricalDataPoint(4, "7"));
    barSeries1.DataPoints.Add(new CategoricalDataPoint(7, "8"));
    barSeries1.DataPoints.Add(new CategoricalDataPoint(11, "9"));
    barSeries1.DataPoints.Add(new CategoricalDataPoint(15, "10"));
    radChartView1.Series.Add(barSeries1);

    BarSeries barSeries2 = new BarSeries();
    barSeries2.DataPoints.Add(new CategoricalDataPoint(6, "1"));
    barSeries2.DataPoints.Add(new CategoricalDataPoint(20, "2"));
    barSeries2.DataPoints.Add(new CategoricalDataPoint(7, "3"));
    barSeries2.DataPoints.Add(new CategoricalDataPoint(8, "4"));
    barSeries2.DataPoints.Add(new CategoricalDataPoint(4, "5"));
    barSeries2.DataPoints.Add(new CategoricalDataPoint(10, "6"));
    barSeries2.DataPoints.Add(new CategoricalDataPoint(24, "7"));
    barSeries2.DataPoints.Add(new CategoricalDataPoint(17, "8"));
    barSeries2.DataPoints.Add(new CategoricalDataPoint(18, "9"));
    barSeries2.DataPoints.Add(new CategoricalDataPoint(43, "10"));
    radChartView1.Series.Add(barSeries2);

    ChartTooltipController toolTipController = new ChartTooltipController();
    toolTipController.DataPointTooltipTextNeeded += toolTipController_DataPointTooltipTextNeeded;
    radChartView1.Controllers.Add(toolTipController);
}

private void toolTipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)
{
    e.Tooltip.BackColor = Color.Yellow;
    e.Tooltip.ForeColor = Color.Red;

    e.Tooltip.OwnerDraw = true;
    e.Tooltip.Draw += ToolTip_Draw;
}

private void ToolTip_Draw(object sender, DrawToolTipEventArgs e)
{
    ToolTip toolTip = sender as ToolTip;

    e.Graphics.FillRectangle(new SolidBrush(toolTip.BackColor), e.Bounds);
    e.DrawBorder();
    e.DrawText(TextFormatFlags.Left );
}

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

 

[John]

Hi,
I'm using custom tooltips on a scatterlineseries/ScatterDatapoints chartview by adding a new ChartTooltipController and handling the DataPointTooltipTextneeded event - as outlined in the previous response.  The tooltip includes the series name and the x,y coordinates.  However when I hover near a point it often displays the tooltip for the wrong point (which I can tell from the x,y coordinate).  How can I assure I'm getting the tooltip for the closest datapoint?  The x coordinates have large spacial separation and often it displays tooltips for points nowhere near the mouse position. 

One other tooltip question - I was not able to display tooltips for Categoricaldatapoints.  Do tooltips work for for this type?

Thanks,

John

[Dess | Tech Support Engineer, Principal]

Hello John,

Thank you for writing.

I confirm that incorrect tooltip is displayed for ScatterDataPoints. I have logged it in our Feedback Portal. You can track its progress, subscribe for status changes and add your vote/comment to it on the following link - Feedback Item.

Currently, the possible workaround that I can suggest is to use custom renderer:

public Form1()
{
    InitializeComponent();

    this.radChartView1.CreateRenderer += radChartView1_CreateRenderer;
}
private void radChartView1_CreateRenderer(object sender, ChartViewCreateRendererEventArgs e)
{
    e.Renderer = new CustomCartesianRenderer(e.Area as CartesianArea);
}

public class CustomCartesianRenderer : CartesianRenderer
{
    public CustomCartesianRenderer(CartesianArea area) : base(area)
    {
    }

    protected override void Initialize()
    {
        base.Initialize();

        for (int i = 0; i < this.DrawParts.Count; i++)
        {
            ScatterSeriesDrawPart scatterPart = this.DrawParts[i] as ScatterSeriesDrawPart;
            if (scatterPart != null)
            {
                this.DrawParts[i] = new CustomScatterSeriesDrawPart((ScatterLineSeries)scatterPart.Element, this);
            }
        }
    }
}

public class CustomScatterSeriesDrawPart : ScatterLineSeriesDrawPart
{
    public CustomScatterSeriesDrawPart(ScatterLineSeries series, IChartRenderer renderer)
        : base(series, renderer)
    {
    }

    public override DataPoint HitTest(Point location)
    {
        for (int i = 0; i < this.Element.DataPoints.Count; i++)
        {
            RadRect slot = this.Element.DataPoints[i].LayoutSlot;
            float pointHalfWidth = this.Element.PointSize.Width / 2;
            float pointHalfHeight = this.Element.PointSize.Height / 2;

            RectangleF scatterBounds = new RectangleF((float)(this.OffsetX + slot.X - pointHalfWidth),
                (float)(this.OffsetY + slot.Y - pointHalfHeight), this.Element.PointSize.Width, this.Element.PointSize.Height);

            if (scatterBounds.Contains(location.X, location.Y))
            {
                return this.Element.DataPoints[i];
            }
        }

        return null;
    }
}

As to the tooltip functionality for CategoricalDataPoints, currently, it is not supported. However, it is a reasonable request and I have logged it in our Feedback Portal as well. You can track its progress, subscribe for status changes and add your vote/comment to it on the following link - Feedback Item.

I have also added 1000 Telerik points for reporting this.

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

 

 

[John]

Hi,
Thanks for your response.  I am having a problem implementing the code from your previous post.  DataPoints does not have a Count property and is not indexible.  See attached.

Thanks for your help.
John

[Dess | Tech Support Engineer, Principal]

Hello John,

Thank you for writing back.

I have attached my sample project, containing the provided code from my previous post. This solution is suitable for our latest version. Could you please share in which version you experience difficulties in implementing the workaround?

I am looking forward to your reply.

Regards,
Desislava
Telerik

 

 

[George]

Hi All,

On the issue of presenting custom tooltips, I have used your suggestion to create and use a customtooltip controller, however I have an issue at the event level to determine the XValue of the specific data point, which in my case is a date from CategoricalDataPoint of an DateTimeCategoricalAxis.

         

private void toolTipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)
{
    CategoricalDataPoint point = e.DataPoint as CategoricalDataPoint;

    e.Text = point.Value //return only Yaxis value!

        //e.Tooltip.BackColor = Color.Yellow;
    //e.Tooltip.ForeColor = Color.Red;
    //e.Tooltip.OwnerDraw = true;

}

I need to get the Date part X value, in addition to the Y value of the point, in order to format a special tooltip text block. Can you please help me on how I can do this?

 

Regards,

 

George
 

 

 

[Stefan]

Hello George,

The dataPoint has a Category property from where you can access its category:

e.Text = point.Value.ToString() + " - " + point.Category;

I hope that you find this information useful. Should you have any other questions, do not hesitate to contact us.

Regards,
Stefan
Telerik

 

 

[George]

Thanks,

... maybe you can also look at this post also I face problems with,

 

http://www.telerik.com/forums/charts-being-cropped-left-and-right-do-not-display-properly

[Dipak]

I am trying to show XValue and YValue with tooltip on mouse hover event. Can you please send me your part of code for my reference?

[Dess | Tech Support Engineer, Principal]

Hello, Dipak, 

You can find below a sample code snippet how to handle the ChartTooltipController.DataPointTooltipTextNeeded event and specify what text to be displaye din the tooltip considering the X and Y values of the ScatterDataPoint for example:

public RadForm1()
{
    InitializeComponent();

    ScatterSeries scatterSeries = new ScatterSeries();
    scatterSeries.Name = "";
    scatterSeries.DataPoints.Add(new ScatterDataPoint(15, 19));
    scatterSeries.DataPoints.Add(new ScatterDataPoint(18, 10));
    scatterSeries.DataPoints.Add(new ScatterDataPoint(13, 15));
    scatterSeries.DataPoints.Add(new ScatterDataPoint(10, 8));
    scatterSeries.DataPoints.Add(new ScatterDataPoint(5, 12));
    scatterSeries.PointSize = new SizeF(8, 8);
    this.radChartView1.Series.Add(scatterSeries);

    ScatterSeries scatterSeries2 = new ScatterSeries();
    scatterSeries2.Name = "";
    scatterSeries2.DataPoints.Add(new ScatterDataPoint(20, 20));
    scatterSeries2.DataPoints.Add(new ScatterDataPoint(15, 10));
    scatterSeries2.DataPoints.Add(new ScatterDataPoint(7, 6));
    scatterSeries2.DataPoints.Add(new ScatterDataPoint(18, 22));
    scatterSeries2.DataPoints.Add(new ScatterDataPoint(10, 10));
    scatterSeries2.PointSize = new SizeF(8, 8);
    scatterSeries.Shape = new RoundRectShape(0);
    this.radChartView1.Series.Add(scatterSeries2);

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

private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)
{
    ScatterDataPoint dp = e.DataPoint as ScatterDataPoint;
    if (dp != null)
    {
        e.Text = "X: " + dp.XValue + " Y: " + dp.YValue;
    }
}

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

[Dipak]

My apology. I want the solution for line chart. Please suggest how to display tooltip for line chart datapoints. "LineSeries" is the type I am using.

[Dess | Tech Support Engineer, Principal]

Hello, Dipak, 

You may follow a similar approach for the LineSeries as well. It is just necessary to cast the DataPointTooltipTextNeededEventArgs.DataPoint to CategoricalDataPoint. Here is the modified code snippet:

public RadForm1()
{
    InitializeComponent();

    LineSeries lineSeries = new LineSeries();
    lineSeries.PointSize = new SizeF(8, 8);
    lineSeries.DataPoints.Add(new CategoricalDataPoint(20, "Jan"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(22, "Apr"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(12, "Jul"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(19, "Oct"));
    this.radChartView1.Series.Add(lineSeries);
    LineSeries lineSeries2 = new LineSeries();
    lineSeries2.PointSize = new SizeF(8, 8);
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(18, "Jan"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(15, "Apr"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(17, "Jul"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(22, "Oct"));
    this.radChartView1.Series.Add(lineSeries2);

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

private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)
{
    CategoricalDataPoint dp = e.DataPoint as CategoricalDataPoint;
    if (dp != null)
    {
        e.Text = "V- " + dp.Value + " C- " + dp.Category;
    }
}

I hope this information helps. 

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

[Dipak]

Thanks. It worked.

Continue to above question if I want to show two different tooltips for two series what will be the way?

Consider above chart which has black and red plotting. for red I want to show "Signal: " + "Time: " and for black "Position: " +"Time: ".

 

Thanks in advance.

[Dess | Tech Support Engineer, Principal]

Hello, Dipak, 

The DataPointTooltipTextNeeded event gives you the freedom to control what text to be displayed. So when you hover a certain DataPoint, the event is fired and you can set the DataPointTooltipTextNeededEventArgs.Text considering the target DataPointTooltipTextNeededEventArgs.DataPoint. You can find to which ChartSeries the target point is associated and format the string respectively. You can find below a sample code snippet how to determine for which series you are showing a tool-tip:

public RadForm1()
{
    InitializeComponent();

    LineSeries lineSeries = new LineSeries();
    lineSeries.Name = "q1";
    lineSeries.PointSize = new SizeF(8, 8);
    lineSeries.DataPoints.Add(new CategoricalDataPoint(20, "Jan"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(22, "Apr"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(12, "Jul"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(19, "Oct"));
    this.radChartView1.Series.Add(lineSeries);
    LineSeries lineSeries2 = new LineSeries();
    lineSeries2.Name = "q2";
    lineSeries2.PointSize = new SizeF(8, 8);
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(18, "Jan"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(15, "Apr"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(17, "Jul"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(22, "Oct"));
    this.radChartView1.Series.Add(lineSeries2);

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

private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)
{
    CategoricalDataPoint dp = e.DataPoint as CategoricalDataPoint;
    if (dp != null)
    {
        e.Text = "V- " + dp.Value + " C- " + dp.Category;

        foreach (ChartSeries series in this.radChartView1.Series)
        {
            if (series.DataPoints.Contains(dp))
            {
                Console.WriteLine(series.Name);
            }
        }
    }
}

I hope this information helps.

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