グラフ描画にWordPressプラグイン「Visualizer」を導入しました

visualizer-img
2021.10.23

グラフの描画クラウドサービスevervizからwordpressプラグインVisualizerに乗り換えました。

Visualizerの使い方を覚え書きします。

グラフ描画サービスevervizから突然のexpire予告メールが…
このブログの記事の中のグラフ描画はクラウドサービスの「everviz（旧HIGHCHARTS CLOUD)」を利用してきましたが、突然expireを予告するメールが送られてきました。 グラフ描画サービスの乗り換えを検討し、wordpress
nawakimino.net
スポンサーリンク

Visualizerのインストール

WordPressにプラグイン「Visualizer」をインストールします。インストールはZIPファイルをアップロードする方法になります。

visualizer.zipをダウンロード

WordPress.orgサイトからZIPファイル「visualizer.zip」をダウンロードします。

WORDPRESS ORG プラグイン
Visualizer: Tables and Charts Manager for WordPress
https://ja.wordpress.org/plugins/visualizer/

visualizer.zipをアップロードしてインストール

  1. ［プラグイン新規追加］のページを開く
  2. ［プラグインのアップロード］をクリックするとZIPファイルインストールの表示が出る
  3. ［ファイルを選択］をクリックしダウンロードしたvisualizer.zipを選択
  4. ［今すぐインストール］をクリックするとインストールが始まる

データを用意します

折れ線グラフを書くことにして、テスト用データとして、LibreOfficeでドル円CSVファイルを作成しました。

  • 重要！２列目でデータの形式を指定
    • 日付…string
    • 終値…number
  • UTF-8エンコーディングで保存
ドル円CSVファイル画像

折れ線グラフを作成します

ドル円の折れ線グラフを作成します。

Add New Chartを選択

WordPressにVisualizerをインストールするとダッシュボードにVisualizerのメニューが出ます。

VisualizerのメニューからAdd New Chartを選択します。

Chart選択画面からLineを選択

Chart選択画面からLine（折れ線グラフ）を選択するとSouceタブのImport選択画面が表れます。

初期画面では2匹の猫とブランケットの絵柄が折れ線グラフで表示されています。

デフォルトで「Import data from file」が選択されているので、用意したCSVファイル「ドル円.csv」を選択してインポートします。

インポート画面
ナワキミノ
ナワキミノ

私は、CSVファイルの２行目でDATA形式を指定することに気づかず、何回もインポートをはねつけられました。文中のリンクline.csvをクリックすると、表示されている「２匹の猫」のCSVファイルがダウンロードでき、それを確認してようやく気づきました。

インポート後のグラフ表示画面

ドル円CSVファイルをインポートすると自動的にデフォルト設定のLineグラフが作成されます。

Manual＞editでインポートしたデータを確認することができる

SouceタブにあるManualをクリックし、editをクリックすると、インポートしたデータを確認することができます。

データを修正したり追加する場合は、この画面を利用すると便利です。

manual-edit画面

Create ChartでLibrary画面が表示される

Create Chart・Save Chartをクリックすると、作成したグラフがLibrary画面に一覧表示されます。

今回作成したドル円グラフは「#5023」になります。タイトルを付けていないので「#数字」になっています。

ハサミマークをクリックすると、クリップボードにグラフのショートコードがコピーされます。

このショートコードを投稿にペーストすると、グラフが表示されます。

このようなショートコードを編集ページに貼り付けます。

ショートコード画面

ドル円のグラフ

今回作成したドル円グラフのデフォルト設定のグラフです。

当初グラフが表示されず困ってしまいました…

初めてVisualizerでグラフを作成して表示させようとしたとき、グラフがまったく表示されないという問題が発生しました。

ググって調べたところ、サイトの高速化に原因があることが判明しました。

Visualizerのグラフが表示されないときの対処法
こんにちは、オニオンです。最近、自作パソコンの検証記事を作成しており、温度などの計測結果をブログにのせるようになりました。その際、データをグラフで表せられる「Visualizer」というプラグインを使用したのですが、グラフが表示されないとい
onion-blog1134.com
ナワキミノ
ナワキミノ

このサイトがなかったら原因がわからず表示できないまま終わっていたかもしれません。感謝、感謝です。

この方と同じく私も「Cocoon」というテーマを使っています。

このページで案内されているように、以下の操作で問題が解決しました。

  • Cocoon設定の高速化より「サイト高速化」を開く
  • 以下の２項目のチェックをはずす
    • HTMLを縮小化する
    • JavaScriptを縮小化する

その後、もう一度グラフが表示できないトラブルに会いましたが、ブロックエディターの中にある「Visualizer Chart」というブロックを利用して表示することにより解決しました。

Visualizerでグラフが表示されなくて困った件…解決済
私は、WordpressのプラグインVisualizerでグラフを表示させています。 今回、グラフが記事上で表示されないトラブルが起きました。 回復させようとする操作で危うく本サイトを壊してしまうところでした。 Visualizerのグラフ...
nawakimino.net

見た目の変更は「Settings」で

タイトルの入力、サイズや色の変更など、グラフの見た目を変更したいときは、「Settings」より行います。

このページをご覧ください。

Wordpressグラフ描画プラグインVisualizerのSettings
グラフ描画をEvervizからVisualizerに切り替えました。 私がよく使うグラフ「Line(折れ線グラフ)」のSettingsについて覚え書きします。 この記事では、私が毎月更新しているNYダウと日経平均の推移を表す折れ線グラフのS...
nawakimino.net
スポンサーリンク