2

I am trying to do 2 things here.

  1. Display the bubble on the top when selected in the grid.(Is there a z-index property?)
  2. Get the same animation on selection as on mouseover.(Scale the bubble size)

I have the code here for reference. Any help would be appreciated.

http://jsbin.com/alupin/22/

OnaBai
  • 40,767
  • 6
  • 96
  • 125
desiguy
  • 652
  • 2
  • 9
  • 25

1 Answers1

1

Answering your questions:

  • About z-index: as you probably have already realized, charts are drawn using SVG. So the answer is actually here

Z index in SVG is defined by the order the elements appear in the document. You will have to change the element order if you want to bring a specific shape to the top.

  • About resizing: Each bubble is an SVG circle so you can resize the bubble (as you did in mouseover and mouseout event handlers) but there is not way of linking the original data with the circle element (in a reliable way), so you cannot.

EDIT: If you want to go with reordering the element (simulate z-index by placing the element at the end of the list). You might use the following code:

var previous = undefined;
$("circle").live("mouseover", function () {
    previous = $(this).prev();
    $(this).parent().append($(this));
    var radius = 0.00;
    currentRadius = this.r.baseVal.value;
    radius = this.r.baseVal.value * 1.4;
    $(this).animate({svgR: radius }, {
        duration: 200
    });
});


$("circle").live("mouseout", function () {
    if (previous && previous.length > 0) {
        $(this).insertAfter(previous);
    } else {
        $(this).parent().prepend($(this));
    }
    $(this).animate({svgR: currentRadius }, {
        duration: 200
    });
});

Running here

If you want to order the bubbles based on the color, you should use:

function onGridSelectionChange(arg) {
    var grid = this;
    var selectedItems = this.select();
    $.map(jobGrowth, function (item) {
        item.color = "#8ebc00";
    });

    $.map(selectedItems, function (item) {
        SetColor(grid.dataItem(item));
    });

    createChart();
    var chart = $("#chart").data("kendoChart");
    chart.refresh();

    var listItems = $("circle");
    var parent = listItems.parent();
    listItems.sort(function(a,b) {
        var a1 = a.getAttribute("fill"), b1 = b.getAttribute("fill");
        if (a1 == b1) return 0;
        return a1 > b1 ? -1 : 1;
    });
    parent.html(listItems)
}

Test it here

Community
  • 1
  • 1
OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • I am tryin to bring the element on top by reordering the element. Do I have to refresh the chart after I do it. I cant seem to get it working after a sort on the Color field. http://jsbin.com/alupin/26/ – desiguy Jan 14 '13 at 17:05
  • @desiguy, I cannot see in your example where you were reordering it but I've implemented it. Check **EDIT** in my answer and see it running [here](http://jsfiddle.net/OnaBai/yVS27/) – OnaBai Jan 14 '13 at 19:29
  • I looked at your code and looks like this is another good to have feature. (Having issues with IE9 though) However I was looking to bring the bubble on top on selection of item on the grid else the user would not know where the bubble lies if it gets hidden under a bigger bubble. I have commented the code here http://jsbin.com/alupin/29/edit (search for jobGrowth.sort) in case you can't find it. I am attempting to sort the data the chart is bound to and trying to rebind it hoping the DOM will put the svg element selected on the top. – desiguy Jan 14 '13 at 21:31
  • It is again a question on linking the grid item with it's corresponding bubble. If we can get it we can do it. I took a look into the generated SVG and I couldn't find any information on it. I was pending of checking if bubbles order is the one in DataSource if so we can do the trick but it is somehow unreliable since nothing says that it might change sometime in the future. – OnaBai Jan 14 '13 at 21:40
  • Two errors: first, in the `sort` comparing function you typed `Color` and not `color`; second, you assumed that the order in the `DataSource` was the order of the bubbles, it is not! Edited answer with fixed `onGridSelectionChange`. – OnaBai Jan 14 '13 at 22:56
  • 1
    If you want to try a pretty much cleaner implementation not having to recreate the chart, check it [here](http://jsfiddle.net/OnaBai/csdBN/) – OnaBai Jan 15 '13 at 02:37
  • Thanks for your help. The solution of sorting the bubbles based on color works for me. – desiguy Jan 16 '13 at 16:49