- スタートガイド
- GoogleVisualization API とは何ですか?
- Visualization API でできること
- Visualization API のドキュメントはどこにありますか?
- 新しいグラフを作成するにはどうすればよいですか?
- データソース URL とは何ですか?
- Visualization API を使用したグラフアプリのサンプルコードはどこにありますか?
- Flash アプリケーションから可視化 API にアクセスできますか?
- Java アプリケーションからグラフにアクセスできますか?
- Google Web Toolkit(GWT)コンパイラで作成されたアプリケーションからグラフにアクセスできますか?
- 別の質問や問題があります。詳細を知りたい場合は、どこに問い合わせればよいですか?
- API を使用する
- トラブルシューティング
- Google ビジュアリゼーション API ポリシー
- コミュニティで積極的に活動する
はじめに
- GoogleVisualization API とは
- GoogleVisualization API を使用すると、構造化データを基にグラフやレポート アプリケーションを作成し、それらをウェブサイトに直接統合できます。
- 可視化 API でできること
- GoogleVisualization API を使用すると、ブラウザでローカルに作成した構造化データや、サポートされているデータソースから取得した構造化データにシンプルな表形式でアクセスできます。独自のデータソースを可視化 API データソースとして実装し、可視化準拠の可視化やアプリケーションがデータにアクセスできるようにすることも可能です。この形式は、レポート、分析、グラフの用途に適しています。そのため、データを可視化したり、Google スプレッドシートなどのアプリケーションに新機能を追加したりできます。
- 可視化 API のドキュメントはどこにありますか?
- デベロッパー ガイドとその他の関連ドキュメントについては、https://developers.google.com/chart/interactive/docs をご覧ください。
- 新しいグラフを作成するにはどうすればよいですか?
- 開始するには、概要とクイックスタート セクションを読むことをおすすめします。
- データソース URL とは何ですか?
- データソース URL は、ビジュアリゼーション API データソースの一意の URL 識別子です。データソースの URL にグラフのクエリ言語パラメータを含めることもできます。この場合、データを取得する前に、データソースに対してクエリ(並べ替え、グループ化など)が実行されます。
- 可視化 API を使ったグラフアプリのサンプルコードはどこにありますか?
- サンプルコードについては、Visualization API のサンプルコードのドキュメントをご覧ください。
- Flash アプリケーションから可視化 API にアクセスできますか。
- そのとおりです。 可視化 API では JavaScript API を使用しますが、ライブラリによって Flash アプリと JavaScript コードとの接続が可能になっています。このような便利なライブラリの 1 つとして、http://code.google.com/p/swfobject があります。Flash に影響する開発上の問題については、下記をご覧ください。
- データソースの実装方法
- グラフの仕組みについては、グラフの使用と作成に関するセクションをご覧ください。次に、データソースの作成方法については、データソースの実装をご覧ください。また、Java を使用している場合は、Google グラフ データソースの Java ライブラリを使用すると、すぐに開始できます。
- Java アプリケーションからグラフにアクセスできますか?
- はい。Google Web Toolkit(GWT)の Google 可視化ライブラリを使用すると、GWT コンパイラでコンパイルされた Java コードから API 準拠の可視化にアクセスすることや、GWT コンパイラを使用して Java で可視化 API 準拠の可視化を記述できます。リリース候補ライブラリは、Visualization API イベントモデルもサポートしています。
- Google Web Toolkit(GWT)コンパイラで作成されたアプリケーションからグラフにアクセスできますか?
- はい。Google Web Toolkit(GWT)の Google 可視化ライブラリを使用すると、GWT コンパイラでコンパイルされた Java コードから API 準拠の可視化にアクセスすることや、GWT コンパイラを使用して Java で可視化 API 準拠の可視化を記述できます。リリース候補ライブラリは、Visualization API イベントモデルもサポートしています。
- 別の質問や問題があります。詳細を知りたい場合は誰に問い合わせればよいですか?
- Google 可視化 API ディスカッション グループに質問を投稿して、可視化のデベロッパー コミュニティに質問してみてください。このグループには、Google の可視化チームも参加し、質問に回答しています。
API を使用する
- Google Chart API と GoogleVisualization API の違いは何ですか?
-
Chart API を使用すると、データとグラフの構成オプションの両方を含むフォーマット済み URL を Google サーバーに送信して、さまざまな種類の画像グラフを簡単に作成できます。Chart API には、閉じた一連のグラフと、さまざまなオプションが用意されています。Chart API のデータセットは、URL のサイズ(約 2,000)に制限されています。
可視化 API を使用すると、ウェブ上でグラフやデータソースを接続して公開できます。
-
- 可視化 API には、グラフにアクセスするための JavaScript API が用意されています。
- グラフのギャラリーには Google が作成したグラフが含まれていますが、どのサードパーティでも、Visualization API に準拠した独自のビジュアリゼーションを作成することができます。
- 可視化 API のグラフとグラフは、ブラウザでレンダリングできるものであれば何でも構いません。これには、画像、JavaScript、ベクター グラフィック、Flash などが含まれます。
- 数多くの Chart API グラフにビジュアリゼーション API を使用してアクセスできますが、一部の設定オプションが利用できない場合があります。
- この API は、文書化された送信プロトコルと、誰でもデータソースを任意の API ビジュアリゼーションに公開する方法も提供します。
- API には定義済みのイベントモデルがあり、グラフでイベントのスローと受信を行うことで、ホストページやページ上の他のグラフと通信できます。
- 可視化 API ではどのデータソースにアクセスできますか?
- Visualization API を使用すると、API の標準の DataTable 形式を作成してブラウザからローカルにデータにアクセスしたり、API をサポートする任意のデータソースにアクセスしたりできます。すでに API をサポートしている有名なアプリケーションとして、Google スプレッドシートや、Force.com デベロッパー プラットフォーム上の Salesforce.com があります。独自のデータをグラフ データソースとして実装することもできます。
- アプリケーションで受信するデータが特定の形式であることが想定されています。例外はどのように処理すればよいですか?
-
google.visualization.DataTable
クラスのgetNumberOfColumns()
メソッドとgetColumnType()
メソッドを使用すると、取得したデータが期待どおりであるかどうかをテストし、不一致の場合はエラー メッセージを発行できます。 - ウェブサイトにグラフを埋め込んでも安全ですか?
- サードパーティのコードをウェブサイトで直接実行すると、固有のリスクが発生します。Google は、アプリのパフォーマンス、品質、セキュリティ、コンテンツを保証または表明するものではありません。 GoogleVisualization API の利用規約に準拠していないグラフ アプリケーションは、ギャラリーから削除される場合があります。
- グラフはオフラインで使用できますか?
- Google Charts のインタラクティブ機能を使用するには、ユーザーのパソコンで https://www.gstatic.com/charts/loader.js にアクセスできる必要があります。
これは、ページに必要な可視化ライブラリが、使用前に動的に読み込まれるためです。適切なライブラリを読み込むためのコードは、付属のスクリプトの一部であり、
google.charts.load()
メソッドを呼び出すと呼び出されます。 Google の利用規約により、google.charts.load
コードまたはgoogle.visualization
コードをダウンロードしてオフラインで使用することは禁止されています。 - グラフのコードをダウンロードして、ローカルまたはイントラネット上でホストできますか?
- 申し訳ございませんが、Google の利用規約により、コード
google.charts.load
またはgoogle.visualization
のダウンロードと保存、またはホストは禁止されています。 ただし、Google グラフのインタラクティビティが不要な場合は、グラフのスクリーンショットを撮って必要に応じて使用できます。
トラブルシューティング
- グラフが表示されないのはなぜですか?
-
まず、JavaScript コンソールを確認します。Chrome では、[Chrome] -> [表示] -> [デベロッパー] -> [JavaScript コンソール] または [Chrome] -> [ツール] -> [JavaScript コンソール] から JavaScript コンソールにアクセスできます。最新のブラウザには JavaScript コンソールが搭載されています。そのため、「詳細設定」や「デベロッパー ツール」などの名前のメニューをのぞかなければならない場合があります。
コンソールからすぐに問題が見つかることを願っています。しかし、場合によっては、コンソール メッセージを根本的な原因に変換するのが難しいことがあります。一般的な注意点は次のとおりです。
- Google ローダを誤って使用している可能性があります。
- graph/loader.js は 1 回だけ読み込みます。ウェブページにグラフがいくつあっても、
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> // Do this ONCE.
のような呼び出しは 1 つだけにする必要があります。読み込みを発生させるタイミングに応じて、ウェブページの見出しまたは本文に指定できます。 - ウェブページに必要なすべてのパッケージを指定して、
google.charts.load
を 1 回だけ呼び出すのが理想的です。<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load("current", {packages: ["corechart", "timeline"]}); google.charts.setOnLoadCallback(drawBarChart1); function drawBarChart1() { ... var barChart1 = new google.visualization.BarChart(document.getElementById('chart1')); ... } google.charts.setOnLoadCallback(drawBarChart2); function drawBarChart2() { ... var barChart2 = new google.visualization.BarChart(document.getElementById('chart2')); ... } google.charts.setOnLoadCallback(drawTimeline); function drawTimeline() { ... var timeline = new google.visualization.Timeline(document.getElementById('chart3')); ... } </script> <div id="chart1"></div> ... <div id="chart2"></div> ... <div id="chart3"></div>
- すべてのグラフに一意の要素 ID(例:上記の例では、
chart1
、chart2
)。 - 入力ミスを探します。JavaScript では大文字と小文字が区別されることに注意してください。
それでもわからない場合は、Google visibility API のヘルプグループを検索して、同様の問題が発生した人がいないか確認しましょう。疑問の答えとなる投稿が見つからない場合は、問題を実証するウェブページへのリンクと一緒に質問を投稿してください。可能であれば、jsfiddle を含めます。
- 1 か月と 1 日の休暇が 1 つ増えるのはなぜですか?
- Google Charts では、ゼロベースのインデックス登録を使用する JavaScript を使用しています。月の初日は 0、月の範囲は 0(1 月)~ 11(12 月)です。1 から始まるインデックス付けを想定しているコードでは、1 を減算してから JavaScript の日付オブジェクトにデータを配置します。
- グラフが一部のブラウザで機能しないのはなぜですか?
- ブラウザの非互換性に関する情報を確認するには、caniuse.com をおすすめします。Internet Explorer 8 以前では、次の 2 つの理由から Google グラフで問題が発生することがあります。
- IE8 は SVG をサポートしていないため、Chart はより制限された VML にフェイルオーバーします。
- IE8 の JavaScript では、リストの末尾のカンマは使用できません。
- Flash ベースのグラフをテスト時に表示されないのはなぜですか?
- : Flash のセキュリティ設定により、ウェブサーバーの URL(例: http://www.myhost.com/myviz.html)ではなく、ブラウザのファイルの場所(例: file:///c:/webhost/myhost/myviz.html)から Flash ベースのグラフにアクセスすると、正しく機能しないことがあります。これは通常、テストのみの問題です。http:// アドレスからグラフにアクセスする場合は、問題ではありません。この問題は、Macromedia のウェブサイトに記載されている方法で解決できます。一般的に、できる限り Flash の開発は行わないことをおすすめします。
Google ビジュアリゼーション プログラム ポリシー
- Google の可視化に関するプログラム ポリシーとは何ですか?
-
利用規約に記載のとおり、Google は以下を表示またはリンクすることにより、プログラム ポリシーに違反するコンテンツの掲載または表示を拒否する場合があります。
- 不正なコンテンツ。
- 個人のプライバシーの侵害。
- ポルノ、わいせつな表現。
- 悪意のあるコードなど、ユーザーのパソコンまたはホスト ウェブページの機能を妨害する、またはそれらに害を及ぼすコンテンツ。
- 憎悪の助長や暴力の扇動。
- 著作権の侵害。詳しくは、Google の DMCA ポリシーをご覧ください。
- 商標の侵害。
- 第三者のなりすまし。
データを収集するグラフを作成するデベロッパーは、法的に適切なプライバシー ポリシーを維持し、リンクすることに同意します。さらに、Google はデベロッパーに対して、チャートの安全性を確保すること、およびアプリケーションがチャート ディレクトリに存在する限り維持することを求めます。
これらのポリシーは、随時予告なく改訂される場合があります。
- Google ビジュアリゼーション API の商用利用は可能ですか?
- はい。ご注意いただきたい点は、Google visibility API の利用規約をご覧ください。
- GoogleVisualization API を使用してクライアントサイド ソフトウェアを作成できますか?
- 現時点では、可視化 API を使用してクライアントサイド ソフトウェアを作成することはできません。提供されているインターフェースを介してのみ可視化 API を使用できます。注意事項については、GoogleVisualization API 利用規約をご覧ください。
- Google はすべてのチャートデータを記録していますか?
- HTTP リクエストに含まれるグラフデータは、内部テストとデバッグを目的として、2 週間を超えて一時ログに保存されます。当然ながら、公開ウェブページで画像タグとしてグラフが表示されている場合、そのグラフはクロールされる可能性があることを理解しておく必要があります。
- プログラム ポリシーの違反。
- これらのプログラム ポリシーに違反すると、チャートの無効化や削除、今後のチャートのアップロードのブラックリストへの登録、Google アカウントの停止、すべてのチャートの削除などの措置が講じられる可能性があります。
コミュニティで積極的に活動する
- まず、グラフをグラフ ギャラリーに配置します。必要に応じて、サイトへのリンクを戻してソースコードを提供できます。 ディスカッション グループに参加して、コミュニティからのフィードバックを得ましょう。
- グラフ ギャラリーとは
- グラフ ギャラリーは、Visualization API を使用するアプリケーションの一覧です。ビジュアリゼーションのデベロッパー コミュニティがグラフ アプリケーションを共有するための一元的な場所を提供します。ギャラリーにチャート申請書を提出する場合は、オンラインで申請してください。
- グラフ データソースをプロモートするにはどうすればよいですか?
- ビジュアリゼーション グループに実装を投稿します。気に入ったら 自分たちでも言及するかもしれません