Show details in Fancybox with Highcharts

Question

I'm trying to show detailed information from a Highchart in a Fanycbox when I click on a part of the pie-chart. I have the following script:

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },
    credits: {
      enabled: false
    },
    title: {
      text: ''
    },
    plotOptions: {
      series: {
        cursor: 'pointer',
        dataLabels: {
          enabled: false
        },
        showInLegend: true,
        point: {
          events: {
            click: function(me) {
              $(me).fancybox({
                'autoScale': true,
                'type': 'iframe',
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'speedIn': 500,
                'speedOut': 300,
                'autoDimensions': true,
                'centerOnScroll': true // remove the trailing comma!!
              }).click();

              $('a href=' + this.options.url).one('click', function() {
                myfunction(this);
                return true;
              });
            }
          }
        }
      }
    },
    series: [{
      type: 'pie',
      name: 'Aantal',
      data: [{
          name: 'Not complete',
          y: 10,
          url: 'http://bing.com/search?q=foo',
          color: '##ed1b2e'
        }, {
          name: 'Complete',
          y: 10,
          url: 'http://bing.com/search?q=bar',
          color: '##35ce06'
        }]        
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

When I click on a part of the pie-chart a fancybox is opened with the text: "The requested content cannot be loaded. Please try again later."

How can I use the variable URL (i.e. http://bing.com/search?q=foo) and connect it to the click on the pie-chart.

Answer 1

Why do you write $(me).fancybox({..}).click(); - here you attach and immediately fire click event to start fancybox. That is so awkward, if you wish to immediately start fancybox, then you simply have to use .open() method, for v2 it would look like this:

$.fancybox.open({
  href: 'https://fancyapps.com/fancybox/3/iframe.html', 
  type : 'iframe'
}); 

If you upgrade to v3, then replace href with src.

Keep in mind that websites (like bing.com, google.com and other) can refuse to be loaded into the iframe.