Greetings, I'm trying to create pie chart inside my dashboard using my google spreadsheets. I have a filter to filter from province column that work well and now i need to create pie chart from Percentage of Total Area (%) column that each is relative to it's province.
Here's my 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','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 id="chart1_div"></div> <div id="chart_div"></div> </div> </div> <body> </html> Can anyone please help me? -- 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/-/agBdbSCxegcJ. 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.
