2016年3月22日火曜日

ESBを使ってRDBのデータをGoogle Chartに表示してみる

ESBグループの打田です。





今回はRDBのデータを取得し、Google Chartでグラフを表示してみます。
構成としては、ESBがRDBへ接続し結果をJSONでREST配信するので、それをJavaScriptで受け取ってGoogle Chartに渡します。

では作っていきましょう。
まずESB部分ですが、たった3ステップでRESTサービスを構築できます。
次にJavaScriptですが、HTMLページは以下のようになります。
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart","table"]});
google.setOnLoadCallback(drawChartSamplePie);
function drawChartSamplePie() {
$.ajax({
url:"/wmProxy/servlet/ProxyServlet",
method:"post",
data: {method:"get", uri:"rest/StressTest/REST/sales"},
dataType:"html",
cache:false,
success:function(data, textStatus){
var org = eval('('+data+')');
var array = new Array();
var off = 0;
array[off++] = ["年度", "売上高", "営業利益", "経常利益"];
for (var i=0; i<org.results.length; i++) {
array[off] = new Array();
array[off][0] = org.results[i].Year;
array[off][1] = parseInt(org.results[i].Sales);
array[off][2] = parseInt(org.results[i].Profit1);
array[off][3] = parseInt(org.results[i].Profit2);
off++;
}
var data = google.visualization.arrayToDataTable(array);
var options = {
title: '会社業績',
hAxis: {title: '年度'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('gct_sample_column'));
chart.draw(data, options);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
},
error:function(xhr, textStatus, errorThrown){
alert("error:"+errorThrown);
}
});
}
</script>
<div id="gct_sample_column" style="width: 80%;"></div>
<div id="table_div" style="width: 400px;"></div>

このページをWebブラウザで開くと、グラフとグリッドが表示されます。
グリッドはタイトルをクリックするとソート出来ます。

特にRESTサービスが簡単に構築できるところがいいですね。
Java(JDBC接続)でRESTサービスを開発することを考えると工数は1/10で出来る気がします。


0 件のコメント:

コメントを投稿