How do I open a dialog from a jqplot pie chart using jqplotDataClick?

Question

I am trying to open a dialog window whenever a pie slice is clicked in JQPlot pie chart. I've tried many different ways to try and get this to work but no luck. I know it needs to be bound to the jqplotDataClick function but I can't get it work that way.

Here is my script for the chart:

    $(document).ready(function(){
      plot1 = $.jqplot('chart1', [[[2,1], [4,2], [6,3], [3,4]]], {
      seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.DonutRenderer,
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true
        }
      },
      legend: { show:false, location: 'e' },
      grid: {background:'transparent', borderColor: 'none', shadow: false} 
    }
  );

      plot1 = $.jqplot('chart2', [[[2,1,'medical.htm'], [4,2,'link1.html'], [6,3,'link1.html'], [3,4,'link1.html']]], {

      seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.DonutRenderer,
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true
        }
      },
      legend: { show:false, location: 'e' },
      grid: {background:'transparent', borderColor: 'none', shadow: false} 
    }
  );

      plot1 = $.jqplot('chart3', [[[2,1], [4,2], [6,3], [3,4]]], {

      seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.DonutRenderer,
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true
        }
      },
      legend: { show:false, location: 'e' },
      grid: {background:'transparent', borderColor: 'none', shadow: false} 
    }
  );

      plot1 = $.jqplot('chart4', [[[2,1], [4,2], [6,3], [3,4]]], {

      seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.DonutRenderer,
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true
        }
      },
      legend: { show:false, location: 'e' },
      grid: {background:'transparent', borderColor: 'none', shadow: false} 
    }
  );


         $('#chart1, #chart2, #chart3, #chart4').bind('jqplotDataHighlight', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data+ ', pageX: '+ev.pageX+', pageY: '+ev.pageY);
            }
        );    
        $('#chart1, #chart2, #chart3, #chart4').bind('jqplotDataClick', 
            function (ev, seriesIndex, pointIndex, data) {
                $("#medical1").html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
                //alert();
                /* To open in a NEW window use: */
                /* window.open(data[2]); */
                /* To open in the same window use: */
                //window.location.href=neighbor.data[2];
            }
    );
        $('#chart1, #chart2, #chart3, #chart4').bind('jqplotDataUnhighlight', 
            function (ev) {
                $('#info1').html('Nothing');
            }
       );
    });

This is the dialog script. This dialog opens a window that is supposed to coincide with the pie chart slices. The premise is this - I have a pie chart that is made up of data submitted by the user by way of choosing options that appear in a dialog window. Once the pie chart is made up with this data, the user can then click on the pie chart and open a dialog window for each slice to change the options for that portion of the chart.

<script type="text/javascript">
    $(document).ready(function() {
        var $loading = $('<img src="img/loading.gif" alt="loading" class="loading">');
        $('#prod-dialog td a').each(function() {
            var $dialog = $('<div></div>')
                .append($loading.clone());
            var $link = $(this).one('click', function() {
                var $cnt = $(this).attr('href') + " #" + $(this).attr('id')
                $dialog
                    .load($cnt)
                    .dialog({
                        title: $link.attr('title'),
                        width: 300,
                        height: 200,
                        buttons: [
                        {
                            text: "Ok",
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        },
                        {
                        text: "Cancel",
                            click: function() {
                        $( this ).dialog( "close" );
                            }
                        }
                        ]
                    });


                $link.click(function() {
                    $dialog.dialog('open');
                    return false;
                });
                return false;
            });
        });
    });

This is part of the HTML for a category and button to open a dialog window - there are many more of these but way too much code to put up here.

<table id="prod-dialog">
            <tr>
              <td><div><img src="img/medical-icon.png" />
                <p>Medical</p>
                </div></td>
              <td><a href="medical.htm" title="Medical 1" id="medical1"><img src="img/dialog-icon_08.png"/></a></td>
              </tr>
</table>

Answer 1

If your plot data is augmented like this (similar to how you had it in your question):

plot1 = $.jqplot('chart1', [[[2,1,'#medical1'], [4,2,'#medical1'], [6,3,'#medical1'], [3,4,'#medical1']]], {

Then we can access the link Id in the jqplotDataClick event, and in turn trigger its click event. Note that in the above code I have used the same link Id each time - you will obviously need to supply the correct one to each.

Then in the jqplotDataClick event, the dialog can be opened like this:

$(data[2]).trigger('click');

It's important to use the link Ids because I think that the click event of each link is using the dialog object it received in its closure. It doesn't look like these dialogs get added to the DOM, so you won't be able to access them by their Id, hence triggering the click event of each link is the way to go.

I think the tricky part for you will be to ensure that your server-side code is producing data that includes the Ids of the link that needs to be clicked.