Google Chart APIを使ってグラフを複数表示する際の注意点

シェアする

スポンサーリンク

上記の画像のような割安株のランキングやスクリーニング・銘柄見つけ方の参考に検索サイトを作成していて、文字ばかりだとサイトの見た目が寂しいので、グラフも表示できるようにしようと思いました。

Google Chartsを使っていてエラーがでてハマったことがあったので、覚書として残しておきます。

Google Chart API利用時の注意点

Google Chart APIを利用して1ページ内にグラフやチャートを複数表示する際に以下のエラーが表示された場合の対応方法。

google.charts.load() cannot be called more than once with version 45 or earlier.

そもそも、仕様をちゃんと読めって話なんですが、上記のエラー表示がGoogle Chromeブラウザのデベロッパーツールのログに表示されていて、グラフやチャートが表示されなくなった場合の解決方法です。

google.charts.loadを複数コールするなってことで
・ダメな例
google.charts.load(‘current’, {‘packages’:[‘corechart’]});
google.charts.load(‘current’, {‘packages’:[‘bar’]});

という風に、記述して実行すると

google.charts.load() cannot be called more than once with version 45 or earlier.

 このエラーが発生するので

・正しいgoogle.charts.loadの使い方

google.charts.load(‘current’, {‘packages’:[‘corechart’,’bar’]});

 このように、仕様したいチャートを複数指定するように修正すれば表示されない問題は解決します。

Google Chart Toolsについて

商用利用でも無料(一部有料らしい)で利用できるGoogle Chartというのがあったので使用してみました。Google Chartsは様々なグラフが簡単に作れ、見た目のデザインやイベント等の実行処理のカスタマイズが容易なGoogleが提供する描画ライブラリです。

詳細はGoogle Visualization APIのTerms of Serviceを参照とのことなので、商用利用する際は確認する必要があるので注意。

Frequently Asked Questions # commercial use – Google Chart Tools – Google Developers

Is the Google Visualization API available for commercial use?
Yes. For the fine print please refer to the Google Visualization API Terms of Service.

error: