package com.blogpost.client;import com.google.gwt.core.client.EntryPoint;import com.google.gwt.user.client.Window;import com.google.gwt.user.client.ui.RootPanel;import com.google.gwt.visualization.client.AjaxLoader;import com.google.gwt.visualization.client.DataTable;import com.google.gwt.visualization.client.Query;import com.google.gwt.visualization.client.QueryResponse;import com.google.gwt.visualization.client.Query.Callback;import com.google.gwt.visualization.client.visualizations.AnnotatedTimeLine;public class BlogPost implements EntryPoint { public void onModuleLoad() { AjaxLoader.loadVisualizationApi(new Runnable(){ public void run() { Query query = Query.create("http://spreadsheets.google.com/pub?key=pCQbetd-CptH5QNY89vLtAg"); query.send(new Callback(){ public void onResponse(QueryResponse response) { if (response.isError()) { Window.alert("An error occured: " + response.getDetailedMessage()); } DataTable data = response.getDataTable(); AnnotatedTimeLine.Options options = AnnotatedTimeLine.Options.create(); options.setDisplayAnnotations(true); RootPanel.get().add(new AnnotatedTimeLine(data, options, "800px", "400px")); } }); }}, AnnotatedTimeLine.PACKAGE); }}
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["scatterchart"]}); function drawChart(equation,xmin,xmax, numPoints, pointSize) { var data = new google.visualization.DataTable(); data.addColumn('number', 'x'); data.addColumn('number', 'y'); data.addRows(numPoints); var step = (xmax-xmin) / (numPoints-1); for(var i = 0; i < numPoints; i++) { var x = xmin + step * i; data.setValue(i,0,x); with(Math) { var y = eval(equation); } data.setValue(i,1,y); } document.getElementById("chart_div").innerHTML = ""; var chart = new google.visualization.ScatterChart( document.getElementById('chart_div')); chart.draw(data, {width: 600, height: 400, titleX: 'X', titleY: 'Y', legend: 'none', pointSize: pointSize}); } </script> </head> <body> equation: <input id="txteq" type="text" value="-sin(2*x)" /> <br /> minimum value(x): <input id="txtmin" type="text" value="-3.14" /> <br /> maximum value(x): <input id="txtmax" type="text" value="3.14"/> <br /> Precision (number of points): <input id="precision" type="text" value="1000"/> <br /> Point size: <input id="pointSize" type="text" value="2"/> <br /> <input id="Button1" type="button" value="Draw Graph" onclick="javascript:drawChart( document.getElementById('txteq').value, parseFloat(document.getElementById('txtmin').value, 10), parseFloat(document.getElementById('txtmax').value, 10), parseInt(document.getElementById('precision').value, 10), parseInt(document.getElementById('pointSize').value, 10))" /> <div id="chart_div"></div> </body></html>
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <link rel="stylesheet" type="text/css" href="http://visapi- gadgets.googlecode.com/svn/trunk/barsofstuff/bos.css"/> <script type="text/javascript" src="http://visapi- gadgets.googlecode.com/svn/trunk/barsofstuff/bos.js"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["barchart","table"]}); google.setOnLoadCallback(drawData); // Initialize the DataTable function drawData() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Line'); data.addColumn('number', 'Revenue'); data.addColumn('number', 'Expenses'); data.addColumn('number', 'Commuters'); data.addRows(4); data.setValue(0, 0, 'NorthEast'); data.setValue(0, 1, 38350); data.setValue(0, 2, 15724); data.setValue(0, 3, 1534); data.setValue(1, 0, 'Cross-Pacific'); data.setValue(1, 1, 25740); data.setValue(1, 2, 12613); data.setValue(1, 3, 1170); data.setValue(2, 0, 'Midwest'); data.setValue(2, 1, 11550); data.setValue(2, 2, 4389); data.setValue(2, 3, 660); data.setValue(3, 0, 'Pan-America'); data.setValue(3, 1, 21720); data.setValue(3, 2, 9774); data.setValue(3, 3, 362); //Draw the charts var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true}); var chart = new google.visualization.BarChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: false, title: 'Acme Rail Yearly Performance'}); var stuffoptions = {title: 'Acme Rail Commuters by Line'}; var stuffchart = new BarsOfStuff(document.getElementById('stuff_div')) stuffchart.draw(data, stuffoptions); } </script> </head> <body> <div id="table_div"></div> <div id="chart_div"></div> <div id="stuff_div" style="width: 400px"></div> </body></html>
var view = new google.visualization.DataView(data); view.setColumns([0,3]);
stuffchart.draw(view, stuffoptions);
