web/old/datasource.html

   1 <html>
   2         <style>
   3                 * {font-family:Arial}
   4                 div {float: left; margin: 0 0 0 0; }
   5         </style>
   6         <head>
   7         <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   8         <title>NetData Datasource Example</title>
   9         <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  10         <script type="text/javascript">
  11
  12         google.load('visualization', '1', {packages: ['charteditor']});
  13         // google.load('visualization', '1.0');  // Note: No need to specify chart libraries.
  14
  15         google.setOnLoadCallback(drawVisualization);
  16
  17         var wrapper;
  18         function drawVisualization() {
  19                 wrapper = new google.visualization.ChartWrapper({
  20                         containerId: 'graph_div',
  21                         chartType: 'AreaChart',
  22                         dataSourceUrl: 'http:/datasource/system.cpu/60/1/max', // it needs a protocol to work, even in relative URLs
  23                         refreshInterval: 1,
  24                         options: {
  25                                 isStacked: true,
  26                                 areaOpacity: 0.85,
  27                                 lineWidth: 1,
  28                                 title: 'CPU utilization',
  29                                 width: window.innerWidth - 50,
  30                                 height: window.innerHeight - 50,
  31                                 hAxis: {title: "Time of Day", viewWindowMode: 'maximized', format:'HH:mm:ss'},
  32                                 vAxis: {title: "percent", viewWindowMode: 'pretty', minValue: 0, maxValue: 100},
  33                                 focusTarget: 'category',
  34                                 annotation: {'1': {style: 'line'}},
  35                         },
  36                 });
  37                 wrapper.draw();
  38         }
  39
  40         function openEditor() {
  41                 var editor = new google.visualization.ChartEditor();
  42                 google.visualization.events.addListener(editor, 'ok', function() {
  43                         wrapper = editor.getChartWrapper();
  44                         wrapper.draw(document.getElementById('graph_div'));
  45                 });
  46                 editor.openDialog(wrapper);
  47         }
  48
  49         </script>
  50         </head>
  51         <body>
  52                 <input type='button' onclick='openEditor()' value='Open Editor'>
  53                 <br/>
  54                 <div><div id="graph_div"/></div>
  55         </body>
  56 </html>