【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;
    }