Google Table Header Row Scrolling & Gradient Fill

143 views
Skip to first unread message

J Johnson

unread,
Dec 22, 2015, 12:12:59 PM12/22/15
to Google Visualization API
Hi-

I am creating a table and am encountering 2 problems:

1) When I freeze the left most column and scroll the data horizontally, the header row does not scroll with the data (rendering it very difficult for the user to figure out what data they are looking at).  Yet the header row is not fixed when I scroll vertically.  Is there a way to turn header row scrolling off?  Or fix the problem?

2) The header row fill is a gradient fill.  How can I return a solid color fill?

Here is my code:

<html>
<head>
 <style type="text/css">
  
  .styleheader {
background-color:#421476 !important;
color: black;
text-align: center;
font-weight: bold;
    height: 50px;
}

.stylecell {
text-align: center !important;
padding: 10px;

}
</style>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["table"]});
      google.setOnLoadCallback(drawTable);

      function drawTable() {
      var queryString=encodeURIComponent('SELECT A, B, H, J, L, P, R, T, V');
      var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/SOME SHEET'+queryString);
      query.send(handleQueryResponse);
   
}
function handleQueryResponse(response) {
        var data = response.getDataTable();
          var table = new google.visualization.Table(document.getElementById('table_div'));
          var tableStyle = 
          {tableCell:'stylecell',headerRow: 'styleheader' 
          };
          
        table.draw(data, {
        allowHtml: true,
        showRowNumber: false, 
        width: '70%', 
        height: '100%',
        frozenColumns: '1',
        cssClassNames: tableStyle
        });
    
      }

    </script>
  </head>
  <body>
    <div id="table_div" style="align: center"></div>
  </body>
</html>

Daniel LaLiberte

unread,
Dec 22, 2015, 12:39:37 PM12/22/15
to Google Visualization API
Hi Jennifer,

It would be good to see a working example in this case.    You can mail to me separately if you want to keep it private.

Scrolling works properly in cases we have tested, but there are ways to confuse the code, particularly with your own styles that might conflict.  To debug your code, I would first turn off all the styling changes you have just to see how it works then.   If that works, then I would incrementally add changes back in until it starts failing.  

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e8e03130-c03c-4bc8-956e-a2c08049e526%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Jennifer Johnson

unread,
Dec 22, 2015, 12:51:02 PM12/22/15
to google-visua...@googlegroups.com
Hi Daniel- Thanks for the response.  I found that if I set a fixed height (not 100%) the vertical scrolling works, but not the horizontal.  That is my main problem right now and what the users want to see most of all, so they can use the site on mobile devices easier.  

Here is the test site:


And here is the sheet is is based on:


The gradient fill issue is more aesthetic--I can live with it.

Thank you so much!
Jennifer



--
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/fsEHT-kz3WI/unsubscribe.
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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJOK1j%3DKjOts1J8%2BqiPeaYb3C2NBQuvDhK%3Dis%2BXnEq3NUg%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.



--
Jennifer Johnson
Data Analyst
Leadership Public Schools

J Johnson

unread,
Dec 22, 2015, 1:05:00 PM12/22/15
to Google Visualization API
I should also add I tried turning off all style changes, and the horizontal scrolling still do not include the header row...
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.



--

--
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/fsEHT-kz3WI/unsubscribe.
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-visualization-api@googlegroups.com.

Daniel LaLiberte

unread,
Dec 22, 2015, 3:25:00 PM12/22/15
to Google Visualization API
I am only seeing an error page:

  

9TH GRADE SUMMARY OVERVIEW


Sorry, the file you have requested does not exist.

Please check the address and try again.




To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.



--

--
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/fsEHT-kz3WI/unsubscribe.
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.



--
Jennifer Johnson
Data Analyst
Leadership Public Schools

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/ecd23d94-ee88-4ccf-865a-8bff3862d80b%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Jennifer Johnson

unread,
Dec 22, 2015, 3:26:44 PM12/22/15
to google-visua...@googlegroups.com
I am sorry--I did not publish the web app to anyone other than myself.  It is fixed.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMTds4b7Kq%3De0p-X7a0e%3DLt1dBjz%3DRsm5Lj9eTkG9x-fw%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

Jennifer Johnson

unread,
Dec 22, 2015, 3:35:43 PM12/22/15
to google-visua...@googlegroups.com
Or maybe not...the app script doesn't seem to load unless you are logged in to my work domain, even though I have made everything public.  Let me see what the problem may be.

Daniel LaLiberte

unread,
Dec 22, 2015, 3:36:48 PM12/22/15
to Google Visualization API
I am getting a table now, and it shows the horizontal scrolling problem.  Not sure why yet, but I am suspecting the containers.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CALnBDQNGws2KwxocDhzHczTZUst3UCAkr6BHJy6iA2FAMshRTQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

J Johnson

unread,
Dec 22, 2015, 3:59:09 PM12/22/15
to Google Visualization API
OK--I will continue to try to trouble shoot.  Any ideas you have are most appreciated.  Thanks again for looking at this issue.

Daniel LaLiberte

unread,
Dec 22, 2015, 4:04:50 PM12/22/15
to Google Visualization API
Here is an example with your data and most of your options, except the custom css which seems to be the whole problem here:


I'm not sure how you can work around this while keeping your styles, but I'll have to take a look sometime later.

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/a53ac869-7139-444a-89f7-9dc33dffe7d1%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Jennifer Johnson

unread,
Dec 22, 2015, 5:13:42 PM12/22/15
to google-visua...@googlegroups.com
OK, thanks Daniel.  I see the jsfiddle working, but even when I disable the custom css from the apps script on the site it does not function correctly...

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/fsEHT-kz3WI/unsubscribe.
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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJNMAF%2Bk58QgoRCma3f1f-s2kk0u56qBiUrLnECjtHGRmg%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.



--

Daniel LaLiberte

unread,
Dec 22, 2015, 10:40:12 PM12/22/15
to Google Visualization API
I also changed the frozenColumns option from a string to a number.  That seems to make a difference as well, though I am not sure why.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CALnBDQM_QOPVoxSLQDvgfy02dMoFjqe%2BpkRvWU9N_6PDPD1X3Q%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

Jennifer Johnson

unread,
Dec 23, 2015, 10:10:14 AM12/23/15
to google-visua...@googlegroups.com
That worked!  Don't know why either, but thank you so much for your help!!!

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJOO-bfN5OrwpGin84zLOACH%3D11x%2B1_QufEAWvYDM6ovOA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages