線グラフ サンプル
            
( リストの解説 )
<html> <head> <!-- 文字コードを設定 --> <meta http-equiv="content-type" content="text/html; charset=UTF-8" > <!-- google サイトを呼び出します --> <script language="javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // ChartAPIを読み込みます google.load('visualization', '1.0' , {'packages':['corechart']}); google.setOnLoadCallback(drawChart); // 呼び出し関数を定義します function drawChart() { var data = new google.visualization.DataTable(); // 変数「data」にDataTableオブジェクトを格納し、架空のテーブルを作ります // カラム(テーブル)を作成。string型の'Year'列とnumber型の'経費'と'売上'の列を作ります data.addColumn('string','Year'); data.addColumn('number','経費'); data.addColumn('number','売上'); // ここではdata.setValue()に変えて連想配列でデータを格納します data.addRows([ ['2000', 300,1500 ],['2002',700,2000 ],['2004', 560,1000 ], ['2006',800,2200 ] ]); // オプションでタイトルなどを設定 var options = { title: '線グラフ サンプル', // タイトルの指定 lineWidth:5, // 線幅を指定 series: { 1: {targetAxisIndex: 1} }, // data1で右軸を使用 // 縦軸のtitle等を配列で指定 vAxes:[ {minValue:0, title:'経費 [万円]',textStyle:{color: 'blue'}, titleTextStyle:{color: 'blue',fontSize:14}},{minValue:0,title:'売上 [万円]', textStyle:{color: 'red'},titleTextStyle:{color:'red'} } ], hAxis:{title:'年度',titleTextStyle:{color:'#333',fontSize:14}}, // 横軸の設定 backgroundColor: {'stroke':'#666','strokeWidth':1,'fill':'#ffd'}, // 背景色等を設定 curveType: 'function', // 折れ線を滑らかにする legend:'none' // 凡例を非表示 }; // Id('chart')にグラフを書き出す指示をします var chart = new google.visualization.LineChart(document.getElementById('chart')); // データをオプションで書き出すよう命令 chart.draw(data, options); } </script> </head> <body> <!-- id="chart" にグラフ表示領域を設定 --> <span id="chart" style="width: 600px; height:300px; top:2px;"></span> </body> </html>
 TopPage Chart Top  参考: google chart  くめちゃん  雑記帳  API