1 <!DOCTYPE html>2 <html>3 <head>4 <meta http-equiv="Content-Type" CONTENT="text/html; charset=UTF-8">5 <title>Checkeon Latency Service</title>6 </head>7 <body>8 9 <style type="text/css">10 11 body {12 font-family: sans-serif;13 }14 15 #form {16 text-align: center;17 }18 19 #form #name {20 min-width: 100px;21 }22 </style>23 24 <div id="form">25 <label>26 Name:27 <select id="name" onchange="name_change(this)">28 <option value=""></option>29 <option value="A">A</option>30 <option value="B">B</option>31 </select>32 </label>33 </div>34 <div id="chart"></div>35 36 <script type="text/javascript" src="https://www.google.com/jsapi"></script>37 38 <script type="text/javascript">39 google.load('visualization', '1.1', {'packages':['corechart', 'annotatedtimeline', 'bar']});40 41 </script>42 43 <script type="text/javascript">44 45 var base_url = 'http://2015091701-frsela.checkeon.appspot.com/latency';46 47 function ajax_get(url, callback_load) {48 var xhr = new XMLHttpRequest();49 xhr.open("GET",url,true);50 xhr.addEventListener('load', callback_load);51 return xhr;52 }53 54 function load_results() {55 var url = base_url + '/results?format=json;start=80000&end=1442482499&probe=default';56 57 // url = '/borrar/demo';58 59 var xhr = ajax_get(url, function results_callback() {60 var data = JSON.parse(xhr.responseText);61 console.log(data);62 });63 64 xhr.send();65 }66 67 68 69 70 var chart = new google.visualization.AreaChart(document.getElementById('chart'));71 72 var options = {73 hAxis: {title: 'Time', titleTextStyle: {color: '#333'}},74 vAxis: {title: 'Latency', titleTextStyle: {color: '#333'}},75 isStacked: false,76 explorer: {77 keepInBounds: true,78 axis: 'horizontal',79 actions: ['dragToPan', 'scrollToZoom', 'rightClickToReset'],80 },81 width: '100%',82 height: 300,83 chartArea:{84 left: 'auto',85 width: '80%',86 top: 'auto',87 height: '60%',88 },89 legend: {90 alignment: 'center',91 position: 'in',92 },93 };94 95 96 97 98 function name_change(dom) {99 var name = dom.children.item(dom.selectedIndex).getAttribute('value');100 101 load_results({probe:name});102 103 if ('A' == name) {104 set_data([105 ['Year', 'A'],106 [new Date('2013'), 1000],107 [new Date('2014'), 1170],108 [new Date('2015'), 660],109 [new Date('2016'), 1030]110 ]);111 } else if ('B' == name) {112 set_data([113 ['Year', 'B'],114 [new Date('2013'), 400],115 [new Date('2014'), 460],116 [new Date('2015'), 1120],117 [new Date('2016'), 540]118 ]);119 } else {120 set_data([121 ['Year', 'A', 'B'],122 [new Date('2013'), 1000, 400],123 [new Date('2014'), 1170, 460],124 [new Date('2015'), 660, 1120],125 [new Date('2016'), 1030, 540]126 ]);127 }128 }129 130 function set_data(data) {131 var table = new google.visualization.arrayToDataTable(data);132 chart.draw(table, options);133 }134 135 136 137 138 139 140 </script>141 142 </body>143 </html>144 Enlace
El enlace para compartir es: