複数のGoogle Chartsと同じページの同一データからエンティティモデル

Question

私は、最初のチャートのために引き出されているのと同じデータを使ってWebページをセットアップしようとしています。データはedmxエンティティモデルによって取得されています。以下のコードは1つのグラフで動作します。同じデータを使って同じページにも円グラフを追加したいと思います。私が見てきたすべての例は、静的なデータを使ったグラフです。私のコードは以下の通りですが、私が何らかの形で持っているものだけを再現する必要があることを知っています。おかげで、

<script type="text/javascript" src="https://www.google.com/jsapi"> 
    </script> 
    @section Scripts{ 
    <script> 

    $(document).ready(function() { 
     //Load Data Here 
     var chartData = null; 
     $.ajax({ 
      url: '/GoogleChart/GetSalesData', 
      type: 'GET', 
      dataType: 'json', 
      data: '', 
      success: function (d) { 
       chartData = d; 
      }, 
      error: function() { 
       alert('Error!'); 
      } 
     }).done(function() { 
      drawChart(chartData); 
     }); 
    }); 

    function drawChart(d) { 
     var chartData = d; 
     var data = null; 
     data = google.visualization.arrayToDataTable(chartData); 

     var view = new google.visualization.DataView(data); 
     view.setColumns([0, { 
      type: 'number', 
      label: data.getColumnLabel(0), 
      calc: function() { return 0; } 
     }, { 
      type: 'number', 
      label: data.getColumnLabel(1), 
      calc: function() { return 0; } 
     }, { 
      type: 'number', 
      label: data.getColumnLabel(2), 
      calc: function() { return 0; } 

     }]); 

     var chart = new google.visualization.ColumnChart(document.getElementById('visualization1')); 

     var options = { 

     } 

     var runFirstTime = google.visualization.events.addListener(chart, 'ready', function() { 
      google.visualization.events.removeListener(runFirstTime); 
      chart.draw(data, options); 
     }); 

     chart.draw(view, options); 
    } 

    google.load('visualization', '1', { packages: ['corechart'] }); 

</script> 

<div id="visualization1" style="width:900px; height:500px"></div> 


    } 

Answer 1

まず、使用することをお勧め...

<script src="https://www.gstatic.com/charts/loader.js"></script> 

ない...

<script src="https://www.google.com/jsapi"></script> 

release notes ...

に応じたバージョンのjsapiで利用可能なGoogle Chartsローダーは一貫して更新されなくなりました。これからは新型のloader.jsを使用してください。

注：下図のようにload文が
は後loadステートメントがあり、あなたが必要な数のグラフを描くことができ、次の

---

...、唯一の違いになります完了しました

callbackを必ず設定する必要があります。
Googleのグラフにはl

複数のパッケージのような同じ時間

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

the callbackも...読み込みが終了する文書を待ちます

でロードすることができます...要求packagesのすべてoaded 、$(document).readyは不要です

---

セットアップsimil次のAR ...

<script src="https://www.gstatic.com/charts/loader.js"></script> 
@section Scripts{ 
<script> 
    function loadData() { 
    $.ajax({ 
     url: '/GoogleChart/GetSalesData', 
     type: 'GET', 
     dataType: 'json', 
     data: '', 
    }).fail(function (jq, text, errMsg) { 
     console.log(text + ': ' + errMsg); 
    }).done(function (jsonData) { 
     drawCharts(jsonData); 
    }); 
    } 

    function drawCharts(jsonData) { 
    var chartData = google.visualization.arrayToDataTable(jsonData); 

    var chartCol = new google.visualization.ColumnChart(document.getElementById('visualization-col')); 
    chartCol.draw(chartData); 

    var chartPie = new google.visualization.PieChart(document.getElementById('visualization-pie')); 
    chartPie.draw(chartData); 

    var chartTable = new google.visualization.Table(document.getElementById('visualization-table')); 
    chartTable.draw(chartData); 
    } 

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

</script> 

<div id="visualization-col"></div> 
<div id="visualization-pie"></div> 
<div id="visualization-table"></div> 
} 

---

注：各チャートはあり、特定data format

'corechart'におけるチャートのほとんどは罰金になりますが、
ないすべてのチャートは、同じデータでも動作しますテーブル...