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/-/08RbjtvgiQMJ.
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.
