[[ノート/ノート]]~
訪問者数 &counter(); 最終更新 &lastmod();
いくつか可能性があるらしい。
-今やっている方法 ⇒ python+matplotlibでpng画像を作り、それをWebで表示する
-javascriptを使う ⇒ たとえば、[[MoonGiftでグラフ関連の記事一覧:http://www.moongift.jp/tag/%E3%82%B0%E3%83%A9%E3%83%95]]
javascriptにもいくつか流儀があるようで、クライアント側で絵を描くがそのデータをサーバーから供給するやり方と、サーバー側で絵をかいてしまう？やり方とあるようだ。
***サーバー側で動かすタイプ [#t30c9751]
サーバー側で動かすタイプとして~
>どうもサーバー側で動かす」は嘘くさい。サーバー側でjavascriptで書かれた非同期サーバーを置くが、そのサーバーで結局グラフデータを読み出して表示するスクリプトをクライアントに送り込んでいるだけでは？
-[[Charted - 外部のCSV/Googleスプレッドシートをグラフに:http://www.moongift.jp/2014/12/charted-%E5%A4%96%E9%83%A8%E3%81%AEcsvgoogle%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88%E3%82%92%E3%82%B0%E3%83%A9%E3%83%95%E3%81%AB/]]
-[[ChartdのGitHub]https://github.com/mikesall/charted]]
で、この環境を走らせるためには、サーバーを実現するためのnode.jsだのnpmだのが欲しい。
サーバーサイドのjavascriptというのは、何となく慣れないところがある。
とにかくネットで情報を探してみる。
-[[フロントエンド開発の３ステップ（npmことはじめ）:http://qiita.com/hashrock/items/15f4a4961183cfbb2658]]
-[[node.jsのwikipedia記事:https://ja.wikipedia.org/wiki/Node.js]]
-[[いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜:http://liginc.co.jp/web/programming/node-js/85318]]
-[[Node.js を5分で大雑把に理解する:http://qiita.com/hshimo/items/1ecb7ed1b567aacbe559]]
-[[いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール (1/2):http://www.atmarkit.co.jp/ait/articles/1501/09/news040.html]]
node.jsの議論は、要するにサーバーを端末対応に大量に起動することを考えると、下手な作りではオーバーヘッドが大きくなりすぎるので、その辺を非同期とか使って軽減しているということらしい。
***クライアント側で動かすタイプ [#nd791b90]
もう１つの、クライアント側で動かすタイプとして、たとえばChart.jsがある。
-[[Chart.jsで折れ線・円・棒グラフを簡単に表示する方法:http://allabout.co.jp/gm/gc/459916/]]
-[[chart.js入門:http://qiita.com/kazu56/items/17acf7ad2d87d6b28173]] データを取り込む方法も書いてある
-こんな記事もあった [[D3.js チュートリアル：基本9 – csvとJSONファイルの読み込み:http://dataisfun.org/2014/05/20/?p=299]]
ポイントは、html5/canvasを使うのでこれらが使える端末なら動くことだろう。
---------------------
**で、Chart.jsで考えてみよう [#yccafee1]
まずは、この辺からスタート
-[[Chart.jsで折れ線・円・棒グラフを簡単に表示する方法:http://allabout.co.jp/gm/gc/459916/]]
-[[chart.js入門:http://qiita.com/kazu56/items/17acf7ad2d87d6b28173]] （特にサーバ側からのデータの受け渡しを含めた書き方）~
というか
-[[PHPからJavaScriptに変数を渡すまとめ:http://qiita.com/cither/items/b98cc4e237dcc8f7e51f]]
まず、Chart.jsのサンプルは動いた。以下単純なHTMLファイル。
<!DOCTYPE html>
<html lang="ja">
<!--- chart.jsのサンプル --->
<head>
<script src="Chart.min.js" type="text/javascript"></script>
</head>
<body>
<canvas id="graph-area" height="450" width="600">
</canvas>
<script type="text/javascript">
// ▼グラフの中身
var lineChartData = {
labels : ["初期","1期","2期","3期","4期","5期","終期"],
datasets : [
{
label: "緑データ",
fillColor : "rgba(92,220,92,0.2)", // 線から下端までを塗りつぶす色
strokeColor : "rgba(92,220,92,1)", // 折れ線の色
pointColor : "rgba(92,220,92,1)", // ドットの塗りつぶし色
pointStrokeColor : "white", // ドットの枠線色
pointHighlightFill : "yellow", // マウスが載った際のドットの塗りつぶし色
pointHighlightStroke : "green", // マウスが載った際のドットの枠線色
data : [ 100, 97, 87, 50, 21, 13, 10 ] // 各点の値
},
{
label: "青データ",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "white",
pointHighlightFill : "yellow",
pointHighlightStroke : "blue",
data : [ 30, 60, 30, 80, 95, 20, 50 ]
}
]
}
// ▼上記のグラフを描画するための記述
window.onload = function(){ var ctx = document.getElementById("graph-area").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData);
}
</script>
</body>
</html>
とこんなかんじ。
次に、PHPからJSONデータを渡して、javascriptで読み取る、というテスト （[[PHPからJavaScriptに変数を渡すまとめ:http://qiita.com/cither/items/b98cc4e237dcc8f7e51f]]。
以下はPHPプログラムなので拡張子phpとしてファイルに作ること。
<!DOCTYPE html>
<html lang="ja">
<!--- jqueryによるデータの受け渡し --->
<head>
<script src="Chart.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<?php
$array = array("hoge" => "fuga", "are" => "kore");
?>
<script>
var array = <?php echo json_encode($array, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>;
console.log(array); // Object { hoge: "fuga" }
document.write(array.hoge);
document.write(" ");
document.write(array.are);
</script>
</body>
</html>
これを実行する（ブラウズする）と、hoge are と表示（document.write）する。
では、PHPとJSを別ファイルにするとどうなる？
jqpassdata.php
<!DOCTYPE html>
<html lang="ja">
<!--- jqueryによるデータの受け渡し、データ行き先はjqpassdata.js --->
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<?php
$array = array("hoge" => "fuga", "are" => "kore");
?>
<script id="script" src="jqpassdata.js"
data-array = '<?php echo json_encode($array, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>' ;
>
</script>
</body>
</html>
jqpassdata.js
//<!--- jqueryによるデータの受け渡し、受け側 --->
var $script = $('#script');
var array = JSON.parse($script.attr('data-array'));
console.log(array); // Object { hoge: "fuga" }
document.write(array.hoge);
document.write(" ");
document.write(array.are);
***それでいろいろこねくり回した結果（2016-01-02) [#j321d331]
twdataread.php
<!DOCTYPE html>
<html lang="ja">
<!--- jqueryによるtwitterカウントデータの受け渡し、データ行き先はjqpassdata.js --->
<head>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="refresh" content="30">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script src="Chart.min.js" type="text/javascript"></script>
</head>
<body>
<canvas id="graph-area" height="600" width="800">
</canvas>
<?php
$MySQLHost = 'localhost';
$MySQLUserName = 'twitter';
$MySQLPassword = 'chariot7';
$MyLink = mysql_connect($MySQLHost, $MySQLUserName, $MySQLPassword);
$MySQLDatabase = 'twitter';
mysql_select_db($MySQLDatabase, $MyLink);
$numdata = 72;
$datebase = (int)date("ymdH");
for ($i=0; $i<$numdata; $i++) {
$tablebase = $datebase - $numdata + $i + 1;
$tablename = "tw" . (string)($tablebase);
$Query = "SHOW TABLES LIKE '" . $tablename . "'";
$Result = mysql_query($Query, $MyLink);
if ($Result==false) {
print("<p>empty table " . $tablename . "<br>");
$count = 0;
} else {
$Query = "SELECT COUNT(*) FROM " . $tablename . "";
$Result = mysql_query($Query, $MyLink);
if (!$Result) {
//print("SQL fetch error<br>");
$count = 0;
} else {
//while ($Row = mysql_fetch_array($Result, MYSQL_ASSOC)) {
$Row = mysql_fetch_row($Result);
$count = $Row[0];
}
}
$element = array("date"=>(string)$tablebase, "count"=>(string)$Row[0]);
$array[] = $element;
}
?>
<script id="script" src="twdataread.js"
data-array = '<?php echo json_encode($array, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>' ;
>
</script>
</body>
</html>
twdataread.js
//<!--- jqueryによるデータの受け渡し、受け側 --->
var $script = $('#script');
var array = JSON.parse($script.attr('data-array'));
//console.log(array); // Object { hoge: "fuga" }
var $labels = [], $datasets = [];
var $numdata = 72;
for (var i=0; i<$numdata; i++) {
//document.write(array[i].date);
//document.write(" ");
//document.write(array[i].count);
//document.write("<br>");
$labels[i] = array[i].date
$datasets[i] = array[i].count
}
////////////////////////////////
// ▼グラフの中身
var lineChartData = {
labels : $labels,
datasets : [
{
label: "Hourly Number of Tweets",
//fillColor : "rgba(92,220,92,0.2)", // 線から下端までを塗りつぶす色
//strokeColor : "rgba(92,220,92,1)", // 折れ線の色
//pointColor : "rgba(92,220,92,1)", // ドットの塗りつぶし色
fillColor : "rgba(110,110,110,0.2)", // 線から下端までを塗りつぶす色
strokeColor : "rgba(110,110,110,1)", // 折れ線の色
pointColor : "rgba(110,110,110,1)", // ドットの塗りつぶし色
pointStrokeColor : "white", // ドットの枠線色
pointHighlightFill : "yellow", // マウスが載った際のドットの塗りつぶし色
pointHighlightStroke : "green", // マウスが載った際のドットの枠線色
data : $datasets // 各点の値
}
]
}
// ▼上記のグラフを描画するための記述
window.onload = function(){ var ctx = document.getElementById("graph-area").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData);
}
結果は
&ref(twdataread.png);
**またしてもSeLinuxでアクセス拒否問題 [#z38d5db8]
oregano上で、SeLinuxによって、ホームディレクトリ/public_html上のPHPプログラムから
mySQLをアクセスすると拒否される問題が起こった。
audit.logを見ると
type=AVC msg=audit(1451721990.366:42340): avc: denied { read } for pid=26270 comm="httpd" name="mysql" dev=dm-0 ino=3145787
scontext=unconfined_u:system_r:httpd_t:s0 tcontext=unconfined_u:object_r:mysqld_db_t:s0 tclass=lnk_file
いろいろ見たのだが、結局は、auditdを動かしておいて、まず
# audit2allow --module=httpd --all
module httpd 1.0;
require {
type user_tmp_t;
type smoltclient_t;
type root_t;
type mysqld_db_t;
type httpd_t;
type xdm_t;
class lnk_file read;
class file read;
class dir create;
}
#============= httpd_t ==============
allow httpd_t mysqld_db_t:lnk_file read;
#============= smoltclient_t ==============
allow smoltclient_t user_tmp_t:file read;
#============= xdm_t ==============
allow xdm_t root_t:dir create;
にてチェック。
次に、自動修正を試みる。
# audit2allow --module-package=httpd --all
******************** IMPORTANT ***********************
To make this policy package active, execute:
semodule -i httpd.pp
のあと
# semodule -i httpd.pp
これで、
# setenforce 1
で戻しても正常にアクセスできるようになった。
***時間軸の引算を間違っていた （2016-01-07） [#nfc49aea]
どうも古い方が０ばかりで、収集プログラムが死ぬからかと思ったら、表示プログラムにもエラーがあった。
どうも古い方が０ばかりで、収集プログラムが死んでデータが取れていないからかと思ったら、表示プログラムにもエラーがあった。（よく見ると前の図でも横軸のメモリの値がおかしい）
時間軸を作るために、現在の日時から決められた時間（７２時間）前までの１時間おきの日時文字列（16年01月04日15時、とか）を生成しているのだが、その時うっかりと現時点(int) 16010415から72を引算する
for (i=72; i>0; i--) {date = 16010415 - i}
ということをしていた。当然ながら、15以上を引くと、16010399とかになっておかしくなる。
この誤りに気が付かなかったのは、実は16010399とかがinvalidな日時だということを
チェックして居ながらエラーメッセージを出していない（無視するだけ）にしていたから
だった。えらいチョンボだった。
現在の描画は３日分ちゃんと出るようになった。
&ref(twdataread-new.png);
![[Toho University]](image/CLogo_Kihon_process.jpg "[Toho University]")
![[YYLAB]](image/yamanouc2.png "[YYLAB]")
