Hey Trevor,
Did you end up finding a solution to this problem? I am having the same
issue.
Cheers,
Oly
On Tuesday, 9 July 2013 20:34:18 UTC+12, Trevor wrote:
>
> I tried the things you mentioned but I am not seeing the problems. For
> example I do want the divs for the charts to take up 100% of the screen
> width. But even changing them all to 1000 pixel width doesn't help. Looking
> at it in the debugger I am still seeing the same thing. The outer div
> region is 1000px or 100% and the ltr is only 400 pixels wide. I can make it
> smaller by shrinking the outer divs, but it wont expand to fill them.
>
> I have included what I hope to be an enlightening screen shot. The
> highlighted value in the element tree is the parent of the actual chart
> image. You can see, all the way up the chain of divs, they are all set to
> 100%. It is just the "ltr" div which has a restricted size. I am curious
> why when I hover over the dashboard0_chart outer region it shows a size 0 x
> 0. When I hover over other elements it show the height and width of them
> correctly. But that value cannot be 0 x 0, as it has a height and width
> value in the style of the element. So what could be the problem?
>
> The code remains as before.
> Thanks!
>
> On Monday, July 8, 2013 6:53:41 PM UTC+2, asgallant wrote:
>>
>> There are a few things here:
>>
>> 1) If you don't specify a "width" and "height" parameter for the chart,
>> the API takes the width and height of the container div as the dimensions
>> of the chart.
>> 2) you are specifying the chartArea.height and chartArea.width, which
>> only affect the internal region of the chart (where the lines are drawn,
>> not including the title, legend, axis labels). This value can never be
>> larger than the defined (in the height/width options) or derived (from the
>> container div's dimensions) height and width of the chart.
>> 3) you are specifying the chartArea.width as a string, when it should be
>> a number, eg:
>>
>> chartArea: {
>> height: '80%', // percents should be strings
>> width: 1000 // pixel dimensions should be numbers
>> }
>>
>> If you intend for the dimensions you are setting in your chartArea to be
>> the dimensions of the chart, just pull them out from the chartArea option
>> and use them on their own.
>>
>> If you want to align the control and the chart, you need to specify
>> *both* the width and the chartArea.width options to make it work.
>>
>>
>> On Monday, July 8, 2013 10:03:20 AM UTC-4, Trevor Haba wrote:
>>>
>>> Hello
>>>
>>> I am attempting to dynamically generate <div> tags to be filled with
>>> google visualizations. So far I have everything working except for one bug
>>> which is currently rendering my program useless. The width of the divs wont
>>> change! So I am stuck with really narrow graphs that are impossible to
>>> read. Here is my code:
>>>
>>>
>>> var thisDashboard =
>>> document.createElement(chartDivID);
>>> thisDashboard.setAttribute("id", chartDivID);
>>> thisDashboard.setAttribute("style", "width: 100%; height: 425 px;");
>>> document.getElementById("chartArea").appendChild(thisDashboard);
>>> var thisChart = document.createElement(chartDivID + "_chart");
>>> thisChart.setAttribute("id", chartDivID + "_chart");
>>> thisChart.setAttribute("style", "width: 100%; height: 300px;");
>>> thisDashboard.appendChild(thisChart);
>>> var thisControl = document.createElement(chartDivID + "_scrollBar");
>>> thisControl.setAttribute("id", chartDivID + "_scrollBar");
>>> thisControl.setAttribute("style", "width: 100%; height: 75 px;");
>>> thisDashboard.appendChild(thisControl);
>>>
>>>
>>> var dashboard = new
>>> google.visualization.Dashboard(document.getElementById(chartDivID));
>>>
>>> var control = new google.visualization.ControlWrapper({
>>> 'controlType': 'ChartRangeFilter',
>>> 'containerId': chartDivID + '_scrollBar',
>>> 'options': {
>>> // Filter by the date axis.
>>> 'filterColumnIndex': 0,
>>> 'ui': {
>>> 'chartType': 'LineChart',
>>> 'chartOptions': {
>>> 'chartArea': {'width': '1000px', 'height': '65%'},
>>> 'hAxis': {'baselineColor': 'none'}
>>> },
>>> }
>>> }
>>> });
>>>
>>> var chart = new google.visualization.ChartWrapper({
>>> 'chartType': 'LineChart',
>>> 'containerId': chartDivID + '_chart',
>>> 'options': {
>>> // Use the same chart area width as the control for axis alignment.
>>> 'chartArea': {'height': '80%', 'width': '1000px'},
>>> 'hAxis': {'slantedText': true}
>>> }
>>> });
>>> dashboard.bind(control, chart);
>>> dashboard.draw(logging_data_table);
>>>
>>> Everything is in order as far as I can tell. But when I load the
>>> website, here is what I get:
>>>
>>> <dashboard0 id="dashboard0" style="width:100%;
>>> positiion: relative;">
>>> <dashboard0_chart id="dashboard0_chart"
>>> style="width: 100% ...">
>>> <div dir="ltr" style="width 400px;" ....>
>>> ... within here is more google
>>> visualiation data ......
>>>
>>>
>>> So clearly google's visualization is inherently limiting the size of the
>>> chart. How can I stop it from doing this? I wasn't having this problem when
>>> I was rendering just one chart on the page, but now I have several. Does
>>> the visualization API run into problems with more than one chart on the
>>> page? If so, how can I get around this?
>>>
>>> Thanks for your help!
>>>
>>>
>>
--
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.
