Pie chart click issue - click not detected

Question

Ive been trying to create a graph to display events occuring in different regions of the world. so I basically went for a combination of two graph 1) d3 google graph (http://bl.ocks.org/mbostock/899711) to show the regions via map and jquery flot pie charts ( http://people.iola.dk/olau/flot/examples/pie.html) to map the events. Ive stored all the corresponding lattitiude longitude values in to an array and markers on map are appended on the basis of these values. So basically I will create a xhtml:div space on the corresponding markers with the help of <foriegnobject> and once these divs are created, I will add the pie charts for each correspinding div element. so graph creation is successful, "plotclick" function for pie chart, to catch the click on pie charts. That click function is not getting detected on all pie charts. In Most pie charts, clicking on slices, calls the corresponding click function. Its the same for hovering also.

The issue is only in firefox and Im using the latest version of firefox that is 22.0. The graph works fine in Chrome..

Ive added a screenshot of the graph. Is it a known issue or is it somethng wit the method with which the graph is created?

  // EDIT : (Code Added)

 //google map api options
 var map = new google.maps.Map(d3.select("#mapsss").node(), {
    zoom: 2,
   panControl: true,
   panControlOptions: {
       position: google.maps.ControlPosition.TOP_RIGHT
   },
   zoomControl: false,
    mapTypeControl: false,
           draggable: false,
           scaleControl: false,
           scrollwheel: false,
           streetViewControl: false,
           center: new google.maps.LatLng(37.76487, 0),
           mapTypeId: google.maps.MapTypeId.ROADMAP
});



//create an overlay.
var overlay = new google.maps.OverlayView();

// Add the container when the overlay is added to the map.
overlay.onAdd = function () {
    layer = d3.select(this.getPanes().overlayMouseTarget)
        .append("div")
        .attr("class", "stations");

    // Draw each marker as a separate SVG element.
    // We could use a single SVG, but what size would it have?
    overlay.draw = function () {
        projection = this.getProjection(),
        padding = 10;

        //mapData hasinput details
        var marker = layer.selectAll("svg")
            .data(d3.entries(mapData))
            .each(transform) // update existing markers
        .enter().append("svg:svg")
            .each(transform)
            .attr("class", "marker").attr("id", function (d) {
                return "marker_" + d.key;
            });
        //creating canvas for pie chart
        marker.append('foreignObject')
            .attr('width', '100%')
            .attr('height', '100%').style("background-color", "#000000").append('xhtml:div').attr("class", "pieCanvas").attr("id", function (d) {
                return "canvas_" + d.key.split(" ").join("_");
            }).style('height', '50px').style('width', '50px');

//creating pie chart on each canvas.. key holds the name of each canvas
$.plot($("#canvas_" + key.split(" ").join("_")), pieChartData[key], {
        series: {
            pie: {
                show: true,
                radius: 1,
                innerRadius: 0.3,
                tilt: 0.5,
                label: false,
                stroke: {
                    color: '#ffffff',
                    width: 2.0
                }
            },
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        legend: {
            show: false
        }
    });
}


 //click function
  $(document).on("plotclick", "div.pieCanvas", pieChartClick);

Answer 1

I dislike much plot. in my development had repeatedly incompatibility between browser,the best option I found was to use another library, i use jplot compatibility with multiple browsers is better, IE 6.

in the oficial forum, there are unanswered questions in this topic

Answer 2

I can think of two reasons for a click event not to be registered by the browser.

1 - the event did not bind properly

2 - the click target is beneath an invisible layer preventing the click from being heard by the browser. Some browsers are forgiving of this, Firefox seems to be, in a number of ways, rather strict.

You can use the FF 3D view in the web dev tools to see if there is a layer being rendered over your pie charts. You could try changing the z-index of the pie charts to alleviate this.

Answer 3

I honestly don't understand why you would use two different graphing libraries? D3 works with svg elements and flot works with a canvas element. It's alot easier to use d3 for interactivity because d3 attaches svg elements to the DOM. You can then bind all your events directly to those elements (see https://github.com/mbostock/d3/wiki/Selections#wiki-on).

Also, here is an example for making a pie chart with d3.