Advertisement
Zeppe666

Untitled

Nov 30th, 2015
63
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.57 KB | None | 0 0
  1.  
  2. <!doctype html>
  3. <html>
  4. <head>
  5. <title>Yet another league of legends lag analyser</title>
  6. <meta charset="UTF-8">
  7. <script src="Chart.min.js"></script>
  8. <script src="jquery.min.js"></script>
  9. <script src="core.js"></script>
  10. <script src="upload.js"></script>
  11. <link href="upload.css" rel="stylesheet">
  12. </head>
  13. <body bgcolor="#90C3D4">
  14. <div id="container">
  15. <div id="top" style="height: 40%;">
  16. <h1 align="center">Yet another league of legends lag analyser</h1>
  17. <div id="my-dropzone" class="dropzone"
  18. style="position: relative; float: left; width: 70%; height: 100%; left: 10%; border-style: dashed;">
  19. </div>
  20. <div id="right box" align="right"
  21. style="position: relative; float: left; left: 10%; height: 100%;">
  22. <form>
  23. <select id="opcje">
  24. </select> <br>
  25. </form>
  26. <button id="sendbutt">Wyświetl</button>
  27. </div>
  28. </div>
  29. <div class="canvas-holder" style="padding:20px;">
  30. <canvas id="wykres" style="width: 100%; height:680px;"></canvas>
  31. </div>
  32. </div>
  33. </body>
  34. <script type="text/javascript">
  35. //pobranie listy istniejących plików na serwerze przy startowaniu strony
  36.  
  37.  
  38. $(".dropzone").upload({
  39. action: "Wykres",
  40. paramName: "file"
  41. }).on("complete.upload", onFileComplete(file));
  42. var myChart = null;
  43. function onFileComplete(name) {
  44. if (myChart!=null) {
  45. myChart.destroy();
  46. };
  47.  
  48. $.ajax({
  49. type: "GET",
  50. url: "Wykres",
  51. data: {
  52. Name : name
  53. },
  54. //funkcja wyświetlająca wykres
  55. success: function (data) {
  56. var data1 = {
  57. labels: data['time'],
  58. datasets: [
  59. {
  60. fillColor: "rgba(120,120,120,0.2)",
  61. strokeColor: "rgba(220,220,220,1)",
  62. pointColor: "rgba(000,000,000,1)",
  63. pointStrokeColor: "#000",
  64. pointHighlightFill: "#000",
  65. pointHighlightStroke: "rgba(220,220,120,1)",
  66. data: data['ping']
  67. }
  68. ]
  69. };
  70. var ctx = document.getElementById("wykres").getContext("2d");
  71. var options = {
  72. pointDot : false,
  73. pointHitDetectionRadius : 0,
  74. };
  75. myChart = window.myPie = new Chart(ctx).Line(data1,options);
  76. }
  77. });
  78. }
  79.  
  80.  
  81. window.onload = function(){
  82. $.ajax({
  83. type: "GET",
  84. url: "Wykres",
  85. data: {
  86. Name : "lista"
  87. },
  88. success: function (data) {
  89. for (i=0;i<data['lista'].length;i++) {
  90. $('#opcje').append('<option value=' + data['lista'][i] + '>' + data['lista'][i] + '</option>');
  91. }
  92. }
  93. });
  94. };
  95.  
  96. $(document).on("click","#sendbutt", function(){ // funkcja wysyłając plik na serwer
  97. if (myChart!=null) {
  98. myChart.destroy();
  99. };
  100. $.ajax({
  101. type: "GET",
  102. url: "Wykres",
  103. data: {
  104. Name : $( "#opcje option:selected" ).text()
  105. },
  106. //funkcja wyświetlająca wykres
  107. success: function (data) {
  108.  
  109. var data1 = {
  110. labels: data['time'],
  111. datasets: [
  112. {
  113. fillColor: "rgba(120,120,120,0.2)",
  114. strokeColor: "rgba(220,220,220,1)",
  115. pointColor: "rgba(000,000,000,1)",
  116. pointStrokeColor: "#000",
  117. pointHighlightFill: "#000",
  118. pointHighlightStroke: "rgba(220,220,120,1)",
  119. data: data['ping']
  120. }
  121. ]
  122. };
  123. var ctx = document.getElementById("wykres").getContext("2d");
  124. var options = {
  125. pointDot : false,
  126. pointHitDetectionRadius : 0,
  127. };
  128. myChart = window.myPie = new Chart(ctx).Line(data1,options);
  129. }
  130. });
  131. });
  132. </script>
  133. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement