Chart inside pop up window in Javascript

Question

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.

Thanks

Answer 1

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.

// 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. <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';

Answer 2

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');
     chart.add_line({
        data: [[1, 828906, {tooltip: "my special point"}],[2, 566933],[3, 584150],[4,  
                 1072143],[5, 1622455],[6, 2466746],[7, 2427789]]
        });

     chart.draw();
});

Answer 3

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.