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>

@nick_w - I'm trying to get a jquery dialog window opened whenever a pie slice is clicked. — alien.ninja, Mar 19 '13 at 20:48
Ah, so is `#info1` the dialog box? Either way, could you post any dialog box-related HTML you currently have? — nick_w, Mar 19 '13 at 20:57
No. Info1 is just a div that shows the data whenever the pie slice is clicked. I will add the dialog window code that I currently have. — alien.ninja, Mar 19 '13 at 21:01
So is it the case that your `prod-dialog` contains many `td` elements, where your JS creates a series of dialogs from them? Or is the case that you have many tables like `prod-dialog`? — nick_w, Mar 19 '13 at 21:42
In general, am I right in thinking that the problem here is that you need a way to relate a pie slice to a dialog, hence the use of `link1.htm` and so forth in the series data? — nick_w, Mar 19 '13 at 21:43
Yes, Nick, that is correct. The ID "prod-dialog" is assigned to the table that has the elements for choosing which options and settings make up the pie chart. Once those are set and the pie chart created, the user can then click on the pie chart slices and open the same, respective dialog that was used to create it - thus allowing the user to change the settings/options for the pie chart. Does that make sense? I have the dialogs for the table elements working fine. I'll try and make a fiddle for you, if i can't then I'll provide a link. — alien.ninja, Mar 20 '13 at 15:00

nick_w · Accepted Answer · 2013-03-20T20:39:01.303

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.

How freaking cool is that?! Works like a charm! THANK YOU! I have been banging my head on my desk for a week over this! I knew it had to be inside that jqplotDataClick event. And yes you're right, now comes an even harder part - getting the dialogs assigned to the pie slices and putting all this inside Eclipse. Joy. — alien.ninja, Mar 20 '13 at 20:49

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

1 Answers1