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.
