There are two problems:
1) you use "table1" for the containerId in the table, but the div has the
id "table2"
2) you need to pass an array to the bind method when binding multiple
charts:
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind([namePicker], [myChart, table1]).
draw(data);
On Friday, October 19, 2012 12:47:00 PM UTC-4, Qasim Rasouli wrote:
>
> 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/-/l1y0MR6QaGsJ.
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.
