This is a migrated thread and some comments may be shown as answers.

Show relative tooltips once hover on Legend

7 Answers 297 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Brad
Top achievements
Rank 1
Brad asked on 01 Mar 2016, 06:49 PM

I want that once user mouse over the legend item, the related series item will highlighted and show the same tooltips as they are hovered. I'm using the version 2016 Q1, but there is no OnLegendItemHover event, how?

And how to make the databind template for Legend?

Thanks

7 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 04 Mar 2016, 10:44 AM
Hi,

We will need more time to answer to your query. As soon as we are ready we will let you know in this thread.

Regards,
Dimitar
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Danail Vasilev
Telerik team
answered on 07 Mar 2016, 02:11 PM
Hello Brad,

You can handle the legendItemHover event of the chart where you can get the data value and the point index:

ASPX:
<script>
    function legendHover(e) {
        alert(e.series.data[e.pointIndex].value);
    }
</script>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
    <ClientEvents OnLegendItemHover="legendHover" />
    <PlotArea>
        <Series>
            <telerik:PieSeries>
                <SeriesItems>
                    <telerik:PieSeriesItem Y="30" Name="item 1" />
                    <telerik:PieSeriesItem Y="10" Name="item 2"/>
                    <telerik:PieSeriesItem Y="20" Name="item 3"/>
                </SeriesItems>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

After that you can use RadToolTip, for example to display the hovered data. The native chart tooltip, however, is available only when hovering chart items.

Regarding the template for the legend the feature will be available for the Q2 2016 release. For the time being you can use the workaround from this feedback item - http://feedback.telerik.com/Project/108/Feedback/Details/54488

Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Brad
Top achievements
Rank 1
answered on 07 Mar 2016, 04:08 PM

Thank you,Danail

Your solution seems work. But if we make our own Tooltip by RadToolTip, it will looks different to the original chart series tooptip. And the position and color of different series are various, so are the tooptip's. Since we will use database driven chart, it will be very complicated to sync the series tooltip dynamically by RadToolTip. Is there any way to show and hide the series tooltips by code?

Thanks

 

0
Accepted
Danail Vasilev
Telerik team
answered on 10 Mar 2016, 09:51 AM
Hi Brad,

It is not possible to show/hide the tooltips explicitly. You can try to disable the native tooltips displaying and use a RadToolTip instead. For example:

        <script type="text/javascript">
            function seriesHover(e) {
                e.preventDefault();
                alert(e.value);
            }
        </script>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
            <ClientEvents OnSeriesHover="seriesHover" />
...

Where the alert() method can be replaced with the RadToolTip control.

Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Brad
Top achievements
Rank 1
answered on 10 Mar 2016, 03:54 PM

Thank you,Danail

I think that's it. We will do the customized tooltips by RadToolTip control.

 

0
Slava
Top achievements
Rank 1
answered on 24 Oct 2017, 11:47 AM

Hello,

I have RadHtmlChart Pie and I need to display a tooltip when user hovers it's mouse over a legend item. You say this is not possible to make chart show/hide tooltips. I placed RadToolTip on my page, put some content into it and now I need to position it over pie series item. I have my OnLegendItemHover(e) handler:

            function OnLegendItemHover(e)

    {
<%--                var RadHtmlChartObject = $find("<%=ChartLeft.ClientID %>"); //the standard script control object
                var KendoChart = RadHtmlChartObject.get_kendoWidget(); //the Kendo widget

                var ToolTip = $find("<%= ToolTip.ClientID %>");
                ToolTip.set_targetControlID(e.sender.element[0].id);
                setTimeout(function () {
                    ToolTip.show();
                }, 20);--%>

                var DataItem = e.series.data[e.seriesIndex];

                var GroupName = DataItem.GroupName;
                $("#TooltipGroupName").html(GroupName);

                var Amount = kendo.format("{0:C2}", DataItem.AbsAmount * DataItem.AmountSign);
                $("#TooltipAmount").html(Amount);

                var NumTransaction = DataItem.NumTransaction;
                $("#TooltipNumTransaction").html(NumTransaction);
            }

How can I position this tool tip over the correct piece of pie now ? Is there a method to get control Id of it etc ?

Thanks,

Vlad

 

0
Slava
Top achievements
Rank 1
answered on 24 Oct 2017, 11:50 AM

Here is my Tooltip, I forgot to post it here:

    <telerik:RadToolTip runat="server" ID="ToolTip" RelativeTo="Element">
        <table>
            <tr>
                <td><span style="font-weight: bold" id="TooltipGroupName"></span></td>
            </tr>
            <tr>
                <td><span id="TooltipAmount"></span></td>
            </tr>
            <tr>
                <td>Transactions:&nbsp;<span id="TooltipNumTransaction"></span></td>
            </tr>
        </table>
    </telerik:RadToolTip>

Tags
Chart (HTML5)
Asked by
Brad
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Danail Vasilev
Telerik team
Brad
Top achievements
Rank 1
Slava
Top achievements
Rank 1
Share this question
or