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/-/iMDSl0JhksUJ. 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.
