折れ線グラフ (注釈付きタイムライン)
//////




////// 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type='text/javascript'> google.load('visualization', '1', {'packages':['annotatedtimeline']}); google.setOnLoadCallback( function () { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', '鉛筆の売上'); data.addColumn('string', '注釈タイトル 1'); data.addColumn('string', '注釈説明 1'); data.addColumn('number', 'ペンの売上'); data.addColumn('string', '注釈タイトル 2'); data.addColumn('string', '注釈説明 2'); data.addRows([ [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined], [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined], [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined], [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, '在庫切れ','午後 4 時に在庫がなくなった'], [new Date(2008, 1 ,5), 41476, 'ペン販売を再開','200k 本のペンを売り上げた', 66467, undefined, undefined], [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined] ]); var chart = new google.visualization.AnnotatedTimeLine( document.getElementById('gct_annotatedtimeline_div')); chart.draw(data, {displayAnnotations: true, fill: 25}); } ); </script> <div id='gct_annotatedtimeline_div' style='width: 100%; height: 240px;'></div>
//////