Take the 2-minute tour ×

How to show a chart inside pop up window? I'm using Leaflet JS, which has support for raphael plugin http://dynmeth.github.com/RaphaelLayer/. Is it possible to create a div inside popup window? I was thinking about http://softwarebyjosh.com/raphy-charts/

If it's not possible with Leaflet, I am opened to only Raphael map solution.


share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

I guess it is possible. I see this example at home page of Leaflet:

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.').openPopup();

So you can add markup as content. See the br tag above.

    .bindPopup('A pretty CSS3 popup. <div class="popup_custom_div"></div> Easily customizable.').openPopup();
//retrieve the div by class name take care if more then one maybe opened
var mydiv = document.getElementsByClassName( 'popup_custom_div' )[0];
mydiv.innerHTML = 'I am here';
share|improve this answer
add comment

The answer by @cavila is only part of the solution. You can put the div tag for the chart in the popup, but the issue arises then because you will need to listen to the ".openPopup()" event to then have the raphy-carts javascript execute. If you do not do it on that event, then when it executes it will not find the div tag because it has not been inserted into the DOM. It looks like leaflet supports event listening so you will need to add something like this to the code above:

map.on('popup', function(e) {
    //Run the chart code here like this
    var chart = new Charts.LineChart('chart1');
        data: [[1, 828906, {tooltip: "my special point"}],[2, 566933],[3, 584150],[4,  
                 1072143],[5, 1622455],[6, 2466746],[7, 2427789]]

share|improve this answer
So the openPopup() is asynchronous? Because Javascript interpreter will not execute the next statement until the previous return except for callbacks that are executed later on time. An alternative if no event would be execute pooling for the existance of that "div" in a window.setTimeout loop. The event callback would be much more fast. –  cavila Dec 27 '12 at 23:11
add comment

One way would be to listen for click events on your makers and create the charts on the fly. Here's an example: http://jsfiddle.net/6UJQ4/

One thing that wasn't clear to me until I started playing around is that Leaflet's bindPopup can take a string or a DOM node. The example above creates a DOM node, passes it to bindPopup then creates the chart.

share|improve this answer
Is that possible for polygon events? When clicked on some polygon, a similar popup shows up? –  againstflow Feb 1 '13 at 12:24
Yes, should be possible. My example is hardcoded to use 50 as the value for the chart but you could do anything you like inside the function that creates the chart. –  Derek Swingley Feb 1 '13 at 14:27
Can you please write an example with polygons or geojson data on jsfiddle like this with markers? I would appreciate so much. –  againstflow Feb 4 '13 at 12:44
add comment

Your Answer


