Thanks. I think it's better to remove PieChart and instead of that I used ColumnChart. Now I want to use several ColumnCharts and also some tables in my dashboard but only CloumnChart rendering and there's no Table? 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','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 table1 = new google.visualization.ChartWrapper({ chartType: 'Table', containerId: 'table1', option: { width: '920px', height: 53 }, view: {columns: [5, 6, 7, 8, 9, 10] } }); 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:80,top:10,width:"100%",height:"50%"}, }, view: {columns: [0, 5, 7, 9]}, }); new google.visualization.Dashboard(document.getElementById('dashboard')). bind(namePicker, myChart, table1). 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; } #filter_div { height: 20px; border-bottom: 1px #EEE solid; border-top: 1px #EEE solid; margin-bottom: 10px; padding: 10px 5px 5px 5px; } #chart_div { width: 600px; } </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> <h4>Project Completed (Potential [kW])</h4> <div id="chart_div"> </div> <div id="table2"></div> </div> <body> </html> Can you please help me again? On Friday, October 19, 2012 9:49:30 AM UTC+4:30, asgallant wrote: > > 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/-/aIBlwc0L7VYJ. 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.
