The answer to your first question is rather complicated, so I'll start with the second: yes, you can have multiple pie charts. You just need to create chart objects for each one and have a separate container div for each one.
To the first question, this is possible, but requires a bit of hackery to make it work. Basically, you have to set things up so that you get the value from the control, and then use that to group the data from the DataTable, then draw the pie based on the grouped data. This doesn't really work in the context of a Dashboard; the control can be a part of one, controlling other charts, but the pie cannot be bound to the same dashboard (the pie could be part of a second dashboard driven by the grouped data, but that's a bit beyond this discussion - for now, just assume the pie cannot be bound to a dashboard). Here's an example doing it without the dashboard: http://jsfiddle.net/asgallant/ttDGz/5/ On Thursday, October 18, 2012 10:26:55 PM UTC-4, Qasim Rasouli wrote: > > Thanks so much. I tried myself a lot but didn't find this. :D > Two more questions: > 1- How can I have another value to complete my province value to become > 100%. I mean having two values for my pie chart. One is the province value > and another for showing total remaining percentage? > 2- Can I use several pie charts (for example 5) inside one dashboard? > > Thanks agin for your help. > > On Friday, October 19, 2012 3:45:29 AM UTC+4:30, asgallant wrote: >> >> Making the pie chart work on the Percentage of Total Area column is >> fairly simple. Set the pie chart's view.columns option to an array of the >> column indices you want to use (in this case, 0 and 3). With your filter, >> though, that would make a pie with a single value, which generally isn't >> very useful. Here's a working example using your code: >> http://jsfiddle.net/asgallant/ttDGz/ >> >> On Thursday, October 18, 2012 5:45:40 PM UTC-4, Qasim Rasouli wrote: >>> >>> Hi everyone, >>> >>> I'm trying to create my first dashboard using my google spreadsheets. >>> I'm not too much familiar with google visualization API: >>> I create this: >>> <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','linechart']}); >>> >>> // 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 >>> } >>> } >>> }); >>> >>> var pieChart = new google.visualization.ChartWrapper({ >>> 'chartType': 'PieChart', >>> 'containerId': 'chart_div', >>> 'options': { >>> 'width': 300, >>> 'height': 300, >>> 'pieSliceText': 'value', >>> 'legend': 'right' >>> } >>> }); >>> var dashboard = new >>> google.visualization.Dashboard(document.getElementById('dashboard_div')). >>> bind(namePicker, pieChart). >>> 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: #EEE; >>> } >>> .header { >>> height: 150px; >>> } >>> #filter_div { >>> height: 20px; >>> border-bottom: 1px #FFFFFF solid; >>> border-top: 1px #FFFFFF solid; >>> margin-bottom: 10px; >>> padding: 10px 5px 5px 5px; >>> } >>> #chart_div { >>> width: 190px; >>> } >>> </style> >>> </head> >>> <body> >>> <div class="warpper"> >>> <div class="header"> >>> <div class="qasim"> >>> </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="chart_div"></div> >>> </div> >>> </div> >>> <body> >>> </html> >>> >>> I have a filter that filtering using Province column in my sheet (filter >>> is working). So, I need to make a pie chart from *Percentage of Total >>> Area (%) *column that to show a percentage of each province area. So I >>> need a pie chart to show the percentage of each province and total >>> percentage that is the sum of the column. >>> Can anyone help me? >>> Thanks in advance. >>> >> -- 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/-/OSK-j8MMN_sJ. 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.
