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/
On Thursday, August 29, 2013 6:20:58 AM UTC-4, Daniel Callander wrote: > > 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 > > On Sunday, March 10, 2013 4:56:32 AM UTC, Collin Davis wrote: >> >> 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. >> >> On Saturday, March 9, 2013 9:43:59 PM UTC-7, Collin Davis wrote: >>> >>> 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> >>> >>> On Saturday, March 9, 2013 9:22:08 PM UTC-7, asgallant wrote: >>>> >>>> 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/ >>>> >>>> On Saturday, March 9, 2013 10:47:14 PM UTC-5, Collin Davis wrote: >>>>> >>>>> 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. >>>>> >>>>> On Friday, March 8, 2013 10:30:57 PM UTC-7, asgallant wrote: >>>>>> >>>>>> 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. >>>>>> >>>>>> On Friday, March 8, 2013 7:00:54 PM UTC-5, Collin Davis wrote: >>>>>>> >>>>>>> Same as yours >>>>>>> >>>>>>> >>>>>>> On Fri, Mar 8, 2013 at 3:49 PM, asgallant <[email protected]>wrote: >>>>>>> >>>>>>>> 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? >>>>>>>> >>>>>>>> On Friday, March 8, 2013 3:52:00 PM UTC-5, Collin Davis wrote: >>>>>>>>> >>>>>>>>> This did not work either. >>>>>>>>> >>>>>>>>> On Friday, March 8, 2013 1:05:01 PM UTC-7, asgallant wrote: >>>>>>>>>> >>>>>>>>>> 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. >>>>>>>>>> >>>>>>>>>> On Friday, March 8, 2013 2:30:09 PM UTC-5, Collin Davis wrote: >>>>>>>>>>> >>>>>>>>>>> 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 <https://www.google.com/jsapi>'></script> >>>>>>>>>>> <script src='http://www.smartcare.net/** >>>>>>>>>>> scripts/jquery.js <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"; >>>>>>>>>>> $('.google-visualization-**table-th:contains(' >>>>>>>>>>> + title + ')').css('width', width); >>>>>>>>>>> } >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> On Tuesday, July 19, 2011 11:22:42 AM UTC-6, asgallant wrote: >>>>>>>>>>>> >>>>>>>>>>>> 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); >>>>>>>>>>>> } >>>>>>>>>>>> >>>>>>>>>>>> -- >>>>>>>> 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 >>>>>>>> [email protected]. >>>>>>>> To post to this group, send email to >>>>>>>> [email protected]. >>>>>>>> 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. >>>>>>>> >>>>>>>> >>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>> - >>>>>>> >>>>>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
