sample_main.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <link rel="stylesheet" href="sample.css" />
  7. <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  8. <script type='text/javascript'>
  9. google.load('visualization', '1', {packages:['gauge']});
  10. google.setOnLoadCallback(drawAllCharts);
  11. var hitOptions = {
  12. width: 150, height: 150,
  13. greenFrom: 80, greenTo: 100,
  14. yellowFrom: 50, yellowTo: 80,
  15. redFrom: 0, redTo: 20,
  16. majorTicks: ['00', 20, 40, 60, 80, 100],
  17. minorTicks: 4};
  18. var useOptions = {
  19. width: 150, height: 150,
  20. greenFrom: 50, greenTo: 80,
  21. yellowFrom: 80, yellowTo: 95,
  22. redFrom: 95, redTo: 100,
  23. majorTicks: ['00', 20, 40, 60, 80, 100],
  24. minorTicks: 4};
  25. function randomInt() {
  26. x = Math.random() * 101.0 - 0.5; // Give equal likelihood to 0 and 100
  27. return Math.round(x);
  28. }
  29. function drawChart(index, col) {
  30. var data = new google.visualization.DataTable();
  31. data.addRows(1);
  32. data.addColumn('number', col +'%');
  33. data.setValue(0, 0, randomInt());
  34. id = 'main-server' + index + '-' + col;
  35. var chart = new google.visualization.Gauge(document.getElementById(id));
  36. optionsName = col + 'Options';
  37. chart.draw(data, window[optionsName]);
  38. }
  39. function drawAllCharts() {
  40. for (i = 1 ; i <= 4 ; i++) {
  41. drawChart(i, 'use');
  42. drawChart(i, 'hit');
  43. }
  44. }
  45. </script>
  46. </head>
  47. <body>
  48. <div id="header">
  49. <h1><a href="http://php.net/memcached">Memcache</a></h1>
  50. </div>
  51. <table id="mainServers" border="5px"'>
  52. <thead>
  53. <col align="center" />
  54. <col align="center" />
  55. <col />
  56. <col align="right" />
  57. <col id="mainUse" />
  58. <col id="mainHit" />
  59. <col />
  60. </thead>
  61. <tbody>
  62. <tr class="headerRow">
  63. <th>Host</th>
  64. <th>Version</th>
  65. <th>Start/Uptime</th>
  66. <th>Size</th>
  67. <th>Use%</th>
  68. <th>Hit%</th>
  69. <th>Operations</th>
  70. </tr>
  71. <tr class="serverRow">
  72. <td>127.0.0.1:11211</td>
  73. <td>1.4.5</td>
  74. <td>2011-10-05 14:58:00<br />1 hour and 5 minutes</td>
  75. <td>64 MiB</td>
  76. <td><div id="main-server1-use" class="server-use"></div></td>
  77. <td><div id="main-server1-hit"></div></td>
  78. <td><a href="flush">Flush</a></td>
  79. </tr>
  80. <tr class="serverRow">
  81. <td>127.0.0.1:11212</td>
  82. <td>1.4.5</td>
  83. <td>2011-10-05 14:58:00<br />1 hour and 5 minutes</td>
  84. <td>64 MiB</td>
  85. <td><div id="main-server2-use" class="server-use"></div></td>
  86. <td><div id="main-server2-hit"></div></td>
  87. <td><a href="flush">Flush</a></td>
  88. </tr>
  89. <tr class="serverRow">
  90. <td>127.0.0.1:11213</td>
  91. <td>1.4.5</td>
  92. <td>2011-10-05 14:58:00<br />1 hour and 5 minutes</td>
  93. <td>1 GiB</td>
  94. <td><div id="main-server3-use" class="server-use"></div></td>
  95. <td><div id="main-server3-hit"></div></td>
  96. <td><a href="flush">Flush</a></td>
  97. </tr>
  98. <tr class="serverRow">
  99. <td>127.0.0.1:11214</td>
  100. <td>1.4.5</td>
  101. <td>2011-10-05 14:58:00<br />1 hour and 5 minutes</td>
  102. <td>256 MiB</td>
  103. <td><div id="main-server4-use" class="server-use"></div></td>
  104. <td><div id="main-server4-hit"></div></td>
  105. <td><a href="flush">Flush</a></td>
  106. </tr>
  107. </tbody>
  108. </table>
  109. </body>
  110. </html>