Home/ Questions/Q 6724383
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T09:41:01+00:00

So I’m basically trying to embed a Google Visualization chart within a Fancybox (JS

  • 0

So I’m basically trying to embed a Google Visualization chart within a Fancybox (JS pop-up). The chart shows correctly on the page.. but not within the fancybox. Any ideas?

Here’s the code i’m using

 $(".class").fancybox(function() { 

      drawChart();

 });

— edit —

 $(".view_research").fancybox({

 'onStart'   : drawChart

 });

** this edit does not work either, but at least uses one of the arguments allowed by fancybox

The fancybox loading image is displayed when I click the link.. but the actual pop-up never loads.

I should also note that if I remove the Google chart from the page that the pop-up is trying to load, the pop-up loads without a hitch.

Thanks in advance,
Phil

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In order to get this to work you need to:

    1. use the onComplete option of the fancybox call
    2. explicitly specify a width and height style attribute for the div in which the chart will be drawn

    It’s common enough with gviz for the div to be visible/drawn before trying to put a chart in it, else you can end up with some pretty odd looking charts (not sure what goes on when you try to render a chart in an invisible div..). The onComplete takes care of this. Using the gviz image library is a good workaround for that problem in other cases.

    Anyway, here’s a working example of using fancybox and gviz (pie chart code taken from google code playground):

      <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
      <link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
      <script type="text/javascript">
          google.load('visualization', '1', {packages: ['piechart']});
      </script>
      <script type="text/javascript">
      </script>
      <script>

      function drawVisualization() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(5);
        data.setValue(0, 0, 'Work');
        data.setValue(0, 1, 11);
        data.setValue(1, 0, 'Eat');
        data.setValue(1, 1, 2);
        data.setValue(2, 0, 'Commute');
        data.setValue(2, 1, 2);
        data.setValue(3, 0, 'Watch TV');
        data.setValue(3, 1, 2);
        data.setValue(4, 0, 'Sleep');
        data.setValue(4, 1, 7);
        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('data')).draw(data);
      }

      $(document).ready(function() {
        $("a#inline").fancybox({
          'hideOnContentClick': true,
          onComplete: drawVisualization
        });
      });

      </script>
    </head>
    <body>
      <a id="inline" href="#data">Click here to see chart</a>
      <div style="display:none"><div style='height:200px;width:200px' id="data"></div></div>
    </body>
  </html>
    • 0