Customized Column width for Table chart

12,224 views
Skip to first unread message

Sutikshan

unread,
Jul 18, 2011, 4:10:30 AM7/18/11
to Google Visualization API
Hi,
I am using google Table chart on web pages being designed for mobile
devices.
I would like to shrnk the width of first column of table due to space
crunch in mobile devices. I am calling draw method for table as
below:-
table.draw(data, {allowHtml: true, height: 200, width: 500, title:
'Key Figures' });

Can someone please tell me how can I customize the width of columns?

Thanks!

Jinji

unread,
Jul 19, 2011, 1:04:54 PM7/19/11
to google-visua...@googlegroups.com
Sorry, but this is not supported.


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.


asgallant

unread,
Jul 19, 2011, 1:22:42 PM7/19/11
to google-visua...@googlegroups.com
The API doesn't support this, but you can hack around it using jQuery:

function drawVisualization() {
     // Create and populate the data table.
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Name');
     data.addColumn('number', 'Height');
     data.addColumn('boolean', 'Smokes');
     data.addRows(3);
     data.setCell(0, 0, 'Tong Ning mu');
     data.setCell(1, 0, 'Huang Ang fa');
     data.setCell(2, 0, 'Teng nu');
     data.setCell(0, 1, 174);
     data.setCell(1, 1, 523);
     data.setCell(2, 1, 86);
     data.setCell(0, 2, true);
     data.setCell(1, 2, false);
     data.setCell(2, 2, true);

     // Create and draw the visualization.
     visualization = new google.visualization.Table(document.getElementById('table'));
     visualization.draw(data, null);

     // set the width of the column with the title "Name" to 100px
     var title = "Name";
     var width = "100px";
     $('.google-visualization-table-th:contains(' + title + ')').css('width', width);
}

NA

unread,
Jul 19, 2011, 1:33:48 PM7/19/11
to Google Visualization API
Brilliant! I need to really start thinking about using jQuery to
tweak the GVIZ settings. Very nice solution...

Sutikshan

unread,
Jul 22, 2011, 6:32:13 AM7/22/11
to Google Visualization API
Thanks So Much
asgallant! it worked brilliantly.

Collin Davis

unread,
Mar 8, 2013, 2:30:09 PM3/8/13
to google-visua...@googlegroups.com
asgallant - I am attempting to use your solution below.  I have created a table using the google visualization api as you did below, and then copied over the lines of jQuery code that set the column widths, changed the column name for the title var and the width for the width var.  However, the column widths do not change.  I have even copied your whole function into an html file and ran it.  The table is created, but the column widths do not change when I change the width var value.

What am I doing wrong?

below is the script code in the <head> :

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
        <script src='http://www.smartcare.net/scripts/jquery.js' type='text/javascript'></script>          
        <script type='text/javascript'>
            google.load('visualization', '1', {packages:['Gauge','corechart','table']});
            google.setOnLoadCallback(drawVisualization);
            
            function drawVisualization() {
                // Create and populate the data table.
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Name');
                data.addColumn('number', 'Height');
                data.addColumn('boolean', 'Smokes');
                data.addRows(3);
                data.setCell(0, 0, 'Tong Ning mu');
                data.setCell(1, 0, 'Huang Ang fa');
                data.setCell(2, 0, 'Teng nu');
                data.setCell(0, 1, 174);
                data.setCell(1, 1, 523);
                data.setCell(2, 1, 86);
                data.setCell(0, 2, true);
                data.setCell(1, 2, false);
                data.setCell(2, 2, true);

                // Create and draw the visualization.
                visualization = new google.visualization.Table(document.getElementById('table'));
                visualization.draw(data, null);

                // set the width of the column with the title "Name" to 100px
                var title = "Name";
                var width = "500px";

asgallant

unread,
Mar 8, 2013, 3:05:01 PM3/8/13
to google-visua...@googlegroups.com
Properly, the code to modify the column width should be enclosed in a "ready" event handler for the table, to ensure that the table is finished drawing:

function drawTable () {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['Name', 'Height', 'Smokes'],
        ['Tong Ning mu', 174, true],
        ['Huang Ang fa', 523, false],
        ['Teng nu', 86, true]
    ]);
    
    // Create and draw the visualization.
    var table = new google.visualization.Table(document.getElementById('table'));
    
    google.visualization.events.addListener(visualization, 'ready', function () {
        // set the width of the column with the title "Name" to 100px
        var title = 'Name';
        var width = '100px';
        $('.google-visualization-table-th:contains(' + title + ')').css('width', width);        
    });
    
    table.draw(data, null);
}

google.load('visualization', '1', {packages: ['table']});
google.setOnLoadCallback(drawTable);

Try that and see if it works for you.

Collin Davis

unread,
Mar 8, 2013, 3:46:42 PM3/8/13
to google-visua...@googlegroups.com
Thanks, I will give it a try



--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/1dABD84NwkE/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
Collin Davis
Sr. Analyst
ImagineHealth
CDa...@ImagineHealth.com

Collin Davis

unread,
Mar 8, 2013, 3:52:00 PM3/8/13
to google-visua...@googlegroups.com
This did not work either.

Collin Davis

unread,
Mar 8, 2013, 3:52:55 PM3/8/13
to google-visua...@googlegroups.com, s.anan...@gmail.com
Sutikshan - how did you get this to work?  Will you post a copy of the script so I can see what you did?

