Hi Daniel,
I tried the things you outlined below to no avail. In the end I was able to
do a little jQuery hack to get the result I wanted. I still suspect the
problem is in the google code although I'm not an expert programmer by any
means so I could be wrong.
I used the chrome developer tools to inspect the elements that were
inserted. I can't seem to copy out of developer tools without my chrome
crashing so please excuse any typos below
<div style="position: relative;">
<div style="position: relative; overflow: auto; width:1580px; height:
600px;>
<table class="google-visualization-table-table"
cellspacing="0">...</table>
</div>
< another div with another table in it>
</div>
It looks like however the width of the inserted table is determined is off
by 1 pixel. When I inserted a manual width of 1px less than the original
width everything worked out fine. So in the end, I used jQuery to resize
the table element after it's been drawn.
table.draw(data, options);
var t_width = $('.google-visualization-table-table').width()-21;
$('.google-visualization-table-table').width(t_width);
I had to subtract the width by 21 as for some reason the width jquery
returns is not the same as what was shown in developer tools
As a test, I removed all of my css and that extra pixel is still there. But
like I said, I'm not really a programmer by trade so I might just be doing
something stupid somewhere that's putting in that extra pixel.
On Friday, September 19, 2014 2:30:35 PM UTC-4, Daniel LaLiberte wrote:
>
> Jason,
>
> Thanks, but I can't tell what is going on just from an image and the
> source that needs to be interpreted by your server. I can make some
> guesses, or things to look into, however.
>
> The table is already very tight regarding the amount of data being
> displayed in that space, though it looks like there should be space without
> a scrollbar. What happens if you remove several columns?
>
> I don't see the definition of your black-bg CSS class. If it is merely
> setting the background color, then that is probably fine.
>
> Your outerWrap div might be contributing to the problem. Since the div
> that contains the table (#daily_table) doesn't have any styles that I can
> see, the outerWrap sizes will have some influence that may be difficult to
> predict. Try setting its margin border and padding all to 0 to see what
> happens. Or more simply, just remove the outerWrap class from that div.
>
>
> On Fri, Sep 19, 2014 at 2:05 PM, Jason Lu <huaxi...@gmail.com
> <javascript:>> wrote:
>
>> Here is a screenshot of my page.
>>
>> http://imgur.com/m0FNXE9
>>
>> Here is the relevant code
>>
>> HTML:
>>
>> <div class='prod_box'>
>> <div class='boxTitle'>Daily Returns By Product</div>
>> <div class='outerWrap' >
>> <div class='g_table' id='daily_table'>
>> </div>
>> </div>
>> </div>
>>
>> CSS:
>> .boxTitle{
>> color:white;
>> margin: 0 0 1px 12px;
>> }
>>
>>
>> .outerWrap{
>> padding: 10px;
>> background-color: white;
>> position:relative;
>> margin-left: 10px;
>> margin-bottom: 5px;
>> -moz-border-radius: 4px;
>> -webkit-border-radius: 4px;
>> border-radius: 4px;
>> border: 1px solid black;
>> }
>>
>> Javascript:
>> function drawTable2() {
>> var rets = <%= raw @rets %>;
>> var data = new google.visualization.DataTable();
>> var h = <%=raw @headers.to_json %>;
>> data.addColumn('string','Date');
>> for (var i = 0; i < h.length;i++){
>> data.addColumn('number', h[i]);
>> }
>>
>> data.addRows(rets);
>>
>> var formatter = new google.visualization.ColorFormat();
>> formatter.addRange(null,0,'white','red');
>> formatter.addRange(0.00000001,null,'white','green');
>> formatter.addRange(0,0.00000001,'gray','gray');
>> var formatter2 = new google.visualization.NumberFormat();
>> for (var i = 1; i < h.length+1;i++){
>> formatter.format(data,i);
>> formatter2.format(data,i);
>> }
>>
>> for (var i=0;i<rets.length;i++){
>> data.setProperty(i,0,'className', 'black-bg
>> google-visualization-table-td');
>> }
>> var options = {'allowHtml':true, height:'600px',sort:'disable' };
>> var table = new
>> google.visualization.Table(document.getElementById('daily_table'));
>> table.draw(data, options);
>> }
>>
>>
>> On Thursday, September 18, 2014 3:27:47 PM UTC-4, Daniel LaLiberte wrote:
>>>
>>> If there is no width that is large enough, then I guess it just won't
>>> work.
>>>
>>> I am curious to see the page with your chart that shows this problem,
>>> just to make sure the new version will work with it. It is possible that
>>> other styles on your page are affecting the table layout in ways that may
>>> be difficult to work around.
>>>
>>> On Thu, Sep 18, 2014 at 1:59 PM, Jason Lu <huaxi...@gmail.com> wrote:
>>>
>>>> Thanks Daniel. I've tried a couple different widths and no specified
>>>> width. Nothing has seemed to work so far. Are there any tips for width
>>>> selection? If not, I guess I'll just wait for the update to come out.
>>>>
>>>> On Wednesday, September 17, 2014 10:15:37 PM UTC-4, Daniel LaLiberte
>>>> wrote:
>>>>>
>>>>> Jason,
>>>>>
>>>>> You can specify a width as well in the options, and experiment until
>>>>> you find a combination that works for your data. However, that is not a
>>>>> satisfactory answer if your data varies each time it is viewed.
>>>>>
>>>>> I've actually been doing a lot of work on the table chart sizing, and
>>>>> finally got it to be working as I think it should in all useful cases.
>>>>> These changes will be made available in the next release cycle, which
>>>>> should start in a couple weeks.
>>>>>
>>>>>
>>>>> On Wed, Sep 17, 2014 at 7:34 PM, Jason Lu <huaxi...@gmail.com> wrote:
>>>>>
>>>>>> Hello, when I set a height in the options on my table I end up with a
>>>>>> horizontal scrollbar that barely moves, but is present. It seems like
>>>>>> the
>>>>>> presence of the vertical scrollbar causes a slight mismatch in
>>>>>> dimensions.
>>>>>> Is there a way to fix this?Thanks
>>>>>>
>>>>>> --
>>>>>> 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-visualization-api+unsub
>>>>>> scr...@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.
>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Daniel LaLiberte
>>>>> <https://plus.google.com/100631381223468223275?prsrc=2> -
>>>>> 978-394-1058
>>>>> dlali...@google.com 5CC, Cambridge MA
>>>>> daniel.l...@gmail.com 9 Juniper Ridge Road, Acton MA
>>>>>
>>>> --
>>>> 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-visualization-api+unsubscr...@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.
>>>> For more options, visit https://groups.google.com/d/optout.
>>>>
>>>
>>>
>>>
>>> --
>>> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
>>> - 978-394-1058
>>> dlali...@google.com 5CC, Cambridge MA
>>> daniel.l...@gmail.com 9 Juniper Ridge Road, Acton MA
>>>
>> --
>> 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-visualization-api+unsubscr...@googlegroups.com
>> <javascript:>.
>> To post to this group, send email to google-visua...@googlegroups.com
>> <javascript:>.
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
>
> --
> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
> - 978-394-1058
> dlali...@google.com <javascript:> 5CC, Cambridge MA
> daniel.l...@gmail.com <javascript:> 9 Juniper Ridge Road, Acton MA
>
--
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-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
