DataTables.js の Dataを Highcharts.js に反映させてみる

2019年12月18日2020年1月9日

どう言う事かと言うと、
DataTables.js を使った
HTML table のデータを
Highcharts.js に
表示すると言うものです。

DataTables.js とは、
HTMLのtable要素に
ページングやソート機能を
付ける事の出来る
JavaScriptライブラリです。

そして、
Highcharts.js ※ は
チャートを表示する
JavaScriptライブラリです。

※ 商用サイトの場合はLicenses を
取得する必要があります。

先ずは以下をご覧ください。

上記ライブラリを使って
愛猫ルナの血液検査結果の
RBC (赤血球) と Hgb (ヘモグロビン) の
Dataを表とグラフにしたものです。

Date	RBC level (10⁶/㎕)	Hgb level (g/dL)
Day 1	5.1	7.8
Day 2	4.9	7.4
Day 3	4.76	7.2
Day 4	4.49	6.7
Day 5	4.51	6.7
Day 6	3.82	5.4
Day 7	3.50	5.1

上記が、
DataTables.js と
Highcharts.js を使用して
Dataを表示させたものです。

テーブルの Date の横にある
▲ をクリックすると
データがソートされますが、
それに準じてチャートの
Dataもソートされます。

以下の CodePen を
参照してください。

See the Pen Data Visualization With DataTables.js and Highcharts.js by Envato Tuts+ (@tutsplus) on CodePen.

数ヶ所つまずきましたが、
上記 CodePen のソースで
上手くいくと思います。

必要なライブラリは、

• jQuery
• DataTables.css
• DataTables.js
• Highcharts.js
• no-data-to-display.js

注：DataTables.js は jQuery プラグインであるため、
jQuery をプロジェクトに追加する必要がありました。
ただし、Highcharts.js は純粋な JavaScript ライブラリであるため、
jQuery を必要としないことに注意してください。

必要なデータを取得するために、
DataTables APIを利用する関数で
少し変更しました。

function getTableData(table) {
  const dataArray = [],
  countryArray = [],
  populationArray = [],
  densityArray = [];
  // loop table rows
  table.rows({ search: "applied" }).every(function () {
    const data = this.data();
    countryArray.push(data[0]);
    populationArray.push(Number(data[1]));
    densityArray.push(Number(data[2]));
  });
  // store all data in dataArray
  dataArray.push(countryArray, populationArray, densityArray);
  return dataArray;
}

チャートの作成に関して、
Highcharts.setOptions で
lang.thousandsSep を
設定しているのはなぜ？

  Highcharts.setOptions({
    lang: {
      thousandsSep: "," } });

ツールチップで
表示される数値を
カンマ区切りの
値で表示するためのようです。

DataTables.js と Highcharts.js の
Option に関しては
割愛させて頂きます。

その他、
詳細は以下のリンクを参照してください。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました