运用googleapi做图（折线图 饼图）

 <script type='text/javascript' src='http://www.google.cn/jsapi'></script>  
    <script type='text/javascript'>
      google.load('visualization', '1', {'packages':['annotatedtimeline','corechart']});
      google.setOnLoadCallback(drawChart);
   
   function drawChart() {

       //开始画总TimeLine
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
        data.addColumn('number', 'FREQUNCY');
        data.addColumn('string', 'title');
  data.addRows([
          [new Date(2012,10,28,18,0,0), 120, '山东科技大学，王春秋'],
          [new Date(2012,10,28,19,30,0), 250, '山东科技大学，运动会'],
          [new Date(2012,10,28,20,0,0), 400, '山东科技大学，山科大，考研'],
          [new Date(2012,10,28,20,30,0), 288, '山东科技大学，山科，宿舍'],
          [new Date(2012,10,28,22,0,0), 300, '山东科技大学，钓鱼岛'],
          [new Date(2012,10,28,23,0,0), 150, 'undefined , null']
        ]);

  var options={ //注意不是option，可能是个类名
   displayAnnotations:true, 
            displayAnnotationsFilter:true
  };

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data,options);

  //开始画分类表 chart_detail
        var data_detail = new google.visualization.DataTable();
      
  data_detail.addColumn('datetime', 'Date'); //此处必须指定为datetime类型，否则精确到天
        data_detail.addColumn('number','HAHA');
      data_detail.addColumn('number','SHIT');

  data_detail.addRows([
          [new Date(2012,10,28,18,0,0),  50,    70],      
    [new Date(2012,10,28,19,30,0), 100,  150],  
          [new Date(2012,10,28,20,0,0),  220,  180],  
          [new Date(2012,10,28,20,30,0), 188,  100],  
          [new Date(2012,10,28,22,0,0),  120,  180],  
          [new Date(2012,10,28,23,0,0),  50,   100]    
        ]);

  var options_detail={ //注意不是option，可能是个类名
   colors:['orange','blue'],
   displayRangeSelector:false,
   displayZoomButtons:false,
            thickness:3
  };

        var chart_detail= new google.visualization.AnnotatedTimeLine(document.getElementById('chart_detail_div'));
        chart_detail.draw(data_detail,options_detail);
       
        //开始画PieChart（没有问题）
        var data_pie= google.visualization.arrayToDataTable([
          ['Emotions', 'Count'],
          ['YEAR~~~~!!',   24],
          ['OH~~NO~!!',   36],
          ['WHATEVER~',   40]
        ]);

        var options_pie = {
          title: '情感分析图',
    is3D:true
        };

        var piechart = new google.visualization.PieChart(document.getElementById('pie_div'));
        piechart.draw(data_pie, options_pie);
       
  //添加事件实现联动效果
  google.visualization.events.addListener(chart,'rangechange',function(){
   chart_detail.setVisibleChartRange(chart.getVisibleChartRange().start,chart.getVisibleChartRange().end);
  });

  //下边动，上边也动
  google.visualization.events.addListener(chart_detail,'rangechange',function(){
   chart.setVisibleChartRange(chart_detail.getVisibleChartRange().start,chart_detail.getVisibleChartRange().end);
  });  
      }
    </script>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","/ajax/demo_post.asp",true);
xmlhttp.send();
}
</script>

//调用的时候只要保证把相应的id写到相应的位置就可以了