【SpringMVC】GoogleChartsの利用 – Un Known…(跡地) 技術メモ

画面でボタン押下時にモーダルダイアログを表示し、
GoogleChartsを利用し、グラフを表示します。

画面の処理
ボタンにIDを追加する。

ソースを表示
印刷 SyntaxHighlighterについて
1 <button id="bsButton" type="button" class="btn btn-danger">グラフ表示</button>

モーダルダイアログの表示領域を設定する。

ソースを表示
印刷 SyntaxHighlighterについて
1 
2 <div th:fragment="chart-create-modal">
3   <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1">
4     <div class="modal-dialog modal-lg">
5       <div class="modal-content">
6         <div class="modal-header">
7           <button type="button" class="close" data-dismiss="modal">×</button>
8           <h3 class="modal-title" id="myModalLabel">タイトル</h3>
9         </div>
10         <div class="modal-body">
11           <div id="chart_div" style="width: 400px; height: 400px;"></div>
12         </div>
13       </div>
14     </div>
15   </div>
16 </div>

JavaScriptでサーバー側からデータ取得処理を呼び出し
GoogleのAPIにデータを渡します。

ソースを表示
印刷 SyntaxHighlighterについて
1 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
2 <script type="text/javascript">
3 google.load("visualization", "1", {
4   packages : [ "corechart" ]
5 });
6 <!--
7 $(document).ready(function() {
8   $("#bsButton").click(showChart);
9 });
10
11 function showChart() {
12   $.post(
13     '/sample/showChart', // URL
14     {},                  // Userデータ
15     function(result) {
16       $("#myModalLabel").html("テストグラフ");
17       $('#myModal').modal('show');
18       var data = google.visualization.arrayToDataTable(result);
19       var options = {
20         title : 'テストグラフタイトル',
21         vAxis : {title : "縦座標"},
22         hAxis : {title : "横座標"},
23         seriesType : "bars",
24         series : {5 : {type : "line"}}
25       };
26       var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
27       chart.draw(data, options);
28     },                   // 成功時のコールバック
29     "json"               // JSON形式
30   );
31 }

サーバの処理
サーバー側からデータを取得しJSON形式で返します。

ソースを表示
印刷 SyntaxHighlighterについて
1 @RequestMapping(value = "/showChart", method = RequestMethod.POST)
2 @ResponseBody
3 public Object[][] showChart(WebRequest request) {
4     int rows = 3;
5     int cols = 6;
6     Object[][] result = new Object[rows][cols];
7     int row=0, col=0;
8     // result配列にヘッダとデータを設定
9     return result;
10 }