That's a new one. Post your code and I'll take a look.
On Friday, October 19, 2012 1:58:37 PM UTC-4, Qasim Rasouli wrote:
>
> Thanks. I can successfully make another columnchart but the table show
> this error: [object HTMLDivElement] does not fit either the Control or
> Visualization specification.
> I remove the wrapper and also reduce the columns but still not showing the
> table?!
>
> On Friday, October 19, 2012 9:38:11 PM UTC+4:30, asgallant wrote:
>>
>> 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/-/Gk50eb5obP0J.
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.
