Dynamic chart element explode

4 posts, 0 answers
  1. A
    A avatar
    6 posts
    Member since:
    Oct 2012

    Posted 08 Oct 2012 Link to this post

    Hi,
    How can I make kendo donut chart element dynamically explode on mouse  hover?
  2. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 08 Oct 2012 Link to this post

    Here you have an example:
    http://jsbin.com/evasab/1/edit 

    Of course if you're fetching the data from a service or something I would recommend you storing it locally in a var so every time you initialize the chart you don't have the delay of getting the data.
  3. A
    A avatar
    6 posts
    Member since:
    Oct 2012

    Posted 09 Oct 2012 Link to this post

    Thanks a lot.It's worked,but however tool tip escaped.How make it visible when  chart element is exploding? 
  4. A
    A avatar
    6 posts
    Member since:
    Oct 2012

    Posted 09 Oct 2012 Link to this post

    Ok,I solved it.
    Here's the edited code:
    var previousItem;
    function applyExplode(dataItem, chartItem) {
        if ((undefined == previousItem) || (dataItem.category != previousItem.category)) {
            var index;
            for (index = 0; index < chartItem.series[0].data.length; index++) {
                var item = chartItem.series[0].data[index];
                if (item.category == dataItem.category && item.value == dataItem.value) {
                    break;
                }
            }
            $("#chartKendo").removeData();
            $("#chartKendo").empty();
            var newData = $.extend(true, {}, chartItem);
            newData.series[0].data[index].explode = true;
            newData.transitions = false;
            $("#chartKendo").kendoChart(newData);
        }
        previousItem = dataItem;
    }
Back to Top