Hi, I'm trying to produce an "At a Glance" status screen which will have various graphs displayed on it.
Here is an extract of my code from my test system (i.e. dummy data): <script type="text/javascript" src="http://www.google.com/jsapi <view-source:http://www.google.com/jsapi>"></script><script type="text/javascript"><!-- google.load('visualization', '1', null); function drawGraphs() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'Gauge', dataTable: [ ['Label', 'Internal', 'Label', 'External'], ['Internal', 2, 'External', 1] ], options: { min: 0, max: 3, minorTicks: 10 }, containerId: 'user_graphs_div' }); wrapper.draw('user_graphs_div'); delete wrapper; wrapper = new google.visualization.ChartWrapper({ chartType: 'BarChart', dataTable: [ [ '', 'Site 1' ],[ '', 21 ] ], options: { isStacked: true, min: 0, max: 24, title: 'Jobs by Site', vAxis: {title: ''}, height: 125, width: 300, legend: {position: 'bottom', alignment: 'center'} }, containerId: 'sites_graph_div' }); wrapper.draw('sites_graph_div'); delete wrapper; wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', dataTable: [ [ '', 'Someone' ],[ '', 21 ] ], options: { min: 0, max: 24, title: 'Top 5 Creators Today', vAxis: {title: ''}, height: 125, width: 300, legend: {position: 'bottom', alignment: 'center'} }, containerId: 'creators_graph_div' }); wrapper.draw('creators_graph_div'); delete wrapper; wrapper = new google.visualization.ChartWrapper({ chartType: 'BarChart', dataTable: [ [ '', 'Type 1', 'Type 2' ], [ '', 21, 3 ] ], options: { isStacked: true, min: 0, max: 24, title: 'Jobs by Type', vAxis: {title: ''}, height: 400, width: 600, legend: {position: 'bottom', alignment: 'center'} }, containerId: 'jobtype_graph_div' }); wrapper.draw('jobtype_graph_div'); } google.setOnLoadCallback(drawGraphs);--></script><table class="listview" width="100%"> <tr> <td style="width: 326px; height: 250px; padding: 0;" align="center"> <font size="16"><b>Jobs so far today</b></font> <br /> <br /> <font size="16" color="gray"><b>24</b></font> <br /> <br /> <div id="jobtype_graph_div" style="width: 300px; height: 150px; position: relative;"></div> </td> <td style="width: 326px; height: 250px; padding: 0;" align="center"> <div id="sites_graph_div" style="width: 300px; height: 125px; position: relative;"></div> <div id="creators_graph_div" style="width: 300px; height: 125px; position: relative;"></div> </td> <td style="width: 326px; height: 250px; padding: 0;" align="center"> <font size="16"><b>Users so far today</b></font> <br /> <br /> <font size="16" color="gray"><b>3</b></font> <br /> <br /> <div id="user_graphs_div" style="width: 300px; height: 115px; position: relative;"></div> </td> </tr> </table> When I load the page the Gauge graph displays fine, but the various BarChart and ColumnChart display as: <div style="display: block; padding-top: 2px;" id="google-visualization-errors-all-5"> <div style="font: 0.8em arial,sans-serif; margin-bottom: 5px;" id="google-visualization-errors-4"> <span style="background-color: rgb(192, 0, 0); color: white; padding: 2px;">b is undefined <span style="font-size: 1.1em; font-weight: bold; cursor: pointer; padding-left: 10px; color: black; text-align: right; vertical-align: top;">×</span> </span> </div> </div> If I copy and paste the various charts into the google playground then they work perfectly. Has anyone got any ideas what I'm doing wrong and how I can fix? Thanks! -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/L2quLls-3hsJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
