Google Chart を使う

  1. Google Chart API を使う
    1. 基本事項
      1. Google Chart Tools のトップページ
      2. Gwoogle Chart 3schools 　apps-script
    2. JavaScript で描く
      1. Google Chartsの使い方 　グラフ ギャラリー 　Code Playground
      2. 誰でもすぐ使える Google 円グラフ
      3. Google GeoChart 　GeoChartの使用方法
    3. Image Charts は無効になりました　 <img>として描く　　(書き方)　
      1. Image Charts　・・・Google Chart ウイザード
      2. Chart API and Chart Generator Tool Generator Tool
    4. チャートを描く
      1. JQueryで グラフ表示
      2. JSONのデータを 表示する
      3. csvファイルを読み込んでグラフを表示 　給電構成
    5. サンプル
    6. 参考サイト
      1. Google Chart Tools の使い方 くらげ top https://kurage.ready.jp/

  2. Google Chart API を応用する
    1. Google maps と連携する
      1. 指定区間の標高断面を表示する
      2. 原発近辺の標高断面を表示する
    2. その他
      1. QRコードを作成する 　(他サイト)　右図→
        例: <img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://kurage.ready.jp/&chld=M" alt="くらげ top url">
      2. 表を作成する　表の例

  3. 応用例
    ◆ 身長・体重から BMI を計算し、表にして、それをグラフ表示する例を記述します。　参考 
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>BMI 計算・比較</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <style>
    body{ width:800px; margin:4px auto; background:#eff; }
    header, footer{ margin:2px; padding:4px; font:24px Helvetica; min-height:32px; border-radius:7px; background:#ebf; text-align:center; }
    #link{ position:absolute; top:8px; left:20px; }
    #bodycheck{ background:#ffe; padding:8px; }
    #vTable{ background:#ffe; border-collapse: collapse; }
    section{ display:flex; justify-content: space-around;}
    #cvs_chart{ background:#ffe; width:450px; height:300px }
    td{padding:0 5px;}
  </style>
</head>
<body>
  <div id="link"><a href="../chartjs.html">chart top</a></div>
  <header>BMI 計算・比較</header>
  <p> 身長・体重を入力し「計算」を押して、表に結果追加。必要に応じて「平均値表示」「グラフ表示」可能。</p>
  <form name="bodycheck" id="bodycheck">
    身長: <input type="text" name="height" size=4 value=""> [cm]　
    体重: <input type="text" name="weight" size=3 value=""> [kg]　
    <input type="button" value="計 算" name="result" onClick="InputCal()">
    　<b>→</b>　BMI: <input type="text" name="BMI" size=5 value=""> 
    判定: <input type="text" name="CHECK" size=5 value="">　
    <input type="reset" value="一行戻す" name="reset" onClick="deleteRow()">
  </form><br>
  <section>
    <article>
      <table id="vTable" border=1>
        <tr>
          <th id="tableNo">No</th>
          <th id="tableLength">身長</th>
          <th id="tableWeight">体重</th>
          <th id="tableBmi">BMI</th>
          <th id="tableComent">判定</th>
        </tr>
      </table><br>
      <input type="button" onclick="abCalc();" value="平均値表示">　
      <input type="button" onclick="google.charts.setOnLoadCallback(drawChart);" value="グラフ表示"><br><br>
      <div id="ave"></div>
    </article>
    <div id="cvs_chart" style=""></div>
  </section>  
  <script type="text/javascript">
      var datum = new Array();
      var datain = [['No.', '身長', '体重', 'BMI']];
      var nn = 0;
      google.charts.load('current', {'packages':['corechart']});
      function drawChart() {
        var data = google.visualization.arrayToDataTable( datain );
        var options = {
          title: 'BMI 計算・比較',
          legend: { position: 'top' }
        };
        var chart = new google.visualization.LineChart(document.getElementById('cvs_chart'));
        chart.draw(data, options);
      }
      function InputCal(){
        var str1 = document.bodycheck.height.value;
        var str2 = document.bodycheck.weight.value;
        if( str1=="" || str2=="" ){
          alert("入力漏れがあります。")
        } else if( str1.match(/[ ]/) || str2.match(/[ ]/) ){
          alert("スペースが入っています。")
        } else if( str1.match(/^0/) || str2.match(/^0/) ){
          alert("０から始まる数値は無効です。")
        } else if( str1.match(/[^0-9.]/) || str2.match(/[^0-9.]/) ){
          alert("半角数字で入力してください。")
        } else{
          BMIcalc(); appendToTable();
        }
      }
      function BMIcalc(){
        nn++;
        hh = eval(document.bodycheck.height.value);
        ww = eval(document.bodycheck.weight.value);
        bmi = Math.round(( ww / ( hh * hh ) * 10000 ) * 10) / 10 ;
        if( bmi < 18.5 ) { txt= 'やせ気味'; tdc= "<td style='background:#cfc;'>";
        } else if( bmi < 25 ) { txt= '標準'; tdc= "<td style='background:#ccf;'>";
        } else { txt = '太り気味'; tdc= "<td style='background:#fcc;'>"; }
        document.bodycheck.BMI.value= bmi;
        document.bodycheck.CHECK.value= txt;
        datum=[];
        datum.push(String(nn)); datum.push(hh); datum.push(ww); datum.push(bmi);
        datain.push(datum);
      }
      function appendToTable() {
        var $formObj = document.getElementById( "bodycheck" );
        var $tableObj = document.getElementById( "vTable" );
        var $tr = "<tr>";
        $tr += "<td>" + nn + "</td>";
        $tr += "<td>" + hh + "</td>";
        $tr += "<td>" + ww + "</td>";
        $tr += tdc + bmi + "</td>";
        $tr += tdc + txt + "</td>";
        $tableObj.insertAdjacentHTML( "beforeend", $tr );
      }
      function abCalc() {  // 平均値計算
        var d_num= datain.length-1; sum_hh = 0; sum_ww = 0; sum_bmi = 0;
        for (var i = 1; i<datain.length; i++){   
          sum_hh += datain[i][1]; sum_ww += datain[i][2]; sum_bmi += datain[i][3];
        }
        sum_hh= sum_hh / d_num; sum_ww= sum_ww / d_num; sum_bmi= sum_bmi / d_num;
        document.getElementById( "ave" ).innerHTML= "<table border=1><tr><td>員数</td><td>身長</td><td>体重</td><td>BMI</td></tr><tr><td>"+ d_num +"</td><td>"+ sum_hh.toFixed(1)+"</td><td>"+sum_ww.toFixed(1)+"</td><td>"+sum_bmi.toFixed(1)+"</td></tr></table>";
      }
      function deleteRow() {  // 末尾データ行を削除
        var $tableObj = document.getElementById( "vTable" );
        var row_num = $tableObj.rows.length;    //表の行数を取得
        if (row_num>1) {
          nn--;
          $tableObj.deleteRow(row_num - 1); 
          datain.pop();
        }                                                            
      }
  </script>
</body>
</html>
    　　　【概説】
    　　 1. google chart を利用するために google の loader を load します。(6行目)
    　　 2. グラフ表示エリアを設定します。(14行目)
    　　 3. 身長・体重を入力(23,24行目)し、「計算」をクリックして、BMI と評価を計算し表示(26,27行目)します。
    　　 4. 結果は表としても追記していきます。(34-38行目)
    　　 5. 「平均値表示」のクリックで平均値が表示され、「グラフ表示」のクリックでグラフが表示されます。(43,45行目)
    　　 6. google chart の線グラフを使うように設定します。(51,58行目)、
    　　 7. グラフを作図する関数を設定します。(52-59行)
    　　 8. 入力値から BMI を計算して表に追記するようにします。(61-75行)
    　　 9. BMI を計算する関数です。(61-75行)
    　　10. BMI の計算結果を表に追加する関数です。(90-100行)
    　　11. データの平均値を計算・表示する関数です。(101-108行)
    　　12. 最後の行のデータを削除する関数です。(109-117行)

  4. 参考サイト
　　ページ先頭へ 　　JavaScript 　jQuery 　maps 　g-chart