<html> <style> * {font-family:Arial} div {float: left; margin: 0 0 0 0; } </style> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>NetData Datasource Example</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['charteditor']}); // google.load('visualization', '1.0'); // Note: No need to specify chart libraries. google.setOnLoadCallback(drawVisualization); var wrapper; function drawVisualization() { wrapper = new google.visualization.ChartWrapper({ containerId: 'graph_div', chartType: 'AreaChart', dataSourceUrl: 'http:/datasource/system.cpu/60/1/max', // it needs a protocol to work, even in relative URLs refreshInterval: 1, options: { isStacked: true, areaOpacity: 0.85, lineWidth: 1, title: 'CPU utilization', width: window.innerWidth - 50, height: window.innerHeight - 50, hAxis: {title: "Time of Day", viewWindowMode: 'maximized', format:'HH:mm:ss'}, vAxis: {title: "percent", viewWindowMode: 'pretty', minValue: 0, maxValue: 100}, focusTarget: 'category', annotation: {'1': {style: 'line'}}, }, }); wrapper.draw(); } function openEditor() { var editor = new google.visualization.ChartEditor(); google.visualization.events.addListener(editor, 'ok', function() { wrapper = editor.getChartWrapper(); wrapper.draw(document.getElementById('graph_div')); }); editor.openDialog(wrapper); } </script> </head> <body> <input type='button' onclick='openEditor()' value='Open Editor'> <br/> <div><div id="graph_div"/></div> </body> </html>