Pie chart click error - click not found button

Question

I tried to create a schedule to display events taking place in different regions of the world. so I basically went for a combination of two graphs: 1) d3 google graph ( http://bl.ocks.org/mbostock/899711 ) to show regions through a map and jQuery fleet pie chart ( http: // people. iola.dk/olau/flot/examples/pie.html ) for matching events. Ive saved all the corresponding lattice longitudes in the array, and markers on the map are added based on these values. So basically, I will create an xhtml:div space on the respective markers using <foriegnobject> , and once these divs are created, I will add pie charts for each corresponding div element. therefore, creating the graph is successful, the "plotclick" function for the pie chart to catch a click on the pie charts. This click function is not detected on all pie charts. In most pie charts, clicking on the pieces invokes the corresponding click function. The same goes for freezing.

The problem is only in firefox and Im using the latest version of firefox, which is 22.0. The graph works fine in Chrome ..

Ive added a screenshot of the graph. Is this a known issue or is it some kind of method by which a 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 do not like a lot of plot. in my development repeatedly incompatibilities between the browser, the best option I found is to use a different library, I use jplot better compatibility with multiple browsers, IE 6.

in the official forum, unresolved issues remained in this thread

Answer 2

I can think of two reasons why the click event is not logged by the browser.

1 - event did not bind properly

2 - the click target is under an invisible layer, preventing the click from hearing the browser. Some browsers forgive this, it seems that Firefox, for many reasons, is pretty strict.

You can use the FF 3D view in web developer tools to see if there is a layer that appears above your pie charts. You can try changing the z-index of the pie charts to facilitate this.

Answer 3

Honestly, I don’t understand why you would use two different chart libraries? D3 works with svg elements, and the fleet works with a canvas element. It's easy to use d3 for interactivity because d3 attaches svg elements to the DOM. Then you can bind all your events directly to these elements (see https://github.com/mbostock/d3/wiki/Selections#wiki-on ).

In addition, here is an example for creating a pie chart with d3.