StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPie chart click issue - click not detected
text
Body
copied!<p><img src="https://i.stack.imgur.com/qPIrT.png" alt="enter image description here">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 (<a href="http://bl.ocks.org/mbostock/899711" rel="nofollow noreferrer">http://bl.ocks.org/mbostock/899711</a>) to show the regions via map and jquery flot pie charts ( <a href="http://people.iola.dk/olau/flot/examples/pie.html" rel="nofollow noreferrer">http://people.iola.dk/olau/flot/examples/pie.html</a>) 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 <code>xhtml:div</code> space on the corresponding markers with the help of <code><foriegnobject></code> 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. </p> <p>The issue is only in firefox and Im using the latest version of firefox that is 22.0. The graph works fine in Chrome..</p> <p>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?</p> <pre><code> // 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); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload