Search code examples
jqueryjspjqgridfree-jqgrid

How to show a popup graph/chart from jqgrid

I am using free-jqgrid/4.13.3. Onclick of a cell it should popup a window to display a line chart. I am using jqplot (jquery.jqplot.js, jqplot.canvasAxisLabelRenderer.js, jqplot.canvasTextRenderer.js) for chart. Expecting dialog window will contain the chart. I am unable to achieve this using the below code: 

{ name: 'show_chart', index: 'show_chart', align: 'center', width: 100, sortable: false, editable: false,
    formatter:"showlink",
    formatoptions: {
        onClick: function (options) {
        $('#dialog').dialog({ autoOpen: false });
        $("#dialog").dialog({
         open: function() {
                var plot1 = $.jqplot ('chart1', [[3,7,9,1,5,3,8,2,5]]);
               }  
        });
        return false;
       }
    }}

In html body:

<body>
  <div id="dialog" title="Basic dialog" hidden="true">
</body>

Any kind of help on this problem is highly appreciated.

Solution

  • It is hard to say what the problem is without the full source of the html and javascript. I have made some assumptions and put together a fiddle that illustrates what you are trying to achieve.

    The main changes I see are...

    1. In onclick you never actually call open on the dialog. For example, $("#dialog").dialog("open");
    2. There needs to be html elements for the grid and chart