Show relative tooltips once hover on Legend

[Brad]

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

[Dimitar]

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

[Danail Vasilev]

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

[Brad]

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

 

[Danail Vasilev]

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

[Brad]

Thank you,Danail

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

 

[Slava]

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

 

[Slava]

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>