asgallant

unread,
Mar 8, 2013, 5:49:35 PM3/8/13
to google-visua...@googlegroups.com
Did you use the exact code I posted, or did you adapt it to your own?  If you adapted it, can you post the code you are using?

Collin Davis

unread,
Mar 8, 2013, 7:00:54 PM3/8/13
to google-visua...@googlegroups.com
Same as yours


--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/1dABD84NwkE/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

asgallant

unread,
Mar 9, 2013, 12:30:57 AM3/9/13
to google-visua...@googlegroups.com
That is odd then, since it works fine when I use it.  It is worth pointing out that the example code as-is only controls the width of the "Name" column, not all columns in the table.  You have to add more code to adjust the width of the others.
Same as yours


To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Collin Davis

unread,
Mar 9, 2013, 10:31:00 PM3/9/13
to google-visua...@googlegroups.com
That is strange.  I did realize that the Name column is the only one affected by the routine.  I appreciate your assistance.  I will give it another try.


To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Collin Davis

unread,
Mar 9, 2013, 10:47:14 PM3/9/13
to google-visua...@googlegroups.com
Will you send me a copy of the code you used that worked? Not just the function, by the HTML as well.  Perhpas I am not referencing something correctly in the script tags.

asgallant

unread,
Mar 9, 2013, 11:22:08 PM3/9/13
to google-visua...@googlegroups.com
In the process of rebuilding it, I found an error, and I'm not sure how it got in there, but the code I posted above is definitely wrong.  The line:

google.visualization.events.addListener(visualization, 'ready', function () {

should be:

google.visualization.events.addListener(table, 'ready', function () {

Here's a working example: http://jsfiddle.net/asgallant/k3cqf/

Collin Davis

unread,
Mar 9, 2013, 11:43:59 PM3/9/13
to google-visua...@googlegroups.com
It works in jsFiddle.  However, when I copy the code to NetBeans, and save the HTML file, it does not work.  Below is the code:

Are my <script> references correct in the head tag?

<html>
     <head>
       
        <script type='text/javascript' src='https://www.google.com/jsapi'></script>
        <script src='http://www.smartcare.net/scripts/jquery.js'></script>          
        <script type='text/javascript'>
            google.load('visualization', '1', {packages:['table']});
            google.setOnLoadCallback(drawTable);
            
            function drawTable () {
    
                var data = google.visualization.arrayToDataTable([
                    ['Name', 'Height', 'Smokes'],
                    ['Tong Ning mu', 174, true],
                    ['Huang Ang fa', 523, false],
                    ['Teng nu', 86, true]
                ]);

                // Create and draw the visualization.
                var table = new google.visualization.Table(document.getElementById('table'));

                google.visualization.events.addListener(table, 'ready', function () {
                    // set the width of the column with the title "Name" to 100px
                    var title = 'Name';
                    var width = '30px';
                    $('.google-visualization-table-th:contains(' + title + ')').css('width', width);        
                });

                table.draw(data, null);
            }

            google.load('visualization', '1', {packages: ['table']});
            google.setOnLoadCallback(drawTable);

        </script>
    </head>
    
    <body>
                
                
        <div id='table'></div>
   
         
    </body>
    
</html>

Collin Davis

unread,
Mar 9, 2013, 11:56:32 PM3/9/13
to google-visua...@googlegroups.com
Found the issue.  It was in the <script src='http://www.smartcare.net/scripts/jquery.js'></script> line.  I needed to add the type='text/javascript' -->

<script src='http://www.smartcare.net/scripts/jquery.js' type='text/javascript'> </script>

Now it works.  I figured it had to be someting in the script declarations.

Thanks again for your help.  This works very nicely.

Daniel Callander

unread,
Aug 29, 2013, 6:20:58 AM8/29/13
to google-visua...@googlegroups.com
Hello everyone,

Been looking to do this as well and this code works for me, however the width resets when you change the table sorting by clicking on the column. Have any of you managed to get around this at all?

Cheers,
Daniel

asgallant

unread,
Aug 29, 2013, 10:07:49 AM8/29/13
to google-visua...@googlegroups.com
You need to set up an event listener to set the width on "sort" events.  I updated the example to do this: http://jsfiddle.net/asgallant/k3cqf/

Christina Sanabria

unread,
Mar 6, 2014, 2:08:03 PM3/6/14
to google-visua...@googlegroups.com
Hi, 

I am trying to use this technique to set the width on a column in my casesDetailed table. It is a table using ChartWrapper and using remote data. 

I checked out the fiddle and basically understand how it works, but I'm not sure where to put the snippet into my code. 

Here's my code. 


Thanks in advance for your help!


asgallant

unread,
Mar 6, 2014, 2:54:38 PM3/6/14
to google-visua...@googlegroups.com
First, when working with ChartWrappers, you have to structure the event listeners a bit differently.  Here's what they would look like using your casesDetailed table as an example:

google.visualization.events.addListener(casesDetailed, 'ready', function () {
    google.visualization.events.addListener(casesDetailed.getChart(), 'sort', setWidth);
    setWidth();
});

Place the code after creating the casesDetailed table, but before the Dashboard's draw call.
Reply all
Reply to author
Forward
Message has been deleted
0 new messages