Graph.html 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html oncontextmenu="return false" onmousewheel="return !event.shiftKey" onselectstart="return false" ondragover="return false">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  6. <title>CrystalDiskInfo</title>
  7. <!--[if lte IE 8 ]><script language="javascript" type="text/javascript" src="./flot/excanvas.min.js"></script><![endif]-->
  8. <script language="javascript" type="text/javascript" src="./flot/jquery.min.js"></script>
  9. <script language="javascript" type="text/javascript" src="./flot/jquery.flot.min.js"></script>
  10. <link id="StyleSheet" href="Graph.css" rel="stylesheet" type="text/css" />
  11. </head>
  12. <body onresize="changeSize();" oncontextmenu="return false" onmousewheel="return !event.shiftKey" onselectstart="return false" ondragover="return false">
  13. <div id="mainMenu">
  14. <ul id="menuBar">
  15. <li id="LiAllOn" class="allOnOff"></li>
  16. <li id="LiAllOff" class="allOnOff"></li>
  17. <li id="LiRefresh" class="allOnOff"></li>
  18. <li id="LiDisk0"><a href="#" id="Disk0"></a></li>
  19. <li id="LiDisk1"><a href="#" id="Disk1"></a></li>
  20. <li id="LiDisk2"><a href="#" id="Disk2"></a></li>
  21. <li id="LiDisk3"><a href="#" id="Disk3"></a></li>
  22. <li id="LiDisk4"><a href="#" id="Disk4"></a></li>
  23. <li id="LiDisk5"><a href="#" id="Disk5"></a></li>
  24. <li id="LiDisk6"><a href="#" id="Disk6"></a></li>
  25. <li id="LiDisk7"><a href="#" id="Disk7"></a></li>
  26. <li id="LiDisk8"><a href="#" id="Disk8"></a></li>
  27. <li id="LiDisk9"><a href="#" id="Disk9"></a></li>
  28. <li id="LiDisk10"><a href="#" id="Disk10"></a></li>
  29. <li id="LiDisk11"><a href="#" id="Disk11"></a></li>
  30. <li id="LiDisk12"><a href="#" id="Disk12"></a></li>
  31. <li id="LiDisk13"><a href="#" id="Disk13"></a></li>
  32. <li id="LiDisk14"><a href="#" id="Disk14"></a></li>
  33. <li id="LiDisk15"><a href="#" id="Disk15"></a></li>
  34. <li id="LiDisk16"><a href="#" id="Disk16"></a></li>
  35. <li id="LiDisk17"><a href="#" id="Disk17"></a></li>
  36. <li id="LiDisk18"><a href="#" id="Disk18"></a></li>
  37. <li id="LiDisk19"><a href="#" id="Disk19"></a></li>
  38. <li id="LiDisk20"><a href="#" id="Disk20"></a></li>
  39. <li id="LiDisk21"><a href="#" id="Disk21"></a></li>
  40. <li id="LiDisk22"><a href="#" id="Disk22"></a></li>
  41. <li id="LiDisk23"><a href="#" id="Disk23"></a></li>
  42. <li id="LiDisk24"><a href="#" id="Disk24"></a></li>
  43. <li id="LiDisk25"><a href="#" id="Disk25"></a></li>
  44. <li id="LiDisk26"><a href="#" id="Disk26"></a></li>
  45. <li id="LiDisk27"><a href="#" id="Disk27"></a></li>
  46. <li id="LiDisk28"><a href="#" id="Disk28"></a></li>
  47. <li id="LiDisk29"><a href="#" id="Disk29"></a></li>
  48. <li id="LiDisk30"><a href="#" id="Disk30"></a></li>
  49. <li id="LiDisk31"><a href="#" id="Disk31"></a></li>
  50. <li id="LiDisk32"><a href="#" id="Disk32"></a></li>
  51. <li id="LiDisk33"><a href="#" id="Disk33"></a></li>
  52. <li id="LiDisk34"><a href="#" id="Disk34"></a></li>
  53. <li id="LiDisk35"><a href="#" id="Disk35"></a></li>
  54. <li id="LiDisk36"><a href="#" id="Disk36"></a></li>
  55. <li id="LiDisk37"><a href="#" id="Disk37"></a></li>
  56. <li id="LiDisk38"><a href="#" id="Disk38"></a></li>
  57. <li id="LiDisk39"><a href="#" id="Disk39"></a></li>
  58. <li id="LiDisk40"><a href="#" id="Disk40"></a></li>
  59. <li id="LiDisk41"><a href="#" id="Disk41"></a></li>
  60. <li id="LiDisk42"><a href="#" id="Disk42"></a></li>
  61. <li id="LiDisk43"><a href="#" id="Disk43"></a></li>
  62. <li id="LiDisk44"><a href="#" id="Disk44"></a></li>
  63. <li id="LiDisk45"><a href="#" id="Disk45"></a></li>
  64. <li id="LiDisk46"><a href="#" id="Disk46"></a></li>
  65. <li id="LiDisk47"><a href="#" id="Disk47"></a></li>
  66. <li id="LiDisk48"><a href="#" id="Disk48"></a></li>
  67. <li id="LiDisk49"><a href="#" id="Disk49"></a></li>
  68. <li id="LiDisk50"><a href="#" id="Disk50"></a></li>
  69. <li id="LiDisk51"><a href="#" id="Disk51"></a></li>
  70. <li id="LiDisk52"><a href="#" id="Disk52"></a></li>
  71. <li id="LiDisk53"><a href="#" id="Disk53"></a></li>
  72. <li id="LiDisk54"><a href="#" id="Disk54"></a></li>
  73. <li id="LiDisk55"><a href="#" id="Disk55"></a></li>
  74. <li id="LiDisk56"><a href="#" id="Disk56"></a></li>
  75. <li id="LiDisk57"><a href="#" id="Disk57"></a></li>
  76. <li id="LiDisk58"><a href="#" id="Disk58"></a></li>
  77. <li id="LiDisk59"><a href="#" id="Disk59"></a></li>
  78. <li id="LiDisk60"><a href="#" id="Disk60"></a></li>
  79. <li id="LiDisk61"><a href="#" id="Disk61"></a></li>
  80. <li id="LiDisk62"><a href="#" id="Disk62"></a></li>
  81. <li id="LiDisk63"><a href="#" id="Disk63"></a></li>
  82. <li id="LiDisk64"><a href="#" id="Disk64"></a></li>
  83. </ul>
  84. <div id="select" style="margin-left: 10px;">
  85. <table>
  86. <tr>
  87. <td><a href="#" id="AllOn"></a></td>
  88. <td><a href="#" id="AllOff"></a></td>
  89. <td><a href="#" id="Reset"></a></td>
  90. <td>
  91. <select id="SelectAttributeId" title="Select Attribute ID" onchange="this.click()">
  92. <option value="261" selected="selected">Reallocated Sectors Count</option>
  93. </select>
  94. </td>
  95. </tr>
  96. </table>
  97. </div>
  98. <div id="placeholder" style="margin:20px;width:600px;height:340px;"></div>
  99. <div id="overview" style="margin-left:20px;margin-right:20px;width:600px;height:40px"></div>
  100. <script id="source" language="javascript" type="text/javascript">
  101. function changeBackgroundImage(x)
  102. {
  103. document.body.style.backgroundImage = x;
  104. }
  105. function updateData(x)
  106. {
  107. d = eval(x);
  108. }
  109. function updateMainViewOptions(x)
  110. {
  111. options = eval("(" + x + ")");
  112. }
  113. function updateOverViewOptions(x)
  114. {
  115. overViewOptions = eval("(" + x + ")");
  116. }
  117. function reDraw()
  118. {
  119. document.body.style.cursor = "wait";
  120. plot = $.plot($("#placeholder"), d, options);
  121. overview = $.plot($("#overview"), d, overViewOptions);
  122. document.body.style.cursor = "auto";
  123. }
  124. var d = [[]];
  125. var options = {};
  126. var overViewOptions = {};
  127. var plot;
  128. var overview;
  129. function changeSize()
  130. {
  131. var obj = document.getElementById("placeholder");
  132. if(obj)
  133. {
  134. obj.style.width = (document.documentElement.clientWidth - 40) + "px";
  135. obj.style.height = (document.documentElement.clientHeight - 150) + "px";
  136. }
  137. var obj = document.getElementById("overview");
  138. if(obj)
  139. {
  140. obj.style.width = (document.documentElement.clientWidth - 40) + "px";
  141. }
  142. plot = $.plot($("#placeholder"), d, options);
  143. overview = $.plot($("#overview"), d, overViewOptions);
  144. }
  145. // helper for returning the weekends in a period
  146. function weekendAreas(plotarea)
  147. {
  148. var areas = [];
  149. var d = new Date(plotarea.xmin);
  150. // go to the first Saturday
  151. d.setDate(d.getDate() - ((d.getDay() + 1) % 7))
  152. d.setSeconds(0);
  153. d.setMinutes(0);
  154. d.setHours(0);
  155. var i = d.getTime() - d.getTimezoneOffset() * 60 * 1000;
  156. do {
  157. // when we don't set y1 and y2 the rectangle
  158. // automatically extends to infinity in those directions
  159. areas.push({ x1: i, x2: i + 2 * 24 * 60 * 60 * 1000 });
  160. i += 7 * 24 * 60 * 60 * 1000;
  161. } while (i < plotarea.xmax);
  162. return areas;
  163. }
  164. // now connect the two
  165. var internalSelection = false;
  166. $("#placeholder").bind("selected", function (event, area) {
  167. // do the zooming
  168. plot = $.plot($("#placeholder"), d,
  169. $.extend(true, {}, options, {
  170. xaxis: { min: area.x1, max: area.x2 },
  171. yaxis: { min: area.y1, max: area.y2 }
  172. }));
  173. if (internalSelection)
  174. return; // prevent eternal loop
  175. internalSelection = true;
  176. overview.setSelection(area);
  177. internalSelection = false;
  178. });
  179. $("#overview").bind("selected", function (event, area) {
  180. if (internalSelection)
  181. return;
  182. internalSelection = true;
  183. plot.setSelection(area);
  184. internalSelection = false;
  185. });
  186. function showTooltip(x, y, contents) {
  187. var str = "" + contents;
  188. x = x - str.length * 6;
  189. $('<div id="tooltip">' + contents + '</div>').css( {
  190. position: 'absolute',
  191. display: 'none',
  192. top: y - 40,
  193. left: x,
  194. border: '1px solid #ddd',
  195. padding: '4px',
  196. 'background-color': '#eee',
  197. 'font-size': '20px',
  198. opacity: 0.90
  199. }).appendTo("body").fadeIn(200);
  200. }
  201. var previousPoint = null;
  202. $("#placeholder").bind("plothover", function (event, pos, item) {
  203. if (item) {
  204. if (previousPoint != item.datapoint) {
  205. previousPoint = item.datapoint;
  206. $("#tooltip").remove();
  207. var x = item.datapoint[0].toFixed(2),
  208. y = item.datapoint[1].toFixed(2);
  209. showTooltip(item.pageX, item.pageY, parseInt(y));
  210. }
  211. }
  212. else {
  213. $("#tooltip").remove();
  214. previousPoint = null;
  215. }
  216. });
  217. </script>
  218. <div id="complete"></div>
  219. </body>
  220. </html>