少年幃禿的煩惱


心情也微微的...凸

最近的學習心得 都改放到 少年幃禿的煩惱@Google Sites

2008/07/07

Google Visualization API (6) - Code Examples

Table Example

* 這裡有範例 當你看到這行字 表示程式出錯了 *
function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time'); data.addRows(5); data.setCell(0, 0, 'John'); data.setCell(0, 1, 10000, '$10,000'); data.setCell(0, 2, true); data.setCell(1, 0, 'Mary'); data.setCell(1, 1, 25000, '$25,000'); data.setCell(1, 2, true); data.setCell(2, 0, 'Steve'); data.setCell(2, 1, 8000, '$8,000'); data.setCell(2, 2, false); data.setCell(3, 0, 'Ellen'); data.setCell(3, 1, 20000, '$20,000'); data.setCell(3, 2, true); data.setCell(4, 0, 'Mike'); data.setCell(4, 1, 12000, '$12,000'); data.setCell(4, 2, false); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true}); google.visualization.events.addListener(table, 'select', function() { var row = table.getSelection()[0].row; alert('You selected ' + data.getValue(row, 0)); }); } Gauge Example
* 這裡有範例 當你看到這行字 表示程式出錯了 *
<script> var gaugeData = new google.visualization.DataTable(); gaugeData.addColumn('number', 'Engine'); gaugeData.addColumn('number', 'Torpedo'); gaugeData.addRows(2); gaugeData.setCell(0, 0, 120); gaugeData.setCell(0, 1, 80); var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, redFrom: 250, redTo: 280, minorTicks: 5}; var gauge; function drawGauge() { gauge = new google.visualization.Gauge(document.getElementById('gauge_div')); gauge.draw(gaugeData, gaugeOptions); } function changeTemp(dir) { gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25); gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20); gauge.draw(gaugeData, gaugeOptions); } </script> <input type='button' value='Go Faster' onclick='changeTemp(1)' /> <input type='button' value='Slow down' onclick='changeTemp(-1)' /> Intensity Map Example
* 這裡有範例 當你看到這行字 表示程式出錯了 *
function drawIntensityMap() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Country'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expenses'); data.addRows(4); data.setCell(0, 0, 'US'); data.setCell(0, 1, 10000); data.setCell(0, 2, 8000); data.setCell(1, 0, 'CA'); data.setCell(1, 1, 7000); data.setCell(1, 2, 5000); data.setCell(2, 0, 'CN'); data.setCell(2, 1, 8000); data.setCell(2, 2, 12000); data.setCell(3, 0, 'GB'); data.setCell(3, 1, 7000); data.setCell(3, 2, 15000); var imap = new google.visualization.IntensityMap(document.getElementById('intensitymap_div')); imap.draw(data, {}); }