1. ホーム
  2. ブログ
  3. データ活用
  4. Data Analytics Park ~アナリティクスびより~
  5. ESBを使ってRDBのデータをGoogle Chartに表示してみる

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 type="text/javascript" src="http://www.google.com/jsapi">
<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);
 }
 });
 }

このページをWebブラウザで開くと、グラフとグリッドが表示されます。
グリッドはタイトルをクリックするとソート出来ます。
特にRESTサービスが簡単に構築できるところがいいですね。
Java(JDBC接続)でRESTサービスを開発することを考えると工数は1/10で出来る気がします。