RadHtmlChart SeriesItems explode on hover

[Yaniv]

Hi, i have a databound RadHtmlChart pie.
is there a way to explode a SeriesItem indside PieSeries on mouse hover and un explode on move mouse out?
also, in OnClientSeriesClicked is there a way to parse args.get_seriesData()? all i get is [object][object]
thanks.

[Danail Vasilev]

Hello Yaniv,

Toggling the exploding of the Pie series items on hover is not supported out of the box. Such a functionality, however, can be achieved by handling the OnClientSeriesHovered event of the chart where the target item can be found and exploded/unexploded.

As for the mouse out event, RadHtmlChart doesn't support such event, you can however, get the chart's wrapper and attach such event to it. For example:
JavaScript

<script>
    function setPieItemIndex(sender, args) {
        var targetCategory = args.get_category();
        var itemIndex;
        for (var i = 0; i < args.get_seriesData().length; i++) {
            var currCategory = args.get_seriesData()[i].category;
            if (currCategory == targetCategory) {
                itemIndex = i;
            }
        }
        $get("hdf1").value = itemIndex;
    }

    function togglePieItemExplode(sender) {

        var itemIndex = $get("hdf1").value;
        if (itemIndex == "") {
            return;
        }

        var isExplode = sender._chartObject.options.series[0].data[itemIndex].explode;
        sender._chartObject.options.series[0].data[itemIndex].explode = !isExplode;

        var isTransitions = sender.get_transitions();

        sender.remove_seriesHovered(OnClientSeriesHovered);
        sender.set_transitions(false);
        sender.repaint();
        sender.set_transitions(isTransitions);
        setTimeout(function () {
            sender.add_seriesHovered(OnClientSeriesHovered);
        }, 200);
    }

    function OnClientSeriesHovered(sender, args) {
        setPieItemIndex(sender, args);
        togglePieItemExplode(sender);
    }

    function pageLoad() {
        var chart = $find("RadHtmlChart1");
        chart.get_element().onmouseleave = calltogglePieItemExplode;
    }

    function calltogglePieItemExplode() {
        var chart = $find("RadHtmlChart1");
        togglePieItemExplode(chart);
    }
</script>

ASPX:

<asp:HiddenField ID="hdf1" runat="server" />
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" OnClientSeriesHovered="OnClientSeriesHovered" Width="400px" Height="400px">
    <PlotArea>
        <Series>
            <telerik:PieSeries>
                <SeriesItems>
                    <telerik:PieSeriesItem Y="30" Name="item 1" />
                    <telerik:PieSeriesItem Y="10" Exploded="true" Name="item 2" />
                    <telerik:PieSeriesItem Y="20" Name="item 3" />
                </SeriesItems>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

Note that after changing the explode state of an item through the chartObject you must repaint the chart. Since the mouse is still over the chart, the event will be triggered again. That is why the event is initially detached and then attached again later on.

You may also find the full VS example in the attached archive.

Regarding the get_seriesData() method it returns the data points (i.e., an already parsed JSON object) of the clicked series. If you want, however, to make the JSON object to a string you can use for example JSON.stringify method. More information on the matter is available in this forum thread.

More information on the matter is available in this help article.

Regards,
Danail Vasilev
Telerik

[Yaniv]

Perfect! Thank you!