example google datasource with netdata - the simplest way to show a netdata chart
Costa Tsaousis (ktsaou) committed
Apr 17, 2014 at 23:28 UTC
6f3b9a901eb6cdc5e6d1d24b0578812a1a79d585
1 file changed
+56
web/datasource.html
new
+56
@@ -0,0 +1,56 @@
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: 'dsl0',
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>