JSCode

<!DOCTYPE html>
<html>
  <head>
    <title>Google Developers</title>
    <link rel="stylesheet" type="text/css" href="/css/screen.css" />
    <link rel="stylesheet" href="//www.google.com/cse/style/look/default.css" type="text/css" />
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script id="jqueryui" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" defer async></script>
    <script src="//www.google.com/jsapi?key=AIzaSyCZfHRnq7tigC-COeQRmoa9Cxr0vbrK6xw"></script>
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <style type="text/css">


    #side-a {
	float: left;

}

    .float-left
{
  float: left;
}

.float-right
{
  float: right;
}

.wrapper
{
  width: 500px;
}

#example2-visualization{
  width:500px;
  float:left;
}

    </style>
  </head>
  <body class="docs framebox_body">

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load('visualization', '1.1', {packages: ['corechart']});

google.setOnLoadCallback(initialize);

function drawExample2() {
  // Some raw data (not necessarily accurate)
  var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                   'Rwanda'],
                  ['2004/05', 165, 938, 522, 998, 450],
                  ['2005/06', 135, 1120, 599, 1268, 288],
                  ['2006/07', 157, 1167, 587, 807, 397],
                  ['2007/08', 139, 1110, 615, 968, 215],
                  ['2008/09', 136, 691, 629, 1026, 366]];
  var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                   'Rwanda'],
                  ['2004/05', 122, 638, 722, 998, 450],
                  ['2005/06', 100, 1120, 899, 1268, 288],
                  ['2006/07', 183, 167, 487, 207, 397],
                  ['2007/08', 200, 510, 315, 1068, 215],
                  ['2008/09', 123, 491, 829, 826, 366]];

  // Create and populate the data tables.
  var data = [];
  data[0] = google.visualization.arrayToDataTable(rowData1);
  data[1] = google.visualization.arrayToDataTable(rowData2);

  var options = {
    width: 800,
    height: 600,
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    seriesType: "bars",
    series: {5: {type: "line"}},
    animation:{
      duration: 1000,
      easing: 'out'
    }
  };
  var current = 0;
  // Create and draw the visualization.
  var chart = new google.visualization.ColumnChart(document.getElementById('example2-visualization'));
  var button = document.getElementById('example2-b1');
  function drawChart() {
     // Disabling the button while the chart is drawing.
    button.disabled = true;
    google.visualization.events.addListener(chart, 'ready',
        function() {
          button.disabled = false;
          button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
        });
    options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';

    chart.draw(data[current], options);
  }
  drawChart();

  button.onclick = function() {
    current = 1 - current;
    drawChart();
  }
}

function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Shanghai', 3],
      ['Beijing', 1],
      ['Hong Kong', 1],
      ['Guangzhou', 1],
      ['Shenzhen', 2]
    ]);

    // Set chart options
    options = {'title':'Cities',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('pie_div'));
    chart.draw(data, options);
}


function draw(response) {
    if (response.isError()) {
      alert('Error in query');
    }

    var ticketsData = response.getDataTable();
    var chart = new google.visualization.ColumnChart(
        document.getElementById('chart_div'));
    chart.draw(ticketsData, {'isStacked': true, 'legend': 'bottom',
        'vAxis': {'title': 'Number of taxis'}});


    google.visualization.events.addListener(table, 'select',
        function() {
          map.setSelection(table.getSelection());
        });

    // Set a 'select' event listener for the map.
    // When the map is selected,
    // we set the selection on the table.
    google.visualization.events.addListener(map, 'select',
        function() {
          table.setSelection(map.getSelection());
        });
}


function initialize() {
	drawExample2();
	drawChart();

	var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheet/ccc?key=0AuehW_PIAYbKdEJ4bHJPNVZYTGRSQ2h5VVk4TTM1VUE');
query.send(draw);
}

</script>

<form><input id="example2-b1" type="button" value="Switch to Tea"></input></form>


	<div id="example2-visualization"  ></div>
<div id="pie_div" > </div>

<div id="chart_div" style="align: center; width: 800px; height: 600px;"></div>
</body>
</html>