いままでPHPでがんばってたんですが。。。
おかしいよな、PHPでやり方を発信するはずがJavaScriptを使用なんて。
グラフ表示には 調べた結果Highchartsというのがよさそう
↓
でもJavaScriptで書く必要がある
↓
PHPのデータで保存したファイルをJavaScriptで逐次読もうと考えたけど難しそう
↓
PHPあきらめて JavaScriptでやり始める
↓
Firefoxにできたhtmlファイルを突っ込んで確かめていたけど、途中でChromeを右クリックの「検証」でブレークとかエラー表示が見えることに気付く
↓
グラフの見栄え・気になる所をいろいろいじったらすごい時間をかかるのである程度妥協する
↓
そして、出来上がったのがこれ
HighchartsとJavaScriptを無勉から、
勘で作り上げました。
Highchartsの
こちらをベースにしています。
仕様は
・20点のデータ
・2秒間隔で取得
・高評価と低評価。チャンネル登録者数を表示
・最新値が見えるようにする
右が最新のデータで、左が過去データで流れていきます。
これがコードです。このhtmlをChromeやFirefoxに放り込んでみてください。古いIEでは動きません。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>Live data</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</head>
<body>
<script>
var input_y0=0,input_y1=0,input_y2=0;
var key = "①";
var videoId = "②";//今回はvideoIdを入力
var channelId="";//こっちは空欄でOK
function requestvideo() {
return $.ajax({
type: 'GET',
url: 'https://www.googleapis.com/youtube/v3/videos?part=statistics,snippet,liveStreamingDetails&id=' + videoId + '&key=' + key,
dataType: 'json',
async: false,//同期処理にする
error: function() {
//error func
$('#yt-list').append('<li>Youtubeのデータが取得できませんでした。<\/li>');
}
}).done(function (jsondataYt) {
channelId = jsondataYt.items[0].snippet.channelId;
input_y0 = parseFloat(jsondataYt.items[0].statistics.likeCount);
input_y1 = parseFloat(jsondataYt.items[0].statistics.dislikeCount);
});
}
function requestchannel() {
return $.ajax({
type: 'GET',
url: 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id=' + channelId + '&key=' + key,
dataType: 'json',
async: false,//同期処理にする
error: function() {
//error func
$('#yt-list').append('<li>Youtubeのデータが取得できませんでした。<\/li>');
}
}).done(function (jsondataYt) {
input_y2 = parseInt(jsondataYt.items[0].statistics.subscriberCount);
});
}
Highcharts.setOptions({
global: {
useUTC: false
},
lang: {
numericSymbols: null//軸のkキロ表示をやめる
}
});
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 100,//右の軸が隠れるので適切な値にする
events: {
load: function () {
// set up the updating of the chart each second
var series0 = this.series[0];
var series1 = this.series[1];
var series2 = this.series[2];
setInterval(function () {
var x = (new Date()).getTime(); // current time
requestvideo();//YouTubeAPI ビデオ側
requestchannel();///YouTubeAPI チャンネル側
series0.addPoint([x, input_y0], true, true);
series1.addPoint([x, input_y1], true, true);
series2.addPoint([x, input_y2], true, true);
series0.update({name: '高評価:'+input_y0});
series1.update({name: '低評価:'+input_y1});
series2.update({name: '登録者数:'+input_y2});
}, 2000);//2秒のインターバルタイマ
}
}
},
title: {
text: 'Live data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: [
{ // 1つ目のy軸設定
title: {
text: '評価'
},
plotLines: [{
value: 0,
width: 1,
color: '#FF8080'
}],
allowDecimals: false //軸を整数表示
},
{ // 2つ目のy軸設定
title: {
text: '登録者数'
},
allowDecimals: false, //軸を整数表示
opposite: true // trueの場合グラフの右側にy軸を配置する
}
],
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + this.y;
}
},
legend: {
enabled: true //凡例表示
},
exporting: {
enabled: false
},
series: [{
name: '高評価',
yAxis: 0,
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: null
});
}
return data;
}())
},
{
name: '低評価',
yAxis: 0,
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: null
});
}
return data;
}())
},
{
name: '登録者数',
yAxis: 1,
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: null
});
}
return data;
}())
}
]
});</script>
</body>
</html>
注釈として
なんか上のコードの色が変ですがあきらめました。
Highchartsは、ダウンロードしても使えるみたいですがしなくてもできるらしいです。今回はダウンロードなしで使用しています。
16と17行目はPHPと使い方は同様です。APIキーと動画IDいれてください。
APIの使いかたはPHPと同じようなものです。URL作って投げて、レスポンスを使用する形は変わりません。
25行目と43行目については、PHPと違いJavascriptだとレスポンスが返るまでまたず処理が進んでしまう、雑な対策としてこの行追加でレスポンスが返るまで待ち状態となります。これでPHPと同じ感じに動作します。
62行目 Y軸が1000を1kとかの表示するのを禁止します。
71行目 第２のY軸を右に置こうとしたら表示されないので苦労しました。原因は画面の外に表示されていました。この値を増加したら解決。これで1時間は無駄にしました。
80行目は2秒周期インターバル動作させています。
85行目あたりaddPointのtrueとかすることによってシフト動作してくれます
88行目 汎用に最新値表示しています。最新の値をプロット上に出したかったのですがdataの要素の最後だけlabel表示をenableにしてもシフト動作すると前の要素に移動していってしまうのでaddPointを使わずfor文なりで更新するのがよさそう？メンドクサイのであきらめました。
112行目と118行目でY軸が整数表示
119行目で二つ目のY軸を右側に置きます
136行目でどちらのY軸に表示するか決まります
142行目等のi=-19でデータの点数を20点してます。-199にすれば200点になります。
なんとかやりきった。疲れた。
