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/-/9Zmnw8APbGwJ.
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.
