- GWT Google Charts Tutorial
- GWT Google Charts - Home
- GWT Google Charts - Overview
- Environment Setup
- Configuration Syntax
- GWT Google Charts - Area Charts
- GWT Google Charts - Bar Charts
- GWT Google Charts - Bubble Charts
- GWT Google Charts - Candlestick
- GWT Google Charts - Column Charts
- GWT Google Charts - Combination
- GWT Google Charts - Histogram
- GWT Google Charts - Line Charts
- GWT Google Charts - Maps
- GWT Google Charts - Organization
- GWT Google Charts - Pie Charts
- GWT Google Charts - Sankey Charts
- GWT Google Charts - Scatter Chart
- GWT Google Charts - Stepped Area
- GWT Google Charts - Table Chart
- GWT Google Charts - TreeMap Chart
- GWT Google Charts Resources
- GWT Google Charts - Quick Guide
- GWT Google Charts - Resources
- GWT Google Charts - Discussion
GWT Google Charts - Table Chart
Table chart helps in rendering a table which can be sorted and paged. Table cells can be formatted using format strings, or by directly inserting HTML as cell values. Numeric values are right-aligned by default; boolean values are displayed as check marks or cross marks. Users can select single rows either with the keyboard or the mouse. Column headers can be used for sorting. The header row remains fixed during scrolling. The table fires events corresponding to user interaction.
We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a Table Chart.
Configurations
We've used Table class to show a Table chart.
Table chart = new Chart();
Example
HelloWorld.java
package com.tutorialspoint.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; import com.googlecode.gwt.charts.client.ChartLoader; import com.googlecode.gwt.charts.client.ChartPackage; import com.googlecode.gwt.charts.client.ColumnType; import com.googlecode.gwt.charts.client.DataTable; import com.googlecode.gwt.charts.client.table.Table; import com.googlecode.gwt.charts.client.table.TableOptions; public class HelloWorld implements EntryPoint { private Table chart; private void initialize() { ChartLoader chartLoader = new ChartLoader(ChartPackage.TABLE); chartLoader.loadApi(new Runnable() { public void run() { // Create and attach the chart chart = new Table(); RootPanel.get().add(chart); draw(); } }); } private void draw() { // Prepare the data DataTable dataTable = DataTable.create(); dataTable.addColumn(ColumnType.STRING, "Name"); dataTable.addColumn(ColumnType.NUMBER, "Salary"); dataTable.addColumn(ColumnType.BOOLEAN, "Full Time Employee"); dataTable.addRows(4); dataTable.setCell(0, 0, "Mike"); dataTable.setCell(0, 1, 10000, "$10,000"); dataTable.setCell(0, 2, true); dataTable.setCell(1, 0, "Jim"); dataTable.setCell(1, 1, 8000, "$8,000"); dataTable.setCell(1, 2, false); dataTable.setCell(2, 0, "Alice"); dataTable.setCell(2, 1, 12500, "$12,500"); dataTable.setCell(2, 2, true); dataTable.setCell(3, 0, "Bob"); dataTable.setCell(3, 1, 7000, "$7,000"); dataTable.setCell(3, 2, true); TableOptions options = TableOptions.create(); options.setAlternatingRowStyle(true); options.setShowRowNumber(true); // Draw the chart chart.draw(dataTable, options); chart.setWidth("400px"); chart.setHeight("400px"); } public void onModuleLoad() { initialize(); } }
Result
Verify the result.
Advertisements