You're welcome. On Saturday, October 20, 2012 5:12:29 AM UTC-4, Qasim Rasouli wrote: > > 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/-/DTUayOG3qn0J. 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.
