Tooltip for ChartSeriesItem in a RadChart

[AAA]

Hello Telerik, I've recently started using RadTooltip and RadChart, and I have to say the RadChart is amazing! All the requirements I have I can accomplish with the chart. I'm having trouble right now with setting up a tooltip to display on items of a series in the chart. I know this is possible using the RadToolTipManager or RadToolTip with AJAX but I'm having trouble getting this to work right. The content will be dynamic and it will be based on which item in the chart was selected.

Can you give me a rundown on what needs to be done to accomplish this? I looked at the documentation at http://www.telerik.com/help/radcontrols/prometheus/RadToolTipManagerOverview.html but it doesn't say how to get items in a series to have a tooltip. If you could give me an example or something I'd really appreciate it.

Thanks in advance.

[Georgi Tunev]

Hello,

I've attached to this thread a small, simple example that shows what the approach should be in this case. The main difficulty in such scenario is that in general image map's areas do not have IDs - and the RadToolTip needs an ID in order to tooltipify the corresponding element.
To work around that issue, we've added a small Javascript function that finds the areas in the ImageMap that is rendered on the page and assign IDs to it. After that, based on the assigned ID we tooltipify the areas.

From this point on, we will need some additional information from you regarding the the dynamic content you want to set. Is it text only, or you want to visualize some data in the RadToolTip (e.g. use Ajax)? This will help us provide you with the most suitable solution.



Regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[AAA]

Hello Georgi Tunev,

Thank you for your reply. I downloaded your code and I see how you're trying to define an id for each item in the chart. I wasn't sure what imRadChart1 was, (the chart id is RadChart1 and I plugged that value instead of imRadChart1 and it still didn't work).

I'm creating series items in the code behind when the user loads a page or chooses a different set of options. I need to be able to display information about the series item they selected....and I guess it will all be text data (so no visual items like buttons etc).

I'll continue experimenting with the code you gave me and if I figure something out I'll let you know.

Thanks

[AAA]

After looking through your code as well as the telerik code, I see what you were trying to do, you were trying to get the elements out of the area field which belongs to the map, and assigning them id's. But in my case I don't have a map and and an area field generated. I get an img field with a usemap attribute when i view the html output of my page.....but the map and area are not generated. Am I missing something?

[AAA]

Hello Telerik, after using your code and tweaking things, I can get the tooltip under the activeregion property to work fine for individual chart items. Apparently I had to set series.pointmark.visible to true. I also got the ajax tooltip with a tooltipmanager to work for individual items using your code. I'm still having one more problem however. My chart works fine with tooltips (with the tooltipmanager) the first time it is loaded. Then if i update the chart, like if add or remove items from the chart, the tooltips stop working.

I have added an AjaxUpdate event handler for the tooltipmanager in my code...and it runs successfully for individual chart items the first time chart loads but not after the chart is updated with new items. However the other kind of tooltip, SeriesItem.Appearence.ToolTip works perfectly all the time. But the latter can not produce dynamic content...so i need to get the tooltipmanager to work.

Do you know what I should do from here? I'm a lot closer to finishing this than i was earlier.

Thanks a lot

[Georgi Tunev]

Hi,

Can you please open a new support ticket and send me a project which shows your progress with this issue? Just zip the project (make sure that it can be run and that it is not missing any files) and attach it to the support ticket. I will check it and will do my best to help you right away.

 

Sincerely yours,

Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[manoj]

Hello Telerik, I've recently started using Tooltip in  RadChart item. I'm having trouble right now with setting up a tooltip to display on items of a series in the chart.The content will be dynamic and it will be based on which item in the chart was selected.and change the tool tip.i send the Pictures.PLZ help about this problem how to solve it.


Thanks
-------

[Svetlina Anati]

Hi AAA,

 I prepared for you a test demo which uses a RadToolTipManager control to dynamically load data through AJAX. Please, examine it and use as a start point for your implementation.

Greetings,
Svetlina
the Telerik team

[Alberto]

hi.
i have the same problem.
i've a radchart in a ajaxpanel and a radtooltipmanager.
i add to tooltipmanager all radchart item in codebehind.
i use your javascript to set radchart item id and in code behind i set item.ActiveRegion.Tooltip to each radchart item
if i don't use ajax it is ok but with ajax not working.
with ajax i have to:
- clear radchart items
- add new items
- set item.ActiveRegion.Tooltip to each items
- with javascript i set id to radchart item
but it dos'nt work.
when i use ajax tolltip targetcontrols are not update.
i have always the first targetcontrol loaded.
can you help me please?
thanks

[Marin Bratanov]

Hello Alberto,

Can you try the regular ASP UpdatePanel control with UpdateMode set to Conditional to wrap the chart and the tooltip manager instead of the RadAjaxPanel? I am asking this to try to simplify the case - it seems that not all the necessary data is sent from the server which is usually due to an AJAX configuration that does not return all the necessary data.

In case you are re-adding targets for each item you first need to clear the preivous targets so that you do not get duplicates. This is done by calling the Clear() method of the TargetControls collection of the tooltip manager in the code-behind just before you start re-adding new targets. Could you give it a try and get back to us with the findings?

I also believe you may find the following demos useful: RadToolTipManager with ImageMap which shows the basic approach and Item Tooltips in Radchart that loads a predefined string given in the tooltip property of the items. Both these demos show the functionality that can be achieved. As a further extension of the logic you can try adding an onmouseover handler to the hotspots and use the TooltipManager's Client-side API to initiate the showing of a tooltip, which can help you avoid predefining target controls on the server.


Kind regards,
Marin Bratanov
the Telerik team

[Alberto]

hi
i've done a simple program.
can you use this and try to fix please?
i have  a readchart with 1 serie and 6 items.
when you click the button it clear the items and add 6 new items with random values.
the tooltip works only the first time (because it loads the javascript).
i wait for your answer.
Tooltip.ascx write only the item number (i don't write here becausa is not important)


thanks
------------------------------------- default.aspx---------------------------------------------------------------------------------------
    </telerik:RadToolTipManager>


        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" MinDisplayTime="400">
        </telerik:RadAjaxLoadingPanel>


        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
       
       <ContentTemplate>
           <telerik:RadChart ID="RadChart1" runat="server" ClientIDMode="Static">
           <Series>
                <telerik:ChartSeries Name="Series 1">
                    <Items>
                        <telerik:ChartSeriesItem ActiveRegion-Tooltip="area0" Name="Item 1" YValue="50">
                        </telerik:ChartSeriesItem>
                        <telerik:ChartSeriesItem ActiveRegion-Tooltip="area1" Name="Item 1" YValue="30">
                        </telerik:ChartSeriesItem>
                        <telerik:ChartSeriesItem ActiveRegion-Tooltip="area2" Name="Item 1" YValue="20">
                        </telerik:ChartSeriesItem>
                    </Items>
                </telerik:ChartSeries>
            </Series>
        </telerik:RadChart>


        <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" OnClick="RadButton1_Click">
        </telerik:RadButton>
        </ContentTemplate>
         </asp:UpdatePanel>
       
        
       
          <script type="text/javascript">
                     

              
                  var map = document.getElementsByName("imRadChart1")[0];
                  var areas = map.getElementsByTagName("area");


                  for (var i = 0; i < areas.length; i++) {
                      var area = areas[i];
                      area.setAttribute("id", "area" + i);
                      area.removeAttribute("title");
                      area.removeAttribute("alt");
                  }
              


    </script>

    </div>
    </form>
</body>
</html>
----------------------------------------------------------------------------------------------------

default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Charting;
using Telerik.Charting.Styles;
using Telerik.Charting;
using Telerik.Charting.Styles;
using Telerik.Web.UI;


namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                UpdateTooltipManager();
            }
        }




        protected void RadButton1_Click(object sender, EventArgs e)
        {
            RadChart1.Series.Clear();
            RadChart1.Series.Add(new ChartSeries("serie", ChartSeriesType.Bar));


            for (int i = 0; i < 6; i++)
            {
                Random RandomClass = new Random();
                int RandomNumber = RandomClass.Next(4, 140);
                RadChart1.Series.First().AddItem(RandomNumber);
                RadChart1.Series.First().Items.Last().ActiveRegion.Tooltip = "AREA" + i.ToString();
            }
            UpdateTooltipManager();
        }


        protected void UpdateTooltipManager()
        {
            RadToolTipManager1.TargetControls.Clear();


            for (int i = 0; i < RadChart1.Series.First().Items.Count; i++)
            {
                RadToolTipManager1.TargetControls.Add("area" + i.ToString(), i.ToString(), true);
                
            }
        }




        protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
        {
            this.UpdateToolTip(args.Value, args.UpdatePanel);
        }
        private void UpdateToolTip(string elementID, UpdatePanel panel)
        {
            Control ctrl = Page.LoadControl("Tooltip.ascx");
            panel.ContentTemplateContainer.Controls.Add(ctrl);
            Tooltip details = (Tooltip)ctrl;
            details.n = elementID;
            
          
        }


       
    }
}

[Marin Bratanov]

Hi Alberto,

Your problem stems from two factors
1) you do not update the ToolTipManager with the new targerts
2) you do not call the function that adds IDs to the image map elements

What you need to do is:
1) add the tooltipManager to the update panel, e.g.:

. . . . . . .
        </Series>
            </telerik:RadChart>
            <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" OnClick="RadButton1_Click">
            </telerik:RadButton>
            <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" OnAjaxUpdate="OnAjaxUpdate"
                Width="100px" Height="50px">
            </telerik:RadToolTipManager>
        </ContentTemplate>
    </asp:UpdatePanel>

2) put the JS code in a function and call it from the button click event as well:

function addIdsToImageMap()
{
    var map = document.getElementsByName("imRadChart1")[0];
    var areas = map.getElementsByTagName("area");


    for (var i = 0; i < areas.length; i++)
    {
        var area = areas[i];
        area.setAttribute("id", "area" + i);
        area.removeAttribute("title");
        area.removeAttribute("alt");
    }
}
addIdsToImageMap();

and:

//the loop where you add items goes here
UpdateTooltipManager();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "addIdsToImageMap();", true);

Greetings,
Marin Bratanov
the Telerik team

[Alberto]

hi,
thanks for your reply!
now the  addIdsToImageMap()  works. (my addidstoimagemap() is little different because my area has a random name and not imRadChart1, i try to set clientid=static but it doesn't work. )
I check with debugger and updateTooltipManager() set the new control ids and the i.ToString()  value
 properly every time, but i have this propblem:
- the fist time i load the page  all is ok (tooltip too)
- a click button and new chart items are loaded.
- now if i click on item came out the tooltip relative to the first chart item and not the new one.
the value  i.ToString()  passed  with RadToolTipManager1.TargetControls.Add("area" + i.ToString(), i.ToString(), true);  is relative to the first chart instead to second one,
why?
thanks

[Marin Bratanov]

Hi Alberto,

 I am attaching here a sample build on  your code that works correctly on my end.  I advise that you debug your code and see where your counters are not implemented properly, as it seems you are only adding the first item as a target control. You can compare it with my sample to see where the difference originates. I would advise that you make sure the correct ID of the charts is used in the JavaScript function - you can see how the image map's id is build by prefixing the chart's ClientID with "im".


Kind regards,
Marin Bratanov
the Telerik team