Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <title>Yet another league of legends lag analyser</title>
- <meta charset="UTF-8">
- <script src="Chart.min.js"></script>
- <script src="jquery.min.js"></script>
- <script src="core.js"></script>
- <script src="upload.js"></script>
- <link href="upload.css" rel="stylesheet">
- </head>
- <body bgcolor="#90C3D4">
- <div id="container">
- <div id="top" style="height: 40%;">
- <h1 align="center">Yet another league of legends lag analyser</h1>
- <div id="my-dropzone" class="dropzone"
- style="position: relative; float: left; width: 70%; height: 100%; left: 10%; border-style: dashed;">
- </div>
- <div id="right box" align="right"
- style="position: relative; float: left; left: 10%; height: 100%;">
- <form>
- <select id="opcje">
- </select> <br>
- </form>
- <button id="sendbutt">Wyświetl</button>
- </div>
- </div>
- <div class="canvas-holder" style="padding:20px;">
- <canvas id="wykres" style="width: 100%; height:680px;"></canvas>
- </div>
- </div>
- </body>
- <script type="text/javascript">
- //pobranie listy istniejących plików na serwerze przy startowaniu strony
- $(".dropzone").upload({
- action: "Wykres",
- paramName: "file"
- }).on("complete.upload", onFileComplete(file));
- var myChart = null;
- function onFileComplete(name) {
- if (myChart!=null) {
- myChart.destroy();
- };
- $.ajax({
- type: "GET",
- url: "Wykres",
- data: {
- Name : name
- },
- //funkcja wyświetlająca wykres
- success: function (data) {
- var data1 = {
- labels: data['time'],
- datasets: [
- {
- fillColor: "rgba(120,120,120,0.2)",
- strokeColor: "rgba(220,220,220,1)",
- pointColor: "rgba(000,000,000,1)",
- pointStrokeColor: "#000",
- pointHighlightFill: "#000",
- pointHighlightStroke: "rgba(220,220,120,1)",
- data: data['ping']
- }
- ]
- };
- var ctx = document.getElementById("wykres").getContext("2d");
- var options = {
- pointDot : false,
- pointHitDetectionRadius : 0,
- };
- myChart = window.myPie = new Chart(ctx).Line(data1,options);
- }
- });
- }
- window.onload = function(){
- $.ajax({
- type: "GET",
- url: "Wykres",
- data: {
- Name : "lista"
- },
- success: function (data) {
- for (i=0;i<data['lista'].length;i++) {
- $('#opcje').append('<option value=' + data['lista'][i] + '>' + data['lista'][i] + '</option>');
- }
- }
- });
- };
- $(document).on("click","#sendbutt", function(){ // funkcja wysyłając plik na serwer
- if (myChart!=null) {
- myChart.destroy();
- };
- $.ajax({
- type: "GET",
- url: "Wykres",
- data: {
- Name : $( "#opcje option:selected" ).text()
- },
- //funkcja wyświetlająca wykres
- success: function (data) {
- var data1 = {
- labels: data['time'],
- datasets: [
- {
- fillColor: "rgba(120,120,120,0.2)",
- strokeColor: "rgba(220,220,220,1)",
- pointColor: "rgba(000,000,000,1)",
- pointStrokeColor: "#000",
- pointHighlightFill: "#000",
- pointHighlightStroke: "rgba(220,220,120,1)",
- data: data['ping']
- }
- ]
- };
- var ctx = document.getElementById("wykres").getContext("2d");
- var options = {
- pointDot : false,
- pointHitDetectionRadius : 0,
- };
- myChart = window.myPie = new Chart(ctx).Line(data1,options);
- }
- });
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement