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.
