いよいよ大詰め！ ダッシュボードのコーディング
では、ダッシュボードの処理をJavaScriptで実装しましょう[3]。新たにファイルを作成し、index.htmlという名前で保存してください。
まず、1日目と同様に、Amazon Cognitoからテンポラリの認証情報を取得します。
var params = {
IdentityPoolId: "us-east-1:xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
};
AWS.config.region = 'us-east-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials(params);
IdentityPoolIdには実際の値をセットしてください。
えっと、名前じゃなく、IDのほうですよね。はい、設定しました。
続いて、Amazon DynamoDBから集計値を取得します。counterテーブルからevent_idが1の項目を取得してデータを取り出し、グラフ用に配列を作ります。グラフの描画には、D3.jsというライブラリとそのラッパーライブラリであるNVD3を使います。描画するための元データとしてAmazon DynamoDBからデータを取り出して配列を作成します。
var dynamodb = new AWS.DynamoDB();
var dynamodbTable = 'counter';
var chartData = new Array();
function getData(){
var params = {
TableName: dynamodbTable,
Key: {
'event_id': {
N: '1'
}
}
};
dynamodb.getItem(params,function(err, data) {
if (!err) {
setData(data['Item']);
}else{
console.log("Error: " + err);
}
});
};
function setData(data){
var d3Data = new Array();
var inData = {};
var finalData = new Array();
var arrData;
for (var element in data) {
if(element != 'event_id'){
d3Data.push({"label":element,"value":parseInt(data[element]['N'])});
}
}
inData.key = "Cumulative Return";
inData.values = d3Data;
finalData[0] = inData;
drawChart(finalData);
}
getData()でDynamoDBのcounterテーブルからevent_idが1の項目をgetItem()というメソッドを用いて取得します。そして、getItem()ではコールバックとして、取得した値をグラフ用配列にセットする関数として用意したsetData()を呼び出しています。setData()では受け取った配列をもとにD3.js用にデータを用意し、最後にグラフを描画するdrawChart()という関数を呼び出しています。
drawChat()という関数の中身は次のように用意します。
function drawChart(d3Data) {
nv.addGraph(function() {
chart = nv.models.discreteBarChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.staggerLabels(true)
.tooltips(false)
.showValues(true);
d3.select("#chart svg")
.datum(d3Data)
.call(chart);
nv.utils.windowResize(chart.update);
});
};
最後にここで実装したgetData()を1秒（＝1000ミリ秒）に1回実行するようにします。
setInterval("getData()",1000);
また、HTMLファイル内でグラフを描画したい位置に以下のタグを挿入します。
<svg id="chart" class="barChart"></svg>
保存したらAmazon S3に、このファイルをアップロードしましょう。
[3] 本連載で作成している「スマホフレーフレー言語応援アプリ」の全コードは、AWS Summit Tokyo 2015 デベロッパーカンファレンスの開催後（6月3日以降）に公開します。入手したい方、ご興味のある方は開催後に本連載を再度ご覧ください。
