How to text align center data in columns in google table when you are hitting servlet to get data from database

5,734 views
Skip to first unread message

dhruv singh

unread,
Feb 12, 2014, 1:07:01 PM2/12/14
to google-visua...@googlegroups.com
Hi every one.This is my first post .

Okay using example I was able to draw a table as in pic under

and code I used is as in jsp I used this script
<script type="text/javascript">
  //Load the Visualization API and the ready-made Google table visualization
  google.load('visualization', '1', {'packages':['table']});
  // Set a callback to run when the API is loaded.
  google.setOnLoadCallback(init);
  // Send the query to the data source.
  function init() {
    // Specify the data source URL.
    var query = new google.visualization.Query('TrTimeTbl');
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }
  // Handle the query response.
  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }
    // Draw the visualization.
    var data = response.getDataTable();
    var chart = new google.visualization.Table(document.getElementById('pDetails'));
    chart.draw(data, {width: 642, height: 230, allowHTML: true});
  }
  </script>


and in servlet its like this

public class TrTimeTbl extends DataSourceServlet {
private static final long serialVersionUID = 5300414516532629857L;
@Override
  public DataTable generateDataTable(Query query, HttpServletRequest request) {
    // Create a data table.
    DataTable data = new DataTable();
    ArrayList<ColumnDescription> cd = new ArrayList<ColumnDescription>();
    
    ColumnDescription cdd = new ColumnDescription("hh", ValueType.NUMBER, "hh");
    cdd.setCustomProperty("text-align", "center");
    
    
    cd.add(cdd);
    /*cd.add(new ColumnDescription("Period", ValueType.NUMBER, "Period"));*/
    cd.add(new ColumnDescription("Class", ValueType.TEXT, "Class"));
    cd.add(new ColumnDescription("Subect", ValueType.TEXT, "Subject"));
    data.addColumns(cd);
    //getting data from database
    TrHome trHome = new TrHome();
    List<TimeTablePojo> listTable = trHome.getTimeTableDetails("****", "****"); 
    
    // Fill the data table.
    try {
    for(TimeTablePojo tempTable : listTable){
    data.addRowFromValues(tempTable.getPeriod(), tempTable.getClas(), tempTable.getSub());
    }
    } catch (TypeMismatchException e) {
      System.out.println("Invalid type!");
    }
    return data;
  }


Its working fine I only need that the data displayed in columns as in picture aboe to be cnter aligned .Please suggest me how to obtain it.

asgallant

unread,
Feb 12, 2014, 1:19:37 PM2/12/14
to google-visua...@googlegroups.com
If you want to center-align all of your cells, the simplest approach is to use CSS:

.google-visualization-table-td {
    text-align: center;

dhruv singh

unread,
Feb 12, 2014, 1:30:18 PM2/12/14
to google-visua...@googlegroups.com
Thanks and that's working fine but if i need to apply it to a particular column then what shoul I do.

Thanks
Dhruv

asgallant

unread,
Feb 12, 2014, 1:56:10 PM2/12/14
to google-visua...@googlegroups.com
If you need to apply it to a particular column, then you need to set either the "style" or the "cssClass" property on each cell in the column (per the documentation).  I'm not certain how you would do this in your server-side code, though I suspect that whatever library you are using has a method for setting the properties of a cell.

dhruv singh

unread,
Feb 12, 2014, 3:43:36 PM2/12/14
to google-visua...@googlegroups.com
Thanks

 Yes column descriptor has a function as setProperty  .I will try with that,

Thanks again for your help

asgallant

unread,
Feb 12, 2014, 4:02:52 PM2/12/14
to google-visua...@googlegroups.com
You want to set the cell properties, not the column properties.
Reply all
Reply to author
Forward
0 new messages