Pass jquery event to layer behind OR make inner radius transparent -

i'm trying make pie chart on top of pie chart (see below) , using flot jquery library.

http://cadmiumconsulting.com/carlsberg/screenshot_01.jpg

i have managed diagram looking right use mouse events on outer pie chart.

my problem is:

if draw outer chart first inner 1 'on top', mouse events work on inner layer.

if on other hand draw inner chart first , add outer chart 'on top' inner radius, inner radius doesn't work in internet explorer 8 , displays solid circle on top of inner chart.

any ideas on how pass events 1 layer other or force transparency of inner radius?

any appreciated.

update - there seems issue 'globalcompositeoperation' allow transparency. it's included in html5 not in excanvas object hack replicate canvas object in ie8.

events traveling should able target chart in background. have made simple guide explains how events travel , how stop them in jquery:

first create our test dom

<div><br/>     <a class="a1">im plain simple</a><br/><br/>     <a class="a2" href="http://google.com">i prevent own other events</a><br/><br/>     <a class="a3">i stop other event</a><br/><br/>     <a class="a4" href="http://google.com">im shitty</a><br/><br/>     <a class="a5" href="http://google.com">im shitty too</a><br/><br/> </div> 

styling:

div {background:red;} {color:white;} a.a1 {background:yellow;color:black;} a.a2 {background:green;} a.a3 {background:blue;} a.a4 {background:orange;} 

jquery:

we bind click event div test our travelings

$("div").bind("click", function(event) {     alert("div clicked"); }); 

click event travels div eventually

$("a.a1").bind("click", function(event) {     alert("a.a1 clicked"); }); 

using event.preventdefault() prevents $("a.a2") other bound click events.

$("a.a2").bind("click", function(event) {     event.preventdefault();     alert("a.a2 clicked\n\nactually supposed go http://google.com"); }); 

using event.stoppropagation() prevents click event traveling , never triggers bounds events on our div

$("a.a3").bind("click", function(event) {     event.stoppropagation();     alert("a.a3 clicked"); }); 

now use there in combination.

$("a.a4").bind("click", function(event) {     event.preventdefault();     event.stoppropagation();     alert("a.a4 clicked\n\ni supposed go http://google.com"); }); 

and way return false; in end works live events.

$("a.a5").bind("click", function(event) {     alert("a.a5 clicked\n\ni supposed go http://google.com");     return false; }); 

hopes helps.

if want more please post code (where bind events) or example charts