新しく追加されたチャートで時系列に沿って描く点では折れ線グラフと変わらないのですが、スライダーコントローラで移動ができ、各ポイントに於いて、注釈を付記できるチャートです。Googleガジェット化して使っていますが、Google Apps Scriptでは作成することができません。また、まだバグがあるのか！？Google Developerにあるサンプルコードでは描画できません。そこで、その問題点をクリアしたサンプルを見つけたので、それをベースに、スプレッドシートからのデータを読み込ませています。また、１行目にカラムを付けずに作ったことと、カラムを付けたいならば、dataColumnの設定をやり、response.dataTable().getValue()にて、配列に格納し、ループで入れていくと良い。
今回の注釈付きグラフは、仮想の２工場の稼働率の推移と各ポイントに於ける注釈コメントを表示したものである。
<?xml version="1.0" encoding="UTF-8" ?><Module><ModulePrefs title="sample1" /><Content type="html"><![CDATA[<html> <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type='text/javascript'> google.load('visualization', '1.1', {'packages':['annotationchart']}); google.setOnLoadCallback(initialize); function initialize() { var query = new google.visualization.Query( 'https://docs.google.com/spreadsheet/pub?key=0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc&single=true&gid=7'); query.send(drawChart); }
function drawChart(response) { if (response.isError()) { alert('Error in query'); } var data = response.getDataTable();var wrapper = new google.visualization.ChartWrapper({
chartType: 'AnnotationChart',
dataTable: data,
containerId: 'chart_div'
});
google.visualization.events.addListener(wrapper, 'ready', function(){alert("ready!")});
wrapper.draw();
//alert('wrapper.getChart() = ' + wrapper.getChart());
/*var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = { displayAnnotations: true, }; chart.draw(data, options);*/ } </script> </head> <body> <div id='chart_div' style='width: 900px; height: 500px;'></div> </body></html>]]></Content></Module>Googleにあるコードでは普通にVisualization APIに於けるAnnotationChartが指定されているが、この方法では何故かグラフが表示されない。
そこで、調べてみると、みなChartWrapperにてチャートタイプをAnnotationChartを指定して表示させていた。また、このチャートはイベントハンドラーが設定できるので、いろいろ手を加えることが出来るようだ。