5-3 /templates/phone_book_chart_b3.html

<{$toolbar}>
<h1>統計圖表</h1>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
</script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">圓派圖</a></li>
    <li><a href="#tabs-2">長條圖</a></li>
    <li><a href="#tabs-3">統計圖</a></li>
  </ul>

  <div id="tabs-1">
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['分類', '人數'],
          <{$pie_data}>
        ]);

        var options = {
          title: '各分類的人數統計',
          is3D:true,
          slices: {0: {offset: 0.1}, 3: {offset: 0.5}}
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        //新增點擊就連結的函數
        // function selectHandler() {
        //   var selectedItem = chart.getSelection()[0];
        //   if (selectedItem) {
        //     var topping = data.getValue(selectedItem.row, 0);
        //     location.href="index.php?cate_sn="+topping;
        //   }
        // }
        //新增傾聽事件
        // google.visualization.events.addListener(chart, 'select', selectHandler);

        chart.draw(data, options);
      }
    </script>

    <h3>圓派圖</h3>
    <div id="piechart" style="width: 100%; height: 500px;"></div>
  </div>


  <div id="tabs-2">
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['分類', '人數'],
          <{$pie_data}>
        ]);

        var options = {
          title: '各分類的人數統計'
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('ColumnChart'));

        //新增點擊就連結的函數
        // function selectHandler() {
        //   var selectedItem = chart.getSelection()[0];
        //   if (selectedItem) {
        //     var topping = data.getValue(selectedItem.row, 0);
        //     location.href="index.php?cate_sn="+topping;
        //   }
        // }
        //新增傾聽事件
        // google.visualization.events.addListener(chart, 'select', selectHandler);

        chart.draw(data, options);
      }
    </script>
    <h3>長條圖</h3>
    <div id="ColumnChart" style="width: 100%; height: 500px;"></div>
  </div>


  <div id="tabs-3">
    <h3>折線圖</h3>
  </div>
</div>