WordPress(Gutenberg)にChart.jsでcsvファイルのグラフ表示（前編）

WordPress(Gutenberg) でChart.jsを使ったグラフ表示を試してみました。
javascript はほとんど触ったこと無いのですが、他の方のページを参考に出力できました。

WordPress でグラフを出してみる
Chart.js のデータ部分をcsvファイルにする

WordPress でグラフを出してみる

今回はWordPressにグラフを出してみたいと思い検索したところ、Chart.jsを使うと格好いいグラフが簡単に出せることがわかりました。

まずは以下のページを参考にグラフを出力してみます。

【プラグインなし】WordPressへグラフを挿入する方法を解説！【Chart.js】

WordPressでグラフを表示させる方法について解説します。Chart.jsを使うことで、プラグイ...続きを読む

元の記事では『「テキスト」の状態で貼り付けるだけでできます』とありますが、おそらく以前のエディタだと思います。
ブロックエディタ（Gutenberg）では「カスタムHTML」のブロックを作って、そこに貼ると行けますね。
同じ内容だとつまらないので、自分の体重の変化のグラフにしてみます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<canvas id="myChart1" style="padding: 0px 10px 0px 10px;"></canvas>
<script>
var ctx = document.getElementById('myChart1').getContext('2d');
var myChart1 = new Chart(ctx, {
type: 'line',
data: {
labels: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],
datasets:[{
label: '体重',
data: [79.5, 75.9, 75.65, 71.30, 70.73, 67.94, 67.11, 66.02, 67.45, 67.15],
borderColor: "rgba(50,205,50,0.8)",
backgroundColor: "rgba(50,255,50,0.8)",
fill: false,
lineTension: 0,
}]
}
});
</script>

var ctx = document.getElementById('myChart1').getContext('2d');

var myChart1 = new Chart(ctx, {

type: 'line',

data: {

labels: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],

datasets:[{

label: '体重',

data: [79.5, 75.9, 75.65, 71.30, 70.73, 67.94, 67.11, 66.02, 67.45, 67.15],

borderColor: "rgba(50,205,50,0.8)",

backgroundColor: "rgba(50,255,50,0.8)",

fill: false,

lineTension: 0,

}]

}

});

</script>

「カスタムHTML」のブロックにコピペして「プレビュー」をやるとブロックエディタ上で既にグラフが表示されました！凄い簡単ですね！

このように、Chart.js で作ったグラフは単なる画像では無く、マウスをグラフのデータのところに持っていくとデータの数値が見えたりと格好いいことができます！
あれ、スマホで見るとそこまで格好良くない！？

ちなみにどうでもいいですが、体重は最初の5ヶ月で10kg落ちてその後は低迷中です。笑

最初の5ヶ月で体重を落とした主なやり方は、リングフィット＋月曜断食ですかね。
月曜断食は効果がありますが何も食べないのは体に悪いこともあるようなので、今はやり方を変えて継続中です。

Chart.js のデータ部分をcsvファイルにする

先ほどのやり方ではデータを書き込まないといけないので、たとえば1000件とかデータがあると実質無理ですね。
そこで、csvファイルからChart.jsにデータを取り込んで表示する方法を調べてみたところ、以下の記事が参考になりました。

Chart.jsでcsvデータのグラフ化 - Qiita

書いたのは2018年です。ずっと限定共有にしていましたが公開にして供養しています。経緯生産のC/...続きを読む

なるほど、前のサンプルではHTMLの<script>の中にjavascriptを書いてましたが、このサンプルではgraph.jsを引き込むようになってて、graph.jsでcsvファイルを読み込んでます。

この記事のサンプルのgraph.jsは長いので、まずはわかりやすいように先ほどの記事で作ったグラフと同じものを出すgraph.jsを作ってみましょう。

前回記事で書いたように、TeraTermでレンタルサーバー(CORESERVER)にログインして直接エディタ(vi)でソースを作りました。
ディレクトリは前回作った /virtual/cuzuser/public_html/test2.teqnobreaker.com/work/ 配下。

同じ記事内で myChart の名前が重なるとダメらしいので、myChart2 にして、それに合わせて graph2.js にしときます。vi graph2.js で以下をコピペして作成。

ちなみにjavascriptは実行権はいらないようなので、Pythonの時のように chmod +x は不要です。

const conf = {
    type: 'line',
    data: {
        labels: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],
        datasets:[{
            label: '体重',
            data: [79.5, 75.9, 75.65, 71.30, 70.73, 67.94, 67.11, 66.02, 67.45, 67.15],
            borderColor: "rgba(50,205,50,0.8)",
            backgroundColor: "rgba(50,255,50,0.8)",
            fill: false,
            lineTension: 0,
        },],
    },
};

const myChart2 = new Chart(document.getElementById('myChart2').getContext('2d'), conf);

const conf = {

type: 'line',

data: {

labels: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],

datasets:[{

label: '体重',

data: [79.5, 75.9, 75.65, 71.30, 70.73, 67.94, 67.11, 66.02, 67.45, 67.15],

borderColor: "rgba(50,205,50,0.8)",

backgroundColor: "rgba(50,255,50,0.8)",

fill: false,

lineTension: 0,

},],

};

const myChart2 = new Chart(document.getElementById('myChart2').getContext('2d'), conf);

そして、WordPressの記事で「カスタムHTML」の方は以下にしました。
ちなみに、workフォルダの場所の指定が最初はわからなくて何回か試しながら「プレビュー」をしたところ以下で表示されました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<canvas id="myChart2" style="padding: 0px 10px 0px 10px;"></canvas>
<script src="../work/graph2.js"></script>

表示はまったく同じですが、javascriptを外だしにした感じになります。

うまく行きました！
⇒ プレビューなどでは表示されてたのですが投稿だと表示されないと後で気付きました。でも、面倒なのでこのままにしときます。笑

ではデータをcsvファイルにしてみましょう。
元記事のソースを参考に体重のデータを読み込むように graph3.js を作ってみました。
ちなみに最初はデータが空でグラフが表示されて、csvファイルの指定を「../work/graph3.csv」にしたところ表示されました。

const label = [], num = [];

const req = new XMLHttpRequest();
req.open("GET", "../work/graph3.csv", true);
req.send(null);

req.onload = () => {
    if (req.status != 404) {
        const line = req.responseText.split("\n");
        const data = [];
        for (let i = 0; i < line.length - 1; ++i) {
            const cells = line[i].split(",");
            data.push(cells);
        }
        for (let row in data) {
            label.push(data[row][0]);
            num.push(data[row][1]);
        }
    }
}

const conf = {
    type: 'line',
    data: {
        labels: label,
        datasets: [{
            label: '体重',
            data: num,
            borderColor: "rgba(50,205,50,0.8)",
            backgroundColor: "rgba(50,255,50,0.8)",
            fill: false,
            lineTension: 0,
        },],
    },
};

const myChart3 = new Chart(document.getElementById('myChart3').getContext('2d'), conf);

const label = [], num = [];

const req = new XMLHttpRequest();

req.open("GET", "../work/graph3.csv", true);

req.send(null);

req.onload = () => {

if (req.status != 404) {

const line = req.responseText.split("\n");

const data = [];

for (let i = 0; i < line.length - 1; ++i) {

const cells = line[i].split(",");

data.push(cells);

}

for (let row in data) {

label.push(data[row][0]);

num.push(data[row][1]);

}

const conf = {

type: 'line',

data: {

labels: label,

datasets: [{

label: '体重',

data: num,

borderColor: "rgba(50,205,50,0.8)",

backgroundColor: "rgba(50,255,50,0.8)",

fill: false,

lineTension: 0,

},],

};

const myChart3 = new Chart(document.getElementById('myChart3').getContext('2d'), conf);

graph3.csvファイルは以下のようにしました。
最後の行に改行を入れるとグラフが1つ余分に表示しようとするので改行は無しにします。

4月, 79.5
5月, 75.9
6月, 75.65
7月, 71.30
8月, 70.73
9月, 67.94
10月, 67.11
11月, 66.02
12月, 67.45
1月, 67.15

4月, 79.5

5月, 75.9

6月, 75.65

7月, 71.30

8月, 70.73

9月, 67.94

10月, 67.11

11月, 66.02

12月, 67.45

1月, 67.15

最後にWordPressの記事で「カスタムHTML」を以下にします。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<canvas id="myChart3" style="padding: 0px 10px 0px 10px;"></canvas>
<script src="../work/graph3.js"></script>

行けました！

あれ？？出て無い？？
ブロックエディタでは「カスタムHTML」の「プレビュー」でグラフが表示されるけど、ブログで見ると何も出ない！？

うーん、、ちょっと原因不明なので、今日はここまでにしておきます。。

最終的にまだ上手く行っては無いですが、csvファイルを読み込んで表示できるようになれば、定期的にcsvファイルを更新することで記事を変更せずにグラフを変えることができます。

これを使うと、例えばビットコインの値動きをAPIで持ってきてグラフ化などしてWordPressの記事に載せることもできそうです。

本当はcsvファイルでは無くMySQLかSQLiteのDBを使ったものをやりたかったのですが、そこまでたどり着けず。とりあえず今日はここまで。

後日、原因と対処がわかったので後編に記載しました。