Highcharts plot in fancybox

Question

I would like to display a highcharts plot (through URL) in fancybox. Something like this: http://jsfiddle.net/Ruloco/PFVxK/3043/

If I just replace the links, it doesn't work:

<a class="fancybox" data-thumbnail="http://fancyapps.com/fancybox/demo/1_s.jpg" href="http://fancyapps.com/fancybox/demo/1_b.jpg">Open #1</a>

and this is the hyperlink to be displayed inside the fancybox:

http://www.highcharts.com/studies/data-module-csv.htm

How could I do that? Thanks in advance!

Answer 1

I Have update Fiddle You have to use iframe to display the highchart

Html

<a class="fancybox" data-fancybox-type="iframe" href="http://www.highcharts.com/studies/data-module-csv.htm">Iframe</a>

Js

$(document).ready(function() {
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        helpers: {
            thumbs: {
                width  : 40,
                height : 40,
                source  : function(current) {
                    return $(current.element).data('thumbnail');
                }
            }
        }
    });
       });