Hi, I added a TabPanel to the hello world example, with a tab for each example. I added an example for the new DataView.
Thanks, Uwe --~--~---------~--~----~------------~-------~--~----~ http://groups.google.com/group/Google-Web-Toolkit-Contributors -~----------~----~----~----~------~----~------~--~---
Index: samples/hellovisualization/src/com/google/gwt/visualization/sample/hellovisualization/client/VisualizationDemo.java =================================================================== --- samples/hellovisualization/src/com/google/gwt/visualization/sample/hellovisualization/client/VisualizationDemo.java (revision 885) +++ samples/hellovisualization/src/com/google/gwt/visualization/sample/hellovisualization/client/VisualizationDemo.java (working copy) @@ -17,10 +17,16 @@ import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.Window; +import com.google.gwt.user.client.ui.FlowPanel; +import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.Label; +import com.google.gwt.user.client.ui.Panel; import com.google.gwt.user.client.ui.RootPanel; +import com.google.gwt.user.client.ui.TabPanel; +import com.google.gwt.user.client.ui.Widget; import com.google.gwt.visualization.client.AbstractDrawOptions; import com.google.gwt.visualization.client.DataTable; +import com.google.gwt.visualization.client.DataView; import com.google.gwt.visualization.client.PieChart; import com.google.gwt.visualization.client.PieChartWidget; import com.google.gwt.visualization.client.Query; @@ -29,7 +35,7 @@ import com.google.gwt.visualization.client.Table; import com.google.gwt.visualization.client.TableWidget; import com.google.gwt.visualization.client.Visualization; -import com.google.gwt.visualization.client.DataTable.ColumnType; +import com.google.gwt.visualization.client.AbstractDataTable.ColumnType; import com.google.gwt.visualization.client.Query.Callback; import com.google.gwt.visualization.client.Selectable.SelectCallback; @@ -38,13 +44,63 @@ * */ class VisualizationDemo implements EntryPoint { - + private final TabPanel tabPanel = new TabPanel(); + public void onModuleLoad() { RootPanel.get().add(new Label("Google Visualization with GWT demo.")); - drawChart(); + RootPanel.get().add(tabPanel); + tabPanel.setWidth("800"); + tabPanel.setHeight("600"); + + tabPanel.add(createPieChart(), "Pie Chart"); + tabPanel.add(createTable(), "Table"); + tabPanel.add(createDataView(), "DataView"); + tabPanel.selectTab(0); } - protected void drawChart() { + /** + * Creates a table and a view and shows both next to each other. + * @return a panel with two tables. + */ + private Widget createDataView() { + Panel panel = new HorizontalPanel(); + DataTable table = DataTable.create(); + + /* create a table with 3 columns */ + table.addColumn(ColumnType.NUMBER, "x"); + table.addColumn(ColumnType.NUMBER, "x * x"); + table.addColumn(ColumnType.NUMBER, "sqrt(x)"); + table.addRows(10); + for (int i = 0; i < table.getNumberOfRows(); i++) { + table.setValue(i, 0, i); + table.setValue(i, 1, i * i); + table.setValue(i, 2, Math.sqrt(i)); + } + Panel flowPanel = new FlowPanel(); + panel.add(flowPanel); + flowPanel.add(new Label("Original DataTable:")); + TableWidget chart = new TableWidget(); + flowPanel.add(chart); + chart.draw(table, Table.DrawOptions.create()); + + flowPanel = new FlowPanel(); + panel.add(flowPanel); + flowPanel.add(new Label("DataView with columns 2 and 1:")); + /* create a view on this table, with columns 2 and 1 */ + TableWidget viewChart = new TableWidget(); + DataView view = DataView.create(table); + view.setColumns(new int[] {2, 1}); + flowPanel.add(viewChart); + viewChart.draw(view, Table.DrawOptions.create()); + return panel; + } + + /** + * Creates a pie chart visualization. + * + * @return panel with pie chart. + */ + private Widget createPieChart() { /* create a datatable */ DataTable data = DataTable.create(); data.addColumn(ColumnType.STRING, "Task"); @@ -63,17 +119,24 @@ /* create pie chart */ - PieChart.DrawOptions options = PieChart.DrawOptions.create(); options.setWidth(400); options.setHeight(240); options.set3D(true); options.setTitle("My Daily Activities"); - RootPanel.get().add(new PieChartWidget(data, options)); + return new PieChartWidget(data, options); + } + /** + * Creates a table visualization from a spreadsheet. + * + * @return panel with a table. + */ + private Widget createTable() { + final Panel panel = new FlowPanel(); final Label label = new Label("no selection"); - RootPanel.get().add(label); - + panel.add(new Label("Table visualization with selection.")); + panel.add(label); // Read data from spreadsheet String dataUrl = "http://spreadsheets.google.com/tq?key=prll1aQH05yQqp_DKPP9TNg&pub=1"; Query query = Query.create(dataUrl); @@ -87,10 +150,11 @@ } final TableWidget chart = new TableWidget(); - RootPanel.get().add(chart); + panel.add(chart); Table.DrawOptions options = Table.DrawOptions.create(); options.setShowRowNumber(true); chart.draw(response.getDataTable(), options); + chart.addListener(new SelectCallback() { public void onSelect(Visualization<? extends AbstractDrawOptions> visualization) { @@ -115,5 +179,6 @@ }); } }); + return panel; } } Index: samples/hellovisualization/src/com/google/gwt/visualization/sample/hellovisualization/public/HelloVisualization.html =================================================================== --- samples/hellovisualization/src/com/google/gwt/visualization/sample/hellovisualization/public/HelloVisualization.html (revision 885) +++ samples/hellovisualization/src/com/google/gwt/visualization/sample/hellovisualization/public/HelloVisualization.html (working copy) @@ -2,6 +2,12 @@ <head> <title> Google Visualization API with GWT</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> + <style type="text/css"> + .gwt-Label { + font-size:large; + margin:5px; + } + </style> </head> <body> <script type="text/javascript">