chart.js 4.2で時系列のグラフを書く(日付を扱うアダプタを指定必要)

chart.js 4系で、ポンと動くサンプルがWEB上に無かったので上げておきます。
chart.jsがバンドル版じゃない場合に、日付を扱うアダプタをちゃんと入れておかないと動かないサンプルプログラムが多いようです。(そんなの当たり前だろう、という事なのかもしれませんが、chart.js2系はmoment がデフォルトで入っているからポンと動くでの違いとして。)

日付のアダプタは下記から選べます。

https://github.com/chartjs/awesome#adapters

上記ページからリンクしたらgithubページに各アダプタのCDNのURLがあります。
moment が推奨されてないという情報が増えているので、サンプルプログラムでは、date-fnsにしています。
(アダプタ使わずに Dataオブジェクト指定、フォーマットは自前でやるなど、javascriptネイティブで動作させる、という方法もありそうですが、、詳細調査未。)

※ソースは、とりあえず動く適当なものです。

 

 

GoogleMapのMarkerClustererのアイコンが表示されなくなったら

いつの間にかGoogleが公開しているクラスターマップ用の画像が無くなっているようです。
GitHub(https://github.com/googlemaps/js-marker-clusterer)からソースを落として、自サーバーに配置して、MakerClustererのオプションでパスを指定したら解決します。(相対パス指定する場合は、jsファイルからのパスではなく、表示するWEBページからの相対パスになりますので注意です。最後に「/m」を付ける必要があります。)

 

jqueryプラグイン「DateTimePicker」で土日の色変更

CSS3対応で日曜日始まりの設定が前提ですが、曜日の見出し欄を装飾する方法。

ちなみに日付欄は曜日番号ごとのclass、xdsoft_day_of_week0(日曜日) ~ 6(土曜日)が固定で割り当てられているのでそれをセレクタに指定すれば、開始曜日の設定を変更しても大丈夫そう。
※dayOfWeekStart:1 月曜始まり
dayOfWeekStart:0(default) 日曜始まり

 

公式サイトはこちら

http://xdsoft.net/jqplugins/datetimepicker/

js エラー 「識別子、文字列または数がありません」

ボタンをクリックされたら ajax を使用してデータを取得し、

php 側でテーブル等のタグを全部生成して返し

javascript では返ってきたデータを jquery の html メソッドで

表示する、というプログラムを作っていた。

 

掲題のエラーは jquery.js 内の

elem.innerHTML = value;

の箇所で発生していた。

 

調べた所、掲題のエラーは IE6 や IE7 で

var hoge = { arg1, arg2, };

のようにarg2 の後ろに余分なカンマが

ある場合に起きるエラー、とのことだった。

 

今回のエラーとの関連は余りなさそうだ。

 

PG を調べた所、php でテーブルタグを生成するのに

ヒアドキュメントを使用していた。

$data = <<<DATA

<table>

<tr><td></td></tr>

</table>

DATA;

のような感じ。

ループの中でタグにid を振るときに

ヒアドキュメントの中で

for($i = 0; $i < count($data); $i++){

$ret_data = <<<DATA

~~ 中略 ~~

<input type=”text” id=”hoge_{($i + 1)}”>

のように括弧を駆使していたが、

どうやらこれがエラーの素だったようだ。

ここの所を

<input type=”text” id=”hoge_%u”>

として

$data = sprintf($data, ($i + 1));

のようにsprintf() で置換するように修正することでエラーが発生しなくなった。

へぇ~。

 

jQueryのdataTablesでチェックボックスの一括ON/OFF

下記のような通常のjQueryの処理方法では、dataTablesの内部データは変更されず、フィルタや改ページで非表示状態の行は処理されません。

$(‘#list input[type=”checkbox”]’).prop(‘checked’,false );

 

下記の方法ならdataTablesの内部データも変更され、非表示行もきちんと処理されます。

list = $(‘#list’).dataTable({・・・});

list.$(‘.chk_sel’).prop(‘checked’,false );

以上です。