3テラバイト

プログラム関連備忘録サイト。主にゲーム。

HTML JavaScript

ブラウザとモバイルデバイス用のインタラクティブチャートを実装するJavaScriptチャートライブラリGoogle Chartsの使い方

投稿日:

公式サイト

https://developers.google.com/chart

サンプルコード

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Num');

      data.addRows([ [0, 0],   [1, 10],  [2, 20],  [3, 30] ]);

      var options = {
        hAxis: {
          title: 'X'
        },
        vAxis: {
          title: 'Y'
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

必要なjsファイルを読み込み(3行目)

必要なライブラリの読み込み(5行目)

google.charts.loadの第一引数には読み込みバージョン名、またはバージョン番号を指定します。
ここでは最新バージョンの’current’を指定しています。

第二引数には読み込むパッケージの配列を渡します。

API読み込み完了後に実行するコールバック関数を設定(6行目)

google.charts.setOnLoadCallback関数の引数にチャートの設定や描画を行う関数を渡します。

チャートのデータを用意

https://developers.google.com/chart/interactive/docs/basic_preparing_data

チャートを生成

ここでは折れ線グラフを描画するため、google.visualization.LineChart関数に描画先の要素を渡し、チャートを生成します。

チャートを描画

chart.draw関数に設定したデータとオプションを渡すと、チャートが描画されます。

-HTML, JavaScript


comment

メールアドレスが公開されることはありません。

関連記事

no image

グリッドレイアウトを実装するJavaScriptライブラリMasonryの使い方

こんにちは、今日はWebサイトにグリッドレイアウトを実装することができるJavaScriptライブラリ、Masonryの使い方についてまとめていきます。 公式サイト https://masonry.d …

no image

HTMLからWindowsの設定ページを開く

ms-settings: URIスキームを用いて、HTMLのリンク先に特殊なURIを指定することで、ブラウザからWindowsの設定アプリの該当ページを開くことができます。 以下のようなHTMLコード …

no image

JavaScriptチャートライブラリPlotly.jsでチャートを描画する

公式サイト Plotly JavaScript Graphing Library | JavaScript | Plotlyhttps://plotly.com/javascript/ サンプルコード …

no image

File APIでinput要素で選択したファイルの情報を確認する

サンプル <input type="file"> <script> const input = document.querySelector(‘input’ …

no image

input要素で選択したファイルのバイナリデータをFile APIで表示する

サンプルコード input要素で選択したファイルのバイナリデータを16進数表記でpre要素に出力します。 <input type="file"> <pre> …