Wow. I just read whole codes more than 50 times and can't understand that. Thanks millions times. You are really helpful.
On Saturday, October 20, 2012 3:10:26 AM UTC+4:30, asgallant wrote: > > 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/-/yDn7GUiAEi8J. 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.
