[visualization-api] Re: Creating Pie charts in Dashboard using Google Spreadsheets

Fri, 19 Oct 2012 14:07:24 -0700 

here's the 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 table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table1',
    'options': {
     'width': '500px',
         }, 
 'view': {'columns': [0, 5] ,'rows': [0] }
  });
  
  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:60,top:40,width:"70%",height:"50%"},
        },
        view: {columns: [0, 5, 7, 9]},
  });

  var mysecondChart = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chartsecond_div',
        options: {
colors:['#29abe2','#fcee21', '#8cc63f'],
            legend: {position: 'bottom', textStyle: {color: '#666', 
fontSize: 10}},
          chartArea:{left:60,top:40,width:"70%",height:"50%"},
        },
        view: {columns: [0, 11, 13, 15]},
  });
  
  new google.visualization.Dashboard(document.getElementById('dashboard')).
    bind([namePicker], [myChart, table1, mysecondChart]).
    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;
}
#firstrow {
width: 600px;
display: table;
background-color: #FAFAFA;
padding: 5px;
}
#secondrow {
width: 600px;
display: table;
background-color: #FAFAFA;
padding: 5px;
margin-top: 10px;
}
#filter_div {
height: 20px;
border-bottom: 1px #EEE solid;
border-top: 1px #EEE solid;
margin-bottom: 10px;
padding: 10px 5px 5px 5px;
}
#chart_div {
background-color: #FAFAFA;
width: 290px;
border: 1px #ccc solid;
float: left;
position: relative;
}
#table1 {
background-color: #eeeeee;
width: 290px;
border: 1px #ccc solid;
float: right;
margin-left: 10px;
}
#chartsecond_div {
width: 290px;
border: 1px #ccc solid;
float: left;
position: relative;
}
#table2 {
background-color: #eeeeee;
width: 290px;
border: 1px #ccc solid;
float: right;
margin-left: 10px;
}
h1 {
font-size: 26px;
font-weight: bold;
color: #999;
margin-bottom: 20px;
text-shadow: 2px 2px 2px #ccc;
}

h2 {
font-size: 20px;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 14px;
font-weight: bold;
}

h5 {
font-size: 14px;
font-weight: normal;
}

h6 {
font-size: 12px;
}
</style>
</head>
<div class="warpper">
<body>
<div class="header">
<div class="qasim">
        <h1>Afghanistan Renewable Energy Projects<h1>
</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="firstrow">
      <h4>Project Completed (Potential [kW])</h4>
      <div id="chart_div"></div>
      <div id="table1"></div>
      </div>
      <div id="secondrow">
      <h4>Projects Under Construction (Potential [kW])</h4>
      <div id="chartsecond_div"></div>
      <div id="table2"></div>
  </div>
      </body>
<body>
</html>

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