google maps api v3 infowindow + flot

问题

I'm trying to draw a graph inside an infowindow, but flot is not executing—and is not throwing any errors. I read in the flot forum that often people have trouble with doing something like this because the placeholder element must be visible (that might be a red-herring here tho).

I'm able to get the following to produce the graph appropriately in a different element:

$.plot(
    $("#placeholder"),
    [ f_data[loc] ],
    {
        grid: { hoverable: true, clickable: true },
        series: {
           bars: { show: true },
           clickable:true,
           color:'#3FA9F5',
           shadowSize: 0
       },//series
       xaxis: {
           tickDecimals:0,
           tickSize:1
       }//xaxis
    }
);//$.plot

But when I put the above into, or referenced from, the google.maps.event.addListener(), it does nothing (not even add the <canvas> elements).

I made sure to put it after infowindow.open(map,marker);, so that makes me think the placeholder element is visible. I also made sure #placeholder has substance/defined dimensions.

P.S. I tried what Mike Williamson reported as his eventual solution to Google Maps V3: Loading infowindow content via AJAX, but that didn't work either.

EDIT
Example of flot working outside of infowindow: index2.html
Example of flot not working inside of infowindow (addListener 'domready'): index3.html
Example of flot not working inside of infowindow (setTimeout): index4.html

回答1:

The issue is that the content div has not been attached to the domain yet (so $("#placeholer") can't find it). You need to wait for the infowindow domready event to fire before running your code to plot the graph, something like this:

UPDATE: The code below works for me on a local copy (I did modify the css, but I don't think that was required).

google.maps.event.addListener(marker, 'click', (function(marker, locale, s, flot_data) {
  return function() {
    var fname = 'http://clients.frende.me/incognito/images/'+date+'_'+locale.toLowerCase().replace(/\s/g,'')+'.svg';
    infowindow.setContent('<div id="gMaps_infowindow"><h3>'+locale+' ('+hour+':00): $'+s.total+'</h3><div id="flotIW" style="height:200px; width:350px;" name="'+locale+'"></div></div>');

  google.maps.event.addListener(infowindow, 'domready', function() {(function(f_data,loc) {
    $.plot(
      $("#flotIW"),
      [ f_data[loc] ],
      {
        grid: { hoverable: true, clickable: true },
        series: {
          bars: { show: true },
          clickable:true,
          color:'#3FA9F5',
          shadowSize: 0
        },//series
      xaxis: {
        tickDecimals:0,
        tickSize:1
      }//xaxis
    }
  );//$.plot
  })(flot_data,locale)});

    infowindow.open(map, marker);
    //open_popUp(flot_data,locale);
    //open_drawGraph(locale);
  }//return
})(marker, locale, s, flot_data));//google.maps.event.addListener

(another option is to create the domain node directly, use that to render your graph, and pass that into the setContent call (which will take either a string or a DOM node).

回答2:

Have you tried wrapping your $.plot in a setTimeout(function(){$.plot({stuff})}, 0) ?

Sometimes this helps give the browser time to finish drawing whatever elements it needs to before it executes.

You can find more information why this might be useful here: Why is setTimeout(fn, 0) sometimes useful?

来源：https://stackoverflow.com/questions/12665108/google-maps-api-v3-infowindow-flot

标签

javascript

google-maps-api-3

flot

infowindow