Tooltip for ChartSeriesItem in a RadChart

14 posts, 0 answers
  1. AAA
    AAA avatar
    22 posts
    Member since:
    Nov 2007

    Posted 12 Nov 2007 Link to this post

    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.
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 16 Nov 2007 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. AAA
    AAA avatar
    22 posts
    Member since:
    Nov 2007

    Posted 19 Nov 2007 Link to this post

    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
  5. AAA
    AAA avatar
    22 posts
    Member since:
    Nov 2007

    Posted 19 Nov 2007 Link to this post

    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?
  6. AAA
    AAA avatar
    22 posts
    Member since:
    Nov 2007

    Posted 20 Nov 2007 Link to this post

    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
  7. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 22 Nov 2007 Link to this post

    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
  8. manoj
    manoj avatar
    4 posts
    Member since:
    Nov 2010

    Posted 20 Jan 2011 Link to this post

    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
    -------
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 25 Jan 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  10. Alberto
    Alberto avatar
    7 posts
    Member since:
    May 2012

    Posted 08 Jun 2012 Link to this post

    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
  11. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 11 Jun 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  12. Alberto
    Alberto avatar
    7 posts
    Member since:
    May 2012

    Posted 20 Jun 2012 Link to this post

    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;
                
              
            }


           
        }
    }
  13. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 21 Jun 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  14. Alberto
    Alberto avatar
    7 posts
    Member since:
    May 2012

    Posted 21 Jun 2012 Link to this post

    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
  15. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 22 Jun 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017