【JS】 Google Charts [3] ～ 折れ線グラフ編 ～

Webグラフ / 地図作成ツール

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37572608.html
https://blogs.yahoo.co.jp/dk521123/37572794.html
の続き。
今度は、折れ線グラフを作成する

公式サイトのサンプルを活用しながらやるといいかも
https://developers.google.com/chart/interactive/docs/gallery/linechart#examples

■ サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo for Google Charts</title>
</head>
<body>
<div id="targetChart">

</div>
<!--Load the AJAX API-->
<script type="text/javascript" src="">https://www.gstatic.com/charts/loader.js">
<script type="text/javascript">
(function() {
  'use strict';
  
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table,
  // instantiates the Line chart, passes in the data and draws it.
  function drawChart() {
    // Set chart options
    var options = {
      'title': 'Demo for Line Chart',
      'width': 500,
      'height': 300,
      hAxis: {'title': 'Year'},
      vAxis: {'title': 'Population'},
      // 緩やかなになる
      curveType: 'function',
      pointSize: 5,
      pointShape: 'square'
    };
    
    // Create the data table.
    var data = new google.visualization.arrayToDataTable([
      ['Population', 'Age : 05-12', 'Age : 12-18'],
      ['2015', 46, 32],
      ['2016', 31, 26],
      ['2017', 76, 54],
      ['2018', 17, 8]
    ]);
    
    // Instantiate and draw our chart, passing in some options.
    var target = document.getElementById('targetChart');
    var chart = new google.visualization.LineChart(target);
    chart.draw(data, options);
  }
})();
</script>
</body>
</html>

■ 補足：グラフに説明をつける

 * Roleを使う

サンプル（抜粋）

// Create the data table.
var data = new google.visualization.arrayToDataTable([
  ['Population', 'Age : 05-12', {role: 'annotation'}, {role: 'certainty'}, 'Age : 12-18', {role: 'certainty'}],
  ['2015', 46, null, true, 32, true],
  ['2016', 31, null, true, 26, true],
  ['2017', 76, 'Max value', true, 54, true],
  ['2018', 17, null, true, 8, true],
  ['2019', 36, 'Just Expected value', false, 65, false]
]);
role: 'annotation' 
 * グラフに説明する
role: 'certainty' 
 * certainty = true
  => 実線でグラフ表示
   => 実測値を表現

 * certainty = false
  => 点線でグラフ表示
   => 予想値を表現

関連記事

【JS】 Google Charts [1] ～ 円グラフ編 ～

https://blogs.yahoo.co.jp/dk521123/37572608.html

【JS】 Google Charts [2] ～ 棒グラフ編 ～

https://blogs.yahoo.co.jp/dk521123/37572794.html

【JS】 Google Charts [4] ～ タイムライン編 ～

https://blogs.yahoo.co.jp/dk521123/37574625.html