It's just a typo; you pass "table1" to the bind call, but your table is in the variable "table", so this:
bind([namePicker], [myChart, table1, mysecondChart]). should be this: bind([namePicker], [myChart, table, mysecondChart]). On Friday, October 19, 2012 5:07:21 PM UTC-4, Qasim Rasouli wrote: > > here's the code: > > <html><head> > <title>Renewable Energy Projects</title> > > <!--Load the AJAX API--> > <script type="text/javascript" src="https://www.google.com/jsapi > "></script> > <script type="text/javascript"> > > // Load the Visualization API and the controls package. > // Packages for all the other charts you need will be loaded > // automatically by the system. > google.load('visualization', '1.1', {packages:['controls','corechart', > 'table']}); > > // Set a callback to run when the Google Visualization API is loaded. > google.setOnLoadCallback(initialize); > > function initialize() { > // Replace the data source URL on next line with your data source URL. > var query = new google.visualization.Query(' > http://spreadsheets.google.com/pub?key=0AvGcVM8k_RwUdExOclVzaEVDSlVvSTlEU2UxdTJOdFE&gid=11' > ); > > > // Send the query with a callback function. > query.send(drawDashboard); > } > > > function drawDashboard(response) { > var data = response.getDataTable(); > > // Everything is loaded. Assemble your dashboard... > var namePicker = new google.visualization.ControlWrapper({ > 'controlType': 'CategoryFilter', > 'containerId': 'filter_div', > 'options': { > 'filterColumnLabel': 'Province', > 'ui': { > 'labelStacking': 'horizontal', > 'allowTyping': false, > 'allowMultiple': false > } > }, > 'state': {'selectedValues': ['Kabul']} > }); > > var table = new google.visualization.ChartWrapper({ > 'chartType': 'Table', > 'containerId': 'table1', > 'options': { > 'width': '500px', > }, > 'view': {'columns': [0, 5] ,'rows': [0] } > }); > > var myChart = new google.visualization.ChartWrapper({ > chartType: 'ColumnChart', > containerId: 'chart_div', > options: { > colors:['#29abe2','#fcee21', '#8cc63f'], > legend: {position: 'bottom', textStyle: {color: '#666', > fontSize: 10}}, > chartArea:{left:60,top:40,width:"70%",height:"50%"}, > }, > view: {columns: [0, 5, 7, 9]}, > }); > > var mysecondChart = new google.visualization.ChartWrapper({ > chartType: 'ColumnChart', > containerId: 'chartsecond_div', > options: { > colors:['#29abe2','#fcee21', '#8cc63f'], > legend: {position: 'bottom', textStyle: {color: '#666', > fontSize: 10}}, > chartArea:{left:60,top:40,width:"70%",height:"50%"}, > }, > view: {columns: [0, 11, 13, 15]}, > }); > > new google.visualization.Dashboard(document.getElementById('dashboard')). > bind([namePicker], [myChart, table1, mysecondChart]). > draw(data) > > } > </script> > > <style type="text/css"> > .warpper { > width: 600px; > font-family: Arial, Helvetica, sans-serif; > font-size: 12px; > margin:0px auto; > padding: 10px; > background-color: #FFF; > } > .header { > height: 150px; > } > #firstrow { > width: 600px; > display: table; > background-color: #FAFAFA; > padding: 5px; > } > #secondrow { > width: 600px; > display: table; > background-color: #FAFAFA; > padding: 5px; > margin-top: 10px; > } > #filter_div { > height: 20px; > border-bottom: 1px #EEE solid; > border-top: 1px #EEE solid; > margin-bottom: 10px; > padding: 10px 5px 5px 5px; > } > #chart_div { > background-color: #FAFAFA; > width: 290px; > border: 1px #ccc solid; > float: left; > position: relative; > } > #table1 { > background-color: #eeeeee; > width: 290px; > border: 1px #ccc solid; > float: right; > margin-left: 10px; > } > #chartsecond_div { > width: 290px; > border: 1px #ccc solid; > float: left; > position: relative; > } > #table2 { > background-color: #eeeeee; > width: 290px; > border: 1px #ccc solid; > float: right; > margin-left: 10px; > } > h1 { > font-size: 26px; > font-weight: bold; > color: #999; > margin-bottom: 20px; > text-shadow: 2px 2px 2px #ccc; > } > > h2 { > font-size: 20px; > } > > h3 { > font-size: 18px; > } > > h4 { > font-size: 14px; > font-weight: bold; > } > > h5 { > font-size: 14px; > font-weight: normal; > } > > h6 { > font-size: 12px; > } > </style> > </head> > <div class="warpper"> > <body> > <div class="header"> > <div class="qasim"> > <h1>Afghanistan Renewable Energy Projects<h1> > </div> > </div> > <!--Div that will hold the dashboard--> > <div id="dashboard"></div> > <!--Divs that will hold each control and chart--> > <div id="filter_div"></div> > <div id="firstrow"> > <h4>Project Completed (Potential [kW])</h4> > <div id="chart_div"></div> > <div id="table1"></div> > </div> > <div id="secondrow"> > <h4>Projects Under Construction (Potential [kW])</h4> > <div id="chartsecond_div"></div> > <div id="table2"></div> > </div> > </body> > <body> > </html> > > -- 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/-/YUMqkR2EaUcJ. 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.
