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/-/Tr4Im2PuESEJ.
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.

Reply via email to