I almost finished my project but there's small problem. I'm using three pie
chart and I need each to query specific column from my sheet but they all
just query from my first and second column in that sheet. here's my code:
<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.0', {packages:['corechart']});
// 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('https://docs.google.com/spreadsheet/tq?range=A%3AX&key=0AvGcVM8k_RwUdExOclVzaEVDSlVvSTlEU2UxdTJOdFE&gid=12&headers=-1');
// Send the query with a callback function.
query.send(drawDashboard);
}
function drawDashboard(response) {
var data = response.getDataTable();
// Everything is loaded. Assemble your dashboard...
var pie1 = new
google.visualization.PieChart(document.getElementById('pie1'));
pie1.draw(data, {
backgroundColor: 'whiteSmoke',
width: 280,
height: 200,
legend: 'none',
colors:['#29abe2','#81d5f2','#d3e9f2'],
chartArea:{left:20,top:10,width:"90%",height:"90%"},
view: {
columns: [4, 5]
}
});
var pie2 = new
google.visualization.PieChart(document.getElementById('pie2'));
pie2.draw(data, {
backgroundColor: 'whiteSmoke',
width: 280,
height: 200,
legend: 'bottom',
colors:['#f9e208','#f2e77c','#f7f6eb'],
chartArea:{left:20,top:10,width:"90%",height:"90%"},
view: {
columns: [8, 9]
}
});
var pie3 = new
google.visualization.PieChart(document.getElementById('pie3'));
pie3.draw(data, {
backgroundColor: 'whiteSmoke',
width: 280,
height: 200,
legend: 'none',
colors:['#8cc63f','#caef8f','#eff9e1'],
chartArea:{left:20,top:10,width:"90%",height:"90%"},
view: {
columns: [12, 13]
}
});
var element = document.getElementById('foo');
element.innerHTML = data.getValue(0, 1);
var element = document.getElementById('foo1');
element.innerHTML = data.getValue(1, 1);
var element = document.getElementById('foo2');
element.innerHTML = data.getValue(2, 1);
var element = document.getElementById('foo3');
element.innerHTML = data.getValue(0, 3);
var element = document.getElementById('foo4');
element.innerHTML = data.getValue(1, 3);
var element = document.getElementById('foo5');
element.innerHTML = data.getValue(2, 3);
}
</script>
On Saturday, October 20, 2012 6:58:56 PM UTC+4:30, asgallant wrote:
>
> 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/-/PkM9b-QnZ5cJ.
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.
