JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
Spring-MVCの散歩道 > 応用の森(総合テクニック編) > WebSocketを使った、リアルタイムCPU使用率推移グラフ 
<!DOCTYPE html>

<html>
<head>
<title>CPU使用率</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />

<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="./js/jquery-2.1.3.js"></script>
<!--<![endif]-->

<!-- //※１）Google Chart JSのインクルード -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
<!--

$(function(){
    //※２）Google Chart Load
    google.charts.load('current', {'packages':['corechart']});

    //※３）WebSocket接続
    var ws = new WebSocket("ws://localhost:8080/j_Labo/wscpuused.xhtml");

    //WebSocket open時のイベントハンドラ登録
    ws.onopen = function(){
        //特になにもしません。;
    };

    //WebSocket close時のイベントハンドラ登録
    ws.onclose = function(){
        //特になにもしません。;
    };

    //※４）WebSocket message受信時のイベントハンドラ登録
    ws.onmessage = function(message){
        //console.log(message.data);
        //受信データをグラフに表示します。
        drawVisualization(message.data);
    };

    //WebSocket error時のイベントハンドラ登録
    ws.onerror = function(event){
        //サーバーからエラーが返ったらアラートを表示します。
        alert("エラー");
    };

    // Windowが閉じられた(例：ブラウザを閉じた/別のページに遷移した)時のイベントを設定
    $(window).unload(function() {
        ws.send("stop");
    });

    //※５）「開始」ボタンクリック時の処理
    $("#id_start").click(function() {
        //開始指示を送信
        ws.send("start");
    });

    //※６）「停止」ボタンクリック時の処理
    $("#id_stop").click(function() {
        //停止指示を送信
        ws.send("stop");
    });

    /**
     * ※７）Google Chart グラフ描画関数
     * 　　　graph_data：描画データ
     */
    function drawVisualization(graph_data) {
        //テキスト形式をJSONオブジェクトに変換します
        var json = $.parseJSON(graph_data);
        var chart_data = [];
        //グラフデータラベル
        var title_item = ['Time', 'used'];
        chart_data.push(title_item);

        //グラフデータ
        /**
         * 配列形式のJSONデータをひとつづつ、Google Chart描画形式のJSONフォーマットに変換します。
         */
        $.each(json, function(i) {
            var data_item = [];
            data_item.push(this.time);      //時刻（横軸ラベル）
            data_item.push(this.used);      //使用率
            chart_data.push(data_item);
        });
        //Googleグラフデータフォーマット変換
        var chart_val = google.visualization.arrayToDataTable(chart_data);

        //グラフオプション
        var options = {
            //グラフのタイトル
            title: 'CPU使用率',
            //グラフの色
            colors: ['deepskyblue'],
            //折れ線のマーカーサイズ
            pointSize: 4,
            //折れ線を曲線にする
            curveType: 'function',
            //凡例非表示
            legend: 'none',
        };  /* end of options */

        //折れ線グラウのインスタンスを作成する
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        //chart_div　エリアに折れ線グラフを描画する
        chart.draw(chart_val, options);
    }
});
//-->
</script>
</head>

<body class="in_background">
<table class="round">
    <tr>
        <td>
            <button id="id_start">開始</button> <button id="id_stop">停止</button>
        </td>
    </tr>
    <tr>
        <td>
            <div id="chart_div" style="width:100%; height: 500px;"></div>
        </td>
    </tr>
</table>
</body>
</html>