Works like a charm. Thanks.
On Tuesday, October 23, 2012 9:26:56 AM UTC+4:30, asgallant wrote:
>
> There are two ways to handle this:
>
> 1) create 3 separate queries, one for each chart. This is generally
> inefficient but sometimes necessary.
> 2) if you can query all relevant columns in a single query, then use
> DataViews to separate out the columns needed for each pie, eg:
>
> var view1 = new google.visualization.DataView(data);
> //use columns 0 and 1 for the first pie chart
> view1.setColumns([0, 1]);
>
> pie1.draw(view1, {/*options*/});
>
>
> On Monday, October 22, 2012 10:02:34 PM UTC-4, Qasim Rasouli wrote:
>>
>> 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/-/13zk4uh5T1AJ.
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.
