Tooltip for multiseries

[[Nean]]

Hi everyone,

I use a RadChart control in my WinForm application. In this control I have several graphic series. I have a tootltip showing in every serie. But when a chart is over another, for example a line chart over a bar chart, I can't have the tooltip of the line chart, it always appear the tooltip of the bar chart which is backward. How can I do that ?

Thanks,

[Nean]

[George Saveliev]

Any answer to this?

Thanks.

[Tsvetie]

Hi George Saveliev,
I am not quite sure I understand the question completely. Could you please explain in detail the problem that you have and which version of suite you use. It will be best, if you open a formal support ticket and send us a simple running project that demonstrates the problem that you face as well.

Kind regards,
Tsvetie
the Telerik team

[George Saveliev]

Hello!

I am sorry for a delay with response.

I use the RadControls v.2011.1.11.427.
Let's look at the following simple code:

using System.Windows.Forms;
using Telerik.Charting;
using Telerik.WinControls.UI;

namespace ChartTest
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            radChart1.Series.Clear();

            ChartSeries s1 = new ChartSeries("Bars", ChartSeriesType.Bar);
            s1.Appearance.ShowLabels = false;
            radChart1.Series.Add(s1);

            ChartSeries s2 = new ChartSeries("Line", ChartSeriesType.Line);
            s2.Appearance.PointMark.Visible = true;
            s2.Appearance.ShowLabels = false;
            radChart1.Series.Add(s2);

            double[] values = new double[] { 6, 8, 10, 8, 12 };
            foreach (double v in values)
            {
                ChartSeriesItem item1 = new ChartSeriesItem(v);
                item1.ActiveRegion.Tooltip = "Bars: " + item1.YValue.ToString();
                s1.Items.Add(item1);

                ChartSeriesItem item2 = new ChartSeriesItem(v / 2);
                item2.ActiveRegion.Tooltip = "Line: " + item2.YValue.ToString();
                s2.Items.Add(item2);
            }
            radChart1.Refresh();
        }
    }
}

The Bars series is added before the Line one. This allows to show the line in front of bars. But the tooltip of the Bars series override the tooltip of the Line one. See attached img1.jpg.

If I modify the code and add the Line series before the Bars one, the line is drawn behind the bars but the tooltip of the Line series is presented.  See attached img2.jpg.

It seems that the lookup order of the Active Regions should be reversed.

Thank you.

[Tsvetie]

Hello George Saveliev,
Thank you for the provided code. We are aware of this problem and it is already logged in our database. However, I cannot give a precise estimate, when it will be fixed.

All the best,
Tsvetie
the Telerik team

[George]

Tsvetie,

I notice this same bug is present in the ASP.Net AJAX controls.  We have been waiting for about a year on this fix.  I look forward to a response to this thread regarding any updates.

Thank you,

Sean

[Tsvetie]

Hello Sean Jaeger,
I tested the same code with the Q1 2011 version of Telerik.Web.UI in IE6-IE9 and FF and I was not able to reproduce the problem. In case your setup is different or I am missing something, you should be able to implement a simple fix with JavaScript. Basically, tooltips in RadChart are implemented by image maps and areas.

The JavaScript fix should be similar to the below code fragment:

function pageLoad() {
            var imageMap = $get("im<%= RadChart1.ClientID %>");
            var areaElements = imageMap.getElementsByTagName("AREA");

            for (var i = areaElements.length; i > 0; i--) {
                imageMap.insertBefore(areaElements[areaElements.length - 1], areaElements[areaElements.length - i]);
            }
        }

Regards,
Tsvetie
the Telerik team

[Edgar]

I got to this post because i want to add tooltips to my multiple series (2 bars and 3 lines) and is working but shows the same problem. it shows the bars tooltip and not the one in the line when the line is on the bar if there is no bar it works fine y added the script that Tsvetie posted with a call in the on load of the body but is not working what is missing?? i use the ASP.NET AJAX components version 2012.3.1016.35 components working with IE 8.0.6001.18702 attach pics of the problem

function pageLoad() {
    var imageMap = $get("im<%= RadChart1.ClientID %>");
    var areaElements = imageMap.getElementsByTagName("AREA");

    for (var i = areaElements.length; i > 0; i--) {
        imageMap.insertBefore(areaElements[areaElements.length - 1], areaElements[areaElements.length - i]);
    }
}

[Marin Bratanov]

Hello Edgar,

Are you using this onlie demo as base? If so, the most likely reason is that this script changes the hotspots in the Sys.Application.Load event while the RadToolTipManager attaches the tooltips in the Sys.Application.Init, which is earlier.

What I can suggest is that you take the approach from the demo and set proper tooltips from the code-behind, so you may not need this script.

Another option is to execute it earlier in the lifecycle of the page - move it to the end of the form and remove the pageLoad shortcut. Alternatively, you can try calling the tooltipify() method of the RadToolTipManager after this script has run if you keep it in the Sys.Application.Load event.

Yet another approach I can suggest is using RadHtmlChart and the ClientTemplates for the tooltips.


Greetings,
Marin Bratanov
the Telerik team