You're welcome.
On Tuesday, October 23, 2012 7:53:19 PM UTC-4, Qasim Rasouli wrote:
>
> 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/-/epygrlU8SXMJ.
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.
