1

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

Community
  • 1
  • 1
Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126

2 Answers2

2

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).

geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • I added `google.maps.event.addListener(infowindow, 'domready', (function(f_data,loc) { … })(flot_data,locale));` after the first addLister and I got an *Invalid dimensions* error from flot. – Jakob Jingleheimer Sep 30 '12 at 22:58
  • Code in comments is difficult to read, but it doesn't look like you included everything. I don't know anything about flot (just the Google Maps API v3), but that error sounds like the "placeholder" div either doesn't have a size or has a size that flot doesn't like. Might be time for a live example. – geocodezip Sep 30 '12 at 23:45
  • 1
    This suggestion is correct, see a simplified JSFiddle here: http://jsfiddle.net/ryleyb/Aykg2/ ... You'll notice there are no more setTimeouts used. – Ryley Oct 01 '12 at 15:56
  • @Ryley do you know why the content is too big for the infowindow in your fiddle? When I tried it before (with the empty `#flot div`), the infowindow grew itself properly. – Jakob Jingleheimer Oct 01 '12 at 19:10
  • @Ryley: I fixed it by moving the `infowindow.open(map, marker);` before the `google.maps.event.addListener(infowindow, 'domready', function() { … });` – Jakob Jingleheimer Oct 01 '12 at 22:00
0

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?

Community
  • 1
  • 1
MushinNoShin
  • 4,695
  • 2
  • 32
  • 46