Question

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/

Answer 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