Как обновить диаграмму Google При обновлении jqGrid

Question

У меня есть jqGrid в пользовательском элементе управления, который помещается на страницу .aspx. У меня также есть Google Graph для отображения данных сетки на одной странице. Как сетка, так и диаграмма используют Handler1.aspx в качестве URL-адреса. Handler1.ashx вызывает вызов SQL-сервера и возвращает JSON.

При первоначальной загрузке страницы, я вижу, что график и диаграмма входят в Handler1.ashx для получения данных - поэтому я получаю сетку и красивую линейную диаграмму.

Проблема в том, что я обновляю данные в сетке, диаграмма не обновляется.

Я пробовал решение SO Here без успеха. Я также попробовал кнопку на странице, которая вызывает drawChart(). Вот моя сетка:

 $(function() { 
     $('#dataGrid').jqGrid({ 
      url: 'Handler1.ashx', 
      datatype: 'json', 
      mtype: 'POST', 

      colNames: ["Days", "Origin IB Loads", "Origin OB Loads", "Dest IB Loads", "Dest IB Loads", "ID"], 
      colModel: [ 
         { name: 'Days', index: 'Days', width: 100, editable: true, editrules: { required: true }, }, 
         { name: 'OrigIB', index: 'OrigIB', width: 100, editable: true, editrules: { required: true }, }, 
         { name: 'OrigOB', index: 'OrigOB', width: 100, editable: true, editrules: { required: true }, }, 
         { name: 'DestIB', index: 'DestIB', width: 100, editable: true, editrules: { required: true }, }, 
         { name: 'DestOB', index: 'DestOB', width: 100, editable: true, editrules: { required: true }, }, 
         { name: 'ID', index: 'ID', width: 80, Key: true, hidden: true } 
         ], 
      loadonce: false, 
      pager: '#pagingGrid', 
      rowNum: 10, 
      rowList: [10, 20, 30, 'All'], 
      viewrecords: true, 
      gridview: true, 
      autoencode: true, 
      loadComplete: function (data) { 
       $(".ui-pg-selbox option[value='All']").val(10000); 
      }, 
      caption: 'Graph Data', 
      editurl: 'Handler2.ashx' 
     }); 

     jQuery("#dataGrid").navGrid("#pagingGrid", { 
      edit: true, 
      add: true, 
      del: true, 
      search: false, 
      //searchtext: "Search", 
      refresh: true 
     }, 
      { 
       closeAfterEdit: true, 
       reloadAfterSubmit: true 
      }, 
      { 
       closeAfterAdd: true, 
       reloadAfterSubmit: true 
      }, 
      { 
       reloadAfterSubmit: true 
      }); 

    }) 

А вот мой график - в том числе управления пользователя сетки и диаграммы DIV:

google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 


function drawChart() { 
    $.ajax({ 
     url: "handler1.ashx", 
     dataType: "json", 
     async: "false", 
     success: function (jsonData) { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('number', 'Days'); 
      data.addColumn('number', 'Origin IB Loads'); 
      data.addColumn('number', 'Origin OB Loads'); 
      data.addColumn('number', 'Dest IB Loads'); 
      data.addColumn('number', 'Dest OB Loads'); 
      for (var i = 0; i < jsonData.length; i++) { 
       data.addRow([jsonData[i].Days, jsonData[i].OrigIB, jsonData[i].OrigOB, jsonData[i].DestIB, jsonData[i].DestOB]); 
      } 

      var options = { 
       title: 'Single Lane Route Quote', 
       is3D: true, 
       curveType: 'function', 
       legend: { position: 'bottom' }, 
       vAxis: { title: "Days" }, 
       hAxis: { title: "Loads" } 
      }; 

      var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
      chart.draw(data, options); 
     } 
    }); 

} 


<My:GridControl ID ="gridControl" runat="server" /> 

<div id="curve_chart" style="width: 1000px; height: 500px"></div> 

Как я могу получить диаграмму, чтобы обновить после внесения обновление в сетке?

Answer 1

что, если вы пытались что-то вроде этого ...

1. нагрузки Google
2. Load jqGrid
3. Диаграмма нагрузки при loadComplete пожаров на jqGrid

это позволит Google пнуть вещи затем, когда сетка обновится, так и график ...

google.charts.load('current', { 
    callback: loadDataGrid, 
    packages: ['controls', 'table'] 
}); 

function loadDataGrid() { 
    $('#dataGrid').jqGrid({ 
     url: 'Handler1.ashx', 
     datatype: 'json', 
     mtype: 'POST', 
     colNames: ["Days", "Origin IB Loads", "Origin OB Loads", "Dest IB Loads", "Dest IB Loads", "ID"], 
     colModel: [ 
       { name: 'Days', index: 'Days', width: 100, editable: true, editrules: { required: true }, }, 
       { name: 'OrigIB', index: 'OrigIB', width: 100, editable: true, editrules: { required: true }, }, 
       { name: 'OrigOB', index: 'OrigOB', width: 100, editable: true, editrules: { required: true }, }, 
       { name: 'DestIB', index: 'DestIB', width: 100, editable: true, editrules: { required: true }, }, 
       { name: 'DestOB', index: 'DestOB', width: 100, editable: true, editrules: { required: true }, }, 
       { name: 'ID', index: 'ID', width: 80, Key: true, hidden: true } 
       ], 
     loadonce: false, 
     pager: '#pagingGrid', 
     rowNum: 10, 
     rowList: [10, 20, 30, 'All'], 
     viewrecords: true, 
     gridview: true, 
     autoencode: true, 
     loadComplete: function (data) { 
      $(".ui-pg-selbox option[value='All']").val(10000); 

      var chartData = new google.visualization.DataTable(); 
      chartData.addColumn('number', 'Days'); 
      chartData.addColumn('number', 'Origin IB Loads'); 
      chartData.addColumn('number', 'Origin OB Loads'); 
      chartData.addColumn('number', 'Dest IB Loads'); 
      chartData.addColumn('number', 'Dest OB Loads'); 
      for (var i = 0; i < data.length; i++) { 
       chartData.addRow([data[i].Days, data[i].OrigIB, data[i].OrigOB, data[i].DestIB, data[i].DestOB]); 
      } 

      var options = { 
       title: 'Single Lane Route Quote', 
       is3D: true, 
       curveType: 'function', 
       legend: { position: 'bottom' }, 
       vAxis: { title: "Days" }, 
       hAxis: { title: "Loads" } 
      }; 

      var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
      chart.draw(chartData, options); 
     } 

     }, 
     caption: 'Graph Data', 
     editurl: 'Handler2.ashx' 
    }); 

    jQuery("#dataGrid").navGrid("#pagingGrid", { 
     edit: true, 
     add: true, 
     del: true, 
     search: false, 
     //searchtext: "Search", 
     refresh: true 
    }, 
    { 
     closeAfterEdit: true, 
     reloadAfterSubmit: true 
    }, 
    { 
     closeAfterAdd: true, 
     reloadAfterSubmit: true 
    }, 
    { 
     reloadAfterSubmit: true 
    }); 
}