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/-/AUDLv93ITZ0J. To post to this group, send email to google-visualization-api@googlegroups.com. To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
