人気ページ

<!DOCTYPE html> <html lang="ja">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
   integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 <title>chart</title>
 <style>
   #chart_div {
     margin: 0;
     height: 100%;
     min-height: 38em;
     overflow: hidden;
   }

   #chart_div .tab {
     margin: 0;
     padding: 0;
     display: block;
     overflow: hidden;
   }

   #chart_div .tab li {
     display: block;
     float: left;
     width: 50%;
     text-align: center;
     background-color: #aca6e4;
   }

   #chart_div .tab a {
     color: white;
   }

   #chart_div .tab a.selected {
     font-weight: bold;
     cursor: text;
   }

   #chart_div .tab a.selected:hover {
     text-decoration: none;
   }

   #chart_div table {
     width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
     margin: 1rem 0;
   }

   #chart_div .time {
     width: 3rem;
   }

   #chart_div .pageview {
     width: 2.5rem;
   }

   #chart_div td.time {
     text-align: right;
     font-size: 0.8rem;
   }

   #chart_div td.pageview {
     text-align: right;
     font-size: 0.8rem;
   }

   #chart_div td.page {
     text-overflow: ellipsis;
     max-width: 0;
     overflow: hidden;
     white-space: nowrap;
   }

   #chart_div th,
   #chart_div td {
     border: 1px solid #ddd;
   }

   #chart_div th.selectable {
     cursor: pointer;
   }

   #chart_div th.selected {
     background-image: url("/resources/src/jquery.tablesorter.styles/images/sort_down.png");
     cursor: auto;
     background-repeat: no-repeat;
     background-position: center right 0.2rem;
   }
 </style>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">
   var period = "daily",
     orderBy = "time";
   prepareChart();
   function prepareChart() {
     var sheetName =
       period +
       " " +
       (orderBy == "time" ? "longest time spent" : "most viewed");
     var url =
       "https://docs.google.com/spreadsheets/d/1niIGejZ1Czrkj07hGDPleVvk9AEBaDtjr55n63GluLw/gviz/tq?sheet=" +
       sheetName +
       "&headers=15";

     google.charts.load("current", { packages: ["corechart"] });
     google.charts.setOnLoadCallback(drawChart);

     function drawChart() {
       var query = new google.visualization.Query(url);
       query.send(handleQueryResponse);
     }

     function handleQueryResponse(response) {
       var data = response.getDataTable();
       var rows = data.getNumberOfRows();
       var html = [

'

<a id="hourly" class="' + (period == "hourly" ? "selected" : "") + '" href="javascript: void(0);">リアルタイム</a>
<a id="daily" class="' + (period == "daily" ? "selected" : "") + '" href="javascript: void(0);">一日</a>

" + "

<thead>" + '' + '' + "" + "</thead><tbody>" ]; for (var i = 0; i < rows; i++) { try { var title = data.getValue(i, 0).replace(" - 宇宙wiki", ""); var time = Math.round(data.getValue(i, 1) / 60) + "分"; var pageview = data.getValue(i, 2); var url = "/w/" + encodeTitle(title); var anchor = '<a href="' + url + '" target="_parent" title="' + title + '">' + title + "</a>"; html.push( "" + '" + '" + '" + "" ); } catch (e) { console.log([i, e]); } } html.push("</tbody>

時間	PV	ページ
' + time + "	' + pageview + "	' + anchor + "

");

       document.querySelector("#chart_div").innerHTML = html.join("\n");

       document
         .getElementById("hourly")
         .addEventListener("click", function () {
           if (period == "hourly") return;
           period = "hourly";
           prepareChart();
         });
       document
         .getElementById("daily")
         .addEventListener("click", function () {
           if (period == "daily") return;
           period = "daily";
           prepareChart();
         });
       document
         .getElementById("header-time")
         .addEventListener("click", function () {
           if (orderBy == "time") return;
           orderBy = "time";
           prepareChart();
         });
       document
         .getElementById("header-pageview")
         .addEventListener("click", function () {
           if (orderBy == "pageview") return;
           orderBy = "pageview";
           prepareChart();
         });
     }
   }

   function encodeTitle(title) {
     return title
       .split("/")
       .map(function (path) {
         return encodeURIComponent(path);
       })
       .join("/");
   }
 </script>

</head>

<body>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
   integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
   crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
   integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
   crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
   integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
   crossorigin="anonymous"></script>

</body>

</html>

その他のツール

Widget:人気ページ