Nuestro conocimiento compartido. Nuestro tesoro compartido. Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

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: