便利で無料で手軽に動作するGoogleCharts。IoTで収集したデータをとりあえず可視化したいという需要が増しているので活用機会は多々あります。
今回は「LineCharts」を動かします。
GoogleCharts
https://developers.google.com/chart/interactive/docs/gallery
LineCharts
https://developers.google.com/chart/interactive/docs/gallery/linechart
自室の温湿度を可視化しました。屋外と異なって変動が小さいですね。
実際にコチラで動作させられます。
手順としては下記のとおり
- GoogleCharts使用開始のおまじない
- データTableの定義
- データ読み込み(今回はajaxによるhttp通信でjsonファイルを取得。)
- 取得したデータを加工しながら格納
- 可視化実行
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script><script type='text/javascript'> // GoogleCharts利用開始の儀式 google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { console.log("START"); // データを定義 var data = new google.visualization.DataTable(); data.addColumn('datetime', 'Date'); data.addColumn('number', 'TEMPERATURE'); // ajaxによるデータ取得。ここではjsonを取得。CORSに注意。 $(function() { $.ajax({ url: 'http://****/sample.json', }) .done(function(tempData){ console.log("success loading"); var rows = new Array(); // httpで取得したjsonを形式整理しながら格納。 $(tempData).each(function(){ var row = [new Date(parseInt(this.YEAR), parseInt(this.MONTH)-1, parseInt(this.DAY), parseInt(this.HOUR), parseInt(this.MINUTE)), this.TEMPERATURE]; rows.push(row); console.log(row); }); data.addRows(rows); // グラフ表示形式の編集 var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'right' } }; // 可視化実行 var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, {displayAnnotations: true}); }) .fail(function(){ console.log("error"); }); }); } </script> |
ちなみにソースコード貼り付けには以下を利用。WordPressにペタッと貼れるかと思ったらプラグインやらマークアップ対策やら案外手間でした。
http://tomari.org/main/java/html-mojihenkan.html