RadHtmlChart SeriesItems explode on hover

Thread is closed for posting
3 posts, 0 answers
  1. Yaniv
    Yaniv avatar
    6 posts
    Member since:
    Sep 2013

    Posted 08 Jan 2014 Link to this post

    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.
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 10 Jan 2014 Link to this post

    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
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yaniv
    Yaniv avatar
    6 posts
    Member since:
    Sep 2013

    Posted 12 Jan 2014 Link to this post

    Perfect! Thank you!
Back to Top