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">
