Tech Tips

 

Google TimeLine Chart Source

簡単に作成できるタイムラインのChartです。
javascriptを利用して作成します。


ソースは下記をご参考ください。

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["timeline"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
          [ 'Adams',      new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
          [ 'Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="width: 650px; height: 180px;"></div>
  </body>
</html>
このエントリーをはてなブックマークに追加
2015-07-24 16:20:57   916

コメント

IPアドレス サブネットマスク(subnet mask) 情報

-.日付:2016-09-27   カテゴリ : -   閲覧数:295

[C#] WindowsのOS情報取得

-.日付:2016-08-18   カテゴリ : -   閲覧数:361

Glyphicons一覧

-.日付:2016-02-17   カテゴリ : -   閲覧数:475

jQuery Cookie ようなlocalStorageの使い方

-.日付:2015-12-23   カテゴリ : -   閲覧数:523

[ASP.NET] MS Chart利用中に「Stack が空です。」エラー対応方法

-.日付:2015-09-11   カテゴリ : -   閲覧数:1251

Google TimeLine Chart Source

-.日付:2015-07-24   カテゴリ : -   閲覧数:916

Copyright © 2015 INNOYA.COM All rights reserved. RSS