Tooltips on HTMLChart

21 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 09 Jun 2014 Link to this post

    I'm using an HTMLChart inside a dock,  tooltips that appear above the chart end up under the bounds of the raddock and are visibly cut off.  

    I'm trying to edit the css in chrome adding a z-index:100000 at the various points that I'd have thought that the chart would be but it still fails.

    Any pointers?

    Regards

    Jon
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 09 Jun 2014 Link to this post

    Hello Jon,

    In order for the content of the RadDock to be rendered properly, overflow property is set to the RadDock's wrapper. Therefore using RadDock as a wrapper control or any other control that uses the CSS overflow property, will prevent the setting of higher z-index to the tooltip from taking effect as it has a lower priority.

    What I can suggest, however, is that try one of the following approaches:
    • expand the RadHtmlChart's wrapper by setting higher width and height to the RadDock and align it to the center of the dock, so that there is enough space for the ToolTips to be rendered property.
    • or set position absolute to the RadHtmlChart and make sure that the width and height properties of the RadDock are set. For example:
    ASPX:
    <telerik:RadDock ID="RadDock1" runat="server" Width="450" Height="450">
        <ContentTemplate>
            <div style="width: 450px; height: 450px; position: absolute;">
                <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="450px" Height="450px">
    ...
                </telerik:RadHtmlChart>
            </div>
        </ContentTemplate>
    </telerik:RadDock>

        - or try setting some padding to the RadHtmlChart's tooltips through the _chartObject as follows:

    ASPX:
                    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="300px" Height="300px">
    ...
                    </telerik:RadHtmlChart>
    JavaScript:
    function pageLoad() {
      
        var chartObject = $find("<%=RadHtmlChart1.ClientID %>")._chartObject;
        chartObject._tooltip.chartPadding.top = 15;
        chartObject._tooltip.chartPadding.left = 15;
      
    }

    Setting such a padding, however, will affect all the tooltips located around the chart, so I can suggest to keep up either with the first approach or with the second one.

    There is, however, a special case when multiple RadDocks with RadHtmlChart controls are present on the page. For example if there are two RadDocks - the first RadDock is before the second one in the DOM tree and therefore setting higher z-index for the first chart will not take effect because both RadDocks have by default the same-zIndex, so that additionally created RadDocks will overlap the preceding ones.

    What I can suggest in that case is that you set higher zIndex for the RadDock which RadHtmlChart Series are hovered and then get back to the original zIndex. For example:

    JavaScript:
    <script>
        function OnClientSeriesHovered(sender, eventArgs) {
      
            var parentElement = sender.get_parent().get_element();
            parentElement.style.zIndex = 3001;
      
            setTimeout(function () { parentElement.style.zIndex = 3000 }, 2000);
        }
    </script>
    ASPX:
            <telerik:RadDock ID="RadDock1" runat="server" Width="300" Height="350">
                <ContentTemplate>
                    <div style="width: 300px; height: 350px; position: absolute;">
                        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="300px" Height="300px" OnClientSeriesHovered="OnClientSeriesHovered">
    ...
                        </telerik:RadHtmlChart>
                    </div>
                </ContentTemplate>
            </telerik:RadDock>


    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 09 Jun 2014 in reply to Danail Vasilev Link to this post

    Hi Danail

    Thanks for the comprehensive reply.  Unfortunately it's not working as I'd hope but as the prior system didn't use tooltips I can for now hide them and come back to this later on.

    I am seeing the tooltips outside of the main part of the dock suck as over the title but they do not overflow outside the dock at all.

    Regards

    Jon
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 10 Jun 2014 Link to this post

    Hi Jon,

    Could you please paste a small piece of code that reproduces that issue, so that I can make an investigation locally? If, however, the example that reproduces the issue is more complex it would be better to open a support ticket and attach it there.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 11 Jun 2014 in reply to Danail Vasilev Link to this post

    Hi Danail,

    I've managed to get your fix working for most of the site however on certain pages I still end up with a problem.  The pages in question have a raddock inside a spiltter in order to display a popup filter panel.  I have reduced the page down to a sample that demos the issue.  Run the code below and then hover over one of the rightmost chart circles.  You will see the tooltip get cut off and some scroll bars will appear.

    In the style text at the top are some entries that seem to resolve the issue - when I play with them in the browser.  The inclusion of them on the page doesn't fix the issue though.  

    Any thoughts?

    Regards

    Jon

    <head runat="server">
        <title>Reactive Task Dashboard Page</title>
        <style type="text/css" >
            .RadDockZone .RadDockZone_Black .rdVertical
            {
                overflow-y:visible ! important;
            }
            .RAD_SPLITTER_PANE_CONTENT_Radpane2
            {
                overflow:auto ! important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <telerik:RadStyleSheetManager ID="uxRadStyleSheetManager" Runat="server"></telerik:RadStyleSheetManager>
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="788" Height="543" Orientation="Horizontal" VisibleDuringInit="false" BorderSize="0"  Skin="Black" >
                <telerik:RadPane ID="Radpane2" runat="server" >
                    <telerik:RadDockZone runat="server" ID="uxTaskChartRadDockZone" Width="787" Height="331" style="border: none; padding: 0;">
                        <telerik:RadDock ID="uxChartsPanel" runat="server" Title="Activity charts" EnableRoundedCorners="False"  Skin="Black"
                            EnableAnimation="false" AutoPostBack="false" Resizable="false" DefaultCommands="None" EnableDrag="False"
                            Index="-1" Pinned="True" Tag="" Width="787" Height="323" >
                            <ContentTemplate>
                                <div style="width:768px;height:300px;position:absolute; ">
                                    <telerik:RadHtmlChart ID="uxTaskHtmlChart" runat="server" Height="300px" Width="768px" Skin="Black">
                                        <Legend>
                                            <Appearance Position="Right" />
                                        </Legend>
                                        <PlotArea>
                                            <Series>
                                                <telerik:LineSeries Name="KPI Score (%)">
                                                    <LabelsAppearance Visible="False" />
                                                    <TooltipsAppearance>
                                                        <ClientTemplate>
                                                            SOMETHING OR OTHER: #=value#%f wf ewfew fwewef
                                                        </ClientTemplate>
                                                    </TooltipsAppearance>
                                                    <Items>
                                                        <telerik:SeriesItem XValue ="0" YValue="100" />
                                                        <telerik:SeriesItem XValue ="1" YValue="50" />
                                                        <telerik:SeriesItem XValue ="2" YValue="100" />
                                                        <telerik:SeriesItem XValue ="3" YValue="100" />
                                                        <telerik:SeriesItem XValue ="4" YValue="100" />
                                                        <telerik:SeriesItem XValue ="5" YValue="100" />
                                                        <telerik:SeriesItem XValue ="6" YValue="100" />
                                                    </Items>
                                                </telerik:LineSeries>
                                            </Series>
                                        </PlotArea>
                                    </telerik:RadHtmlChart>
                                </div>
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </form>
    </body>
    </html>
  7. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 16 Jun 2014 Link to this post

    Hi Jon,

    The mentioned issue stems from the fact that RadDockZone and RadSplitter's RadPane have an overflow:auto property set by default, needed for the proper functionality and appearance of the controls. You can try to change the value of this property on OnClientSeriesHovered event and return its original value after some time out. For example:
    JavaScript:
    <script>
        function OnClientSeriesHovered(sender, eventArgs) {
            var chartElement = sender.get_element();
            chartElement.style.position = "absolute";
     
            var dockZoneElement = $get("<%=uxTaskChartRadDockZone.ClientID%>");
            dockZoneElement.style.overflowY = "initial";
     
            var splitterPaneContentElement = $get("<%=Radpane2.ClientID%>").children[0];
            splitterPaneContentElement.style.overflow = "initial";
     
            setTimeout(function () {
                chartElement.style.position = "relative";
                dockZoneElement.style.overflowY = "auto";
                splitterPaneContentElement.style.overflow = "auto";
            }, 1000);
        }
    </script>
    ASPX:
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="788" Height="543" Orientation="Horizontal" VisibleDuringInit="false" BorderSize="0" Skin="Black">
        <telerik:RadPane ID="Radpane2" runat="server">
            <telerik:RadDockZone runat="server" ID="uxTaskChartRadDockZone" Width="787" Height="331" Style="border: none; padding: 0;">
                <telerik:RadDock ID="uxChartsPanel" runat="server" Title="Activity charts" EnableRoundedCorners="False" Skin="Black"
                    EnableAnimation="false" AutoPostBack="false" Resizable="false" DefaultCommands="None" EnableDrag="False"
                    Index="-1" Pinned="True" Tag="" Width="787" Height="323">
                    <ContentTemplate>
                        <telerik:RadHtmlChart ID="uxTaskHtmlChart" runat="server" Height="300px" Width="768px" Skin="Black" OnClientSeriesHovered="OnClientSeriesHovered">
                            <Legend>
                                <Appearance Position="Right" />
                            </Legend>
                            <PlotArea>
                                <Series>
                                    <telerik:LineSeries Name="KPI Score (%)">
                                        <LabelsAppearance Visible="False" />
                                        <TooltipsAppearance>
                                            <ClientTemplate>
                                                    SOMETHING OR OTHER: #=value#%f wf ewfew fwewef
                                            </ClientTemplate>
                                        </TooltipsAppearance>
                                        <Items>
                                            <telerik:SeriesItem XValue="0" YValue="100" />
                                            <telerik:SeriesItem XValue="1" YValue="50" />
                                            <telerik:SeriesItem XValue="2" YValue="100" />
                                            <telerik:SeriesItem XValue="3" YValue="100" />
                                            <telerik:SeriesItem XValue="4" YValue="100" />
                                            <telerik:SeriesItem XValue="5" YValue="100" />
                                            <telerik:SeriesItem XValue="6" YValue="100" />
                                        </Items>
                                    </telerik:LineSeries>
                                </Series>
                            </PlotArea>
                        </telerik:RadHtmlChart>
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadPane>
    </telerik:RadSplitter>

    Note, however, that the above workaround may now work as expected in all cases.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 17 Jun 2014 in reply to Danail Vasilev Link to this post

    Hi Danail,

    Many thanks for that - it works perfectly and the charts look great now!  

    Best Regards

    Jon
  9. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 15 Jul 2014 in reply to Jon Link to this post

    Hi Danail,

    I was never able to resolve the issue whereby tooltips opening up would cause issues with scrollbars appearing on my site.  The charts were children of raddock controls inside radsplitters.

    So I have taken the step of using a radtooltip rather than the tooltip within the chart.  This seems to avoid the issue of causing scroll bars to appear.  However what I now need to do is get it to appear at the relevant chart point rather than centered above the chart.  How should I modify my code to either appear alongside the mouse or next to the hovered chart series point?

                       
    function OnClientSeriesHovered(sender, eventArgs) {
        var seriesData = eventArgs.get_seriesData();
        var selectedDate = new Date( eventArgs.get_category());
        window.setTimeout(function () {
            var tooltip = $find("<%=uxRadToolTip.ClientID%>");
            tooltip.set_text(eventArgs.get_value() + ' ' + eventArgs.get_seriesName() + '<br />' + selectedDate.getDate() + '/' +  (selectedDate.getMonth() + 1) + '/' + selectedDate.getFullYear() )
            tooltip.set_targetControlID('<%=RadHtmlChart1.ClientID%>');
            tooltip.show();
        }, 10);
    }


    Regards

    Jon
  10. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 17 Jul 2014 Link to this post

    Hello Jon,

    You can obtain the position of the hovered series item and move the tooltip to this position. For example:
    ASPX:
    <script>
        function pageLoad() {
            var chart = $find('<%=RadHtmlChart1.ClientID%>');
            chart._chartObject.bind("seriesHover", seriesHover);
        }
        function seriesHover(e) {
            var top = e.element.position().top;
            var left = e.element.position().left;
            var tooltip = $find("<%=uxRadToolTip.ClientID%>");
            tooltip.set_text("value is: " + e.value)
            tooltip.set_targetControlID('<%=RadHtmlChart1.ClientID%>');
            tooltip.show();
            setTimeout(function () {
                $telerik.setLocation(tooltip.get_popupElement(), { x: left, y: top });
            }, 10);
        }
    </script>
    <telerik:RadToolTip ID="uxRadToolTip" runat="server" RelativeTo="Mouse"></telerik:RadToolTip>
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="500px">
        <telerik:RadPane ID="RadPane1" runat="server" Width="100px"></telerik:RadPane>
        <telerik:RadPane ID="RadPane2" runat="server" Width="500px">
            <telerik:RadDockZone ID="RadDockZone1" runat="server">
                <telerik:RadDock ID="RadDock1" runat="server">
                    <ContentTemplate>
                        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400px" Height="400px" __OnClientSeriesHovered="OnClientSeriesHovered">
                            <PlotArea>
                                <Series>
                                    <telerik:ColumnSeries Name="Product 1">
                                        <TooltipsAppearance Visible="false"></TooltipsAppearance>
                                        <SeriesItems>
                                            <telerik:CategorySeriesItem Y="15000" />
                                            <telerik:CategorySeriesItem Y="23000" />
                                            <telerik:CategorySeriesItem Y="10000" />
                                        </SeriesItems>
                                    </telerik:ColumnSeries>
                                </Series>
                                <XAxis>
                                    <Items>
                                        <telerik:AxisItem LabelText="1" />
                                        <telerik:AxisItem LabelText="2" />
                                        <telerik:AxisItem LabelText="3" />
                                    </Items>
                                </XAxis>
                            </PlotArea>
                            <ChartTitle Text="Product sales for 2011">
                            </ChartTitle>
                            <Legend>
                                <Appearance Position="Bottom" />
                            </Legend>
                        </telerik:RadHtmlChart>
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadPane>
    </telerik:RadSplitter>



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Swathi
    Swathi avatar
    6 posts
    Member since:
    Apr 2015

    Posted 13 Apr 2015 in reply to Danail Vasilev Link to this post

    Hii..

    I am trying set chartpadding for bubble series but unfortunately, its not as expected. does this property works with all chart types ? can you please suggest me a way to set tooltip position for bubble series.

     

    Thanks

    Swathi Nomula

  12. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 16 Apr 2015 Link to this post

    Hi Swathi,

    Could you please tell me whether you are using the chart's native tooltip or RadToolTip?

    Regards,
    Danail Vasilev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  13. Swathi
    Swathi avatar
    6 posts
    Member since:
    Apr 2015

    Posted 16 Apr 2015 in reply to Danail Vasilev Link to this post

    Hi Danail,

       Am using chart's native tooltip. I've followed your answer from here.

    http://www.telerik.com/forums/telerik-html-chart---tooltip-position-series-item-border-series-item-smooth-edge

    and find the attached image, my tooltip always stays at top left corner irrespective of the bubble position on chart.

     please let me know if there is a way to tooltip position according to bubble position on chart( usually how its for all charts), or else at least to set to center of the chart.

     

    Thanks 

    Swathi Nomula

     

     

  14. Swathi
    Swathi avatar
    6 posts
    Member since:
    Apr 2015

    Posted 17 Apr 2015 Link to this post

    and one more thing,

         I have nearly 10 charts on dashboard(all are user controls), when i change tooltip css in each usercontrol, its been overriding by last loaded control and all are taking the same css. what can i do, if want to apply different tooltip css for each type of chart.

    i want following css for bubble chart :

    .k-tooltip
        {
            top: 100px !important;
            left: 54px !important;
        }

    and following for piechart:

    k-tooltip
        {
            top: 0px !important;
            left: -4px !important;
        }

        Pichart is the last loaded usercontrol in dashboard.

     

     Regards

    Swathi Nomula

  15. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 21 Apr 2015 Link to this post

    Hi Swathi,

    Thank you for the additional information.

    There is an important change in the rendering of the tooltips, so that they render now not in the chart but directly in the body tag.

    The only way to offset the labels or style them with a particular CSS for a certain chart is to attach to the seriesHover event where you can access them and do that. For example:

    CSS:
    <style>
        .myClass {
            color: red !important;
        }
    </style>
    JavaScript:
    <script lang="javascript">
        function OnSeriesHover(args) {
            setTimeout(function () {
                //Offset tooltip
                var tooltip = $telerik.$(".k-tooltip")[0];
                var newLeft = (parseInt(tooltip.style.left) - 56) + "px";
                tooltip.style.left = newLeft;
                //Add CSS class to the tooltip
                Sys.UI.DomElement.addCssClass(tooltip, "myClass")
            }, 270);
        }
    </script>

    ASPX:
    <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400">
        <ClientEvents OnSeriesHover="OnSeriesHover" />
        <PlotArea>
            <Series>
                <telerik:BubbleSeries>
                    <Appearance FillStyle-BackgroundColor="#6ab2c9">
                    </Appearance>
                    <TooltipsAppearance DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<br /> Sales: ${1}" />
                    <SeriesItems>
                        <telerik:BubbleSeriesItem Size="3" X="5" Y="5500" />
                        <telerik:BubbleSeriesItem Size="12" X="14" Y="12200" />
                        <telerik:BubbleSeriesItem Size="33" X="20" Y="60000" />
                        <telerik:BubbleSeriesItem Size="10" X="18" Y="24400" />
                        <telerik:BubbleSeriesItem Size="42" X="22" Y="32000" />
                    </SeriesItems>
                </telerik:BubbleSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>


    Regards,
    Danail Vasilev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  16. Swathi
    Swathi avatar
    6 posts
    Member since:
    Apr 2015

    Posted 21 Apr 2015 in reply to Danail Vasilev Link to this post

    Hi danail,

       Thanks for your support.

      I had this idea but colud not apply as all the charts are dynamically created from code.

     //Adding Chart Here 
                    RadHtmlChart radPiechart = new RadHtmlChart();
                  //  radPiechart.OnClientSeriesHovered = "hovered";
                    radPiechart.Attributes.Add("Class", "chart-style");

    when i tried to access 'hovered' client event from code, chart is not rendering properly. can you please suggest, how we can handle this  from server side.

    Regards

    Swathi Nomula

  17. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 22 Apr 2015 Link to this post

    Hi Swathi,

    The server-side assigning of a handler to the HtmlChart's OnSeriesHover event should not differ from the way it is done in the markup. I am attaching a very sample page to this reply, demonstrating how to achieve the same functionality both with a chart configured in the markup, and one which is created dynamically.

    Please, examine the configurations in it an let me know whether we can be of any further assistance.

    Regards,
    Vessy
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  18. Swathi
    Swathi avatar
    6 posts
    Member since:
    Apr 2015

    Posted 23 Apr 2015 Link to this post

    Hi Vessy,

    I've tried the way you suggested, but did not get through. please look at attached screenshots. Is there anything am missing here ?

    and it is not recognizing from server side too.

     

    Regards

    Swathi Nomula

  19. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 23 Apr 2015 Link to this post

    Hi Swathi,

    I assume that you are using a version of the controls released earlier than our 2014 Q3 release where the nested ClientEvents property has been exposed. Upgrading to the latest version of the controls will allow you to use the suggested SeriesHover property of the control.

    If you cannot upgrade or there are reasons you need to go with your currently used version of the controls, you will need to use the obsolated  OnClientSeriesHovered event of RadHtmlChart:
    RadHtmlChart radPiechart = new RadHtmlChart();
    radPiechart.ID = "PieChart";
    radPiechart.ChartTitle.Text = "Code-behind Chart";
    radPiechart.Width = 500;
    radPiechart.Height = 400;
    radPiechart.OnClientSeriesHovered = "OnSeriesHover";
    ...

    I am attaching the modified example so it is now working with the previous versions of the controls. I made my tests with version 2014.2.618.

    Regards,
    Vessy
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  20. Swathi
    Swathi avatar
    6 posts
    Member since:
    Apr 2015

    Posted 28 Apr 2015 in reply to Vessy Link to this post

    Thank you Vessy, It is working absolutely fine.

     

    Regards

    Swathi Nomula

  21. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 29 Apr 2015 Link to this post

    Hi,

    You are welcome, Swathi - I am glad the proposed solution was helpful for you. I am closing this thread for the moment, but please, do not hesitate to reach us again whenever any Telerik related assistance is needed.

    Regards,
    Vessy
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  22. Harshal
    Harshal avatar
    1 posts
    Member since:
    Jul 2015

    Posted 22 Jul 2015 in reply to Danail Vasilev Link to this post

    This is working. I have resolve my issue by this solution. Thanks. Danail Vasilev
    I have use something like below.

    function OnClientSeriesHovered(sender, eventArgs) {

    var chartObject = $find("<%=RadHtmlChart1.ClientID %>")._chartObject;
        chartObject._tooltip.chartPadding.top = 15;
        chartObject._tooltip.chartPadding.left = 15;​

    }​

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017