【SpringMVC】GoogleChartsの利用

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

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

  <button id="bsButton" type="button" class="btn btn-danger">グラフ表示</button>
  

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

  <!-- Chart Create Modal -->
  <div th:fragment="chart-create-modal">
    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h3 class="modal-title" id="myModalLabel">タイトル</h3>
          </div>
          <div class="modal-body">
            <div id="chart_div" style="width: 400px; height: 400px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  

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

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
  google.load("visualization", "1", {
    packages : [ "corechart" ]
  });
  <!--
  $(document).ready(function() {
    $("#bsButton").click(showChart);
  });
  
  function showChart() {
    $.post(
      '/sample/showChart', // URL
      {},                  // Userデータ
      function(result) {
        $("#myModalLabel").html("テストグラフ");
        $('#myModal').modal('show');
        var data = google.visualization.arrayToDataTable(result);
        var options = {
          title : 'テストグラフタイトル',
          vAxis : {title : "縦座標"},
          hAxis : {title : "横座標"},
          seriesType : "bars",
          series : {5 : {type : "line"}}
        };
        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      },                   // 成功時のコールバック
      "json"               // JSON形式
    );
  }
  

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

  @RequestMapping(value = "/showChart", method = RequestMethod.POST)
  @ResponseBody
  public Object[][] showChart(WebRequest request) {
      int rows = 3;
      int cols = 6;
      Object[][] result = new Object[rows][cols];
      int row=0, col=0;
      // result配列にヘッダとデータを設定
      return result;
  }