]> arthur.barton.de Git - netdata.git/blobdiff - web/demo2.html
ab-debian 0.20170327.01-0ab1, upstream v1.6.0-42-gaa6b96fc
[netdata.git] / web / demo2.html
old mode 100755 (executable)
new mode 100644 (file)
index 7a8d75a..630b90a
-<!DOCTYPE html>\r
-<html lang="en">\r
-<head>\r
-       <title>NetData Dashboard</title>\r
-\r
-       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
-       <meta charset="utf-8">\r
-       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\r
-       <meta name="viewport" content="width=device-width, initial-scale=1">\r
-       <meta name="apple-mobile-web-app-capable" content="yes">\r
-       <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">\r
-       <meta name="author" content="costa@tsaousis.gr">\r
-\r
-       <script>var netdataTheme = 'slate';</script>\r
-       <script type="text/javascript" src="dashboard.js"></script>\r
-</head>\r
-<body>\r
-\r
-<div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">\r
-       <div style="font-size: 7vw;">why netdata?</div>\r
-       <br/>\r
-       <div style="font-size: 2vw; color: white;">These charts visualize the same data...</div>\r
-\r
-\r
-       <!-- Nav tabs -->\r
-       <ul class="nav nav-tabs" role="tablist">\r
-               <li role="presentation" class="active"><a href="#gauge" aria-controls="gauge" role="tab" data-toggle="tab">Gauge.js</a></li>\r
-               <li role="presentation"><a href="#easypiechart" aria-controls="easypiechart" role="tab" data-toggle="tab">Easy Pie Chart</a></li>\r
-       </ul>\r
-\r
-       <!-- Tab panes -->\r
-       <div class="tab-content">\r
-               <div role="tabpanel" class="tab-pane active" id="gauge">\r
-\r
-                       <div style="display: inline-block; width: 35.8%">\r
-                               <div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>\r
-                               <br/>\r
-                               <div data-netdata="example.random2"\r
-                                               data-dimensions="random"\r
-                                               data-chart-library="gauge"\r
-                                               data-gauge-max-value="32767"\r
-                                               data-width="100%"\r
-                                               data-after="-600"\r
-                                               data-points="600"\r
-                                               data-title="1/second (netdata&nbsp;default)"\r
-                                               data-units="important metric"\r
-                                               data-colors="#5A5"\r
-                                               ></div>\r
-                       </div>\r
-                       <div style="display: inline-block; width: 50%">\r
-                               <div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>\r
-                               <div data-netdata="example.random2"\r
-                                               data-dimensions="random"\r
-                                               data-chart-library="gauge"\r
-                                               data-gauge-max-value="32767"\r
-                                               data-width="45%"\r
-                                               data-after="-600"\r
-                                               data-points="40"\r
-                                               data-title="Updates Every 15&nbsp;Sec"\r
-                                               data-units="important metric"\r
-                                               data-colors="#C55"\r
-                                               ></div>\r
-                               <div data-netdata="example.random2"\r
-                                               data-dimensions="random"\r
-                                               data-chart-library="gauge"\r
-                                               data-gauge-max-value="32767"\r
-                                               data-width="45%"\r
-                                               data-after="-600"\r
-                                               data-points="2"\r
-                                               data-title="Updates Every 5&nbsp;Mins"\r
-                                               data-units="important metric"\r
-                                               data-colors="#C55"\r
-                                               ></div>\r
-                       </div>\r
-               </div>\r
-               <div role="tabpanel" class="tab-pane" id="easypiechart">\r
-\r
-                       <div style="display: inline-block; width: 25%">\r
-                               <div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>\r
-                               <br/>\r
-                               <div data-netdata="example.random2"\r
-                                               data-dimensions="random"\r
-                                               data-chart-library="easypiechart"\r
-                                               data-easypiechart-max-value="32767"\r
-                                               data-width="100%"\r
-                                               data-after="-600"\r
-                                               data-points="600"\r
-                                               data-title="1/second (netdata&nbsp;default)"\r
-                                               data-units="important metric"\r
-                                               data-colors="#5A5"\r
-                                               ></div>\r
-                       </div>\r
-                       <div style="display: inline-block; width: 40%">\r
-                               <div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>\r
-                               <div data-netdata="example.random2"\r
-                                               data-dimensions="random"\r
-                                               data-chart-library="easypiechart"\r
-                                               data-easypiechart-max-value="32767"\r
-                                               data-width="45%"\r
-                                               data-after="-600"\r
-                                               data-points="40"\r
-                                               data-title="Updates Every 15&nbsp;Sec&nbsp;(<a href='https://github.com/OpenTSDB/opentsdb.net/blob/gh-pages/docs/source/user_guide/utilities/tcollector.rst#collecting-lots-of-metrics-with-tcollector' target='_blank'>OpenTSDB</a>)"\r
-                                               data-units="important metric"\r
-                                               data-colors="#C55"\r
-                                               ></div>\r
-                               <div data-netdata="example.random2"\r
-                                               data-dimensions="random"\r
-                                               data-chart-library="easypiechart"\r
-                                               data-easypiechart-max-value="32767"\r
-                                               data-width="45%"\r
-                                               data-after="-600"\r
-                                               data-points="2"\r
-                                               data-title="Updates Every 5&nbsp;Mins&nbsp;(your&nbsp;NMS)"\r
-                                               data-units="important metric"\r
-                                               data-colors="#C55"\r
-                                               ></div>\r
-                       </div>\r
-               </div>\r
-       </div>\r
-       <div style="font-size: 1.5vw;">Hover on the chart below, to see the selected value on the charts above!</div>\r
-       <div data-netdata="example.random2"\r
-                       data-dimensions="random"\r
-                       data-dygraph-theme="sparkline"\r
-                       data-width="100%"\r
-                       data-height="20vh"\r
-                       data-after="-600"\r
-                       data-points="600"\r
-                       data-title="1/second (netdata&nbsp;default)"\r
-                       data-units="something"\r
-                       data-colors="#888"\r
-                       ></div>\r
-</div>\r
-</body>\r
-</html>\r
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>NetData Dashboard</title>
+    <meta name="application-name" content="netdata">
+
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="author" content="costa@tsaousis.gr">
+
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:image" content="https://cloud.githubusercontent.com/assets/2662304/22945737/e98cd0c6-f2fd-11e6-96f1-5501934b0955.png"/>
+    <meta property="og:url" content="http://my-netdata.io/"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:site_name" content="netdata"/>
+    <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
+    <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
+</head>
+<script>var netdataTheme = 'slate';</script>
+<script type="text/javascript" src="http://my-netdata.io/dashboard.js?v20170105-7"></script>
+<body>
+
+<div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">
+    <div style="font-size: 7vw;">why netdata?</div>
+    <br/>
+    <div style="font-size: 2vw; color: white;">These charts visualize the same data...</div>
+
+
+    <!-- Nav tabs -->
+    <ul class="nav nav-tabs" role="tablist">
+        <li role="presentation" class="active"><a href="#gauge" aria-controls="gauge" role="tab" data-toggle="tab">Gauge.js</a></li>
+        <li role="presentation"><a href="#easypiechart" aria-controls="easypiechart" role="tab" data-toggle="tab">Easy Pie Chart</a></li>
+    </ul>
+
+    <!-- Tab panes -->
+    <div class="tab-content">
+        <div role="tabpanel" class="tab-pane active" id="gauge">
+
+            <div style="display: inline-block; width: 35.8%">
+                <div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
+                <br/>
+                <div data-netdata="example.random2"
+                        data-dimensions="random"
+                        data-chart-library="gauge"
+                        data-gauge-max-value="32767"
+                        data-width="100%"
+                        data-after="-600"
+                        data-points="600"
+                        data-title="1/second (netdata&nbsp;default)"
+                        data-units="important metric"
+                        data-colors="#5A5"
+                        ></div>
+            </div>
+            <div style="display: inline-block; width: 50%">
+                <div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>
+                <div data-netdata="example.random2"
+                        data-dimensions="random"
+                        data-chart-library="gauge"
+                        data-gauge-max-value="32767"
+                        data-width="45%"
+                        data-after="-600"
+                        data-points="60"
+                        data-title="Updates Every 10&nbsp;Sec"
+                        data-units="important metric"
+                        data-colors="#C55"
+                        ></div>
+                <div data-netdata="example.random2"
+                        data-dimensions="random"
+                        data-chart-library="gauge"
+                        data-gauge-max-value="32767"
+                        data-width="45%"
+                        data-after="-600"
+                        data-points="2"
+                        data-title="Updates Every 5&nbsp;Mins"
+                        data-units="important metric"
+                        data-colors="#C55"
+                        ></div>
+            </div>
+        </div>
+        <div role="tabpanel" class="tab-pane" id="easypiechart">
+
+            <div style="display: inline-block; width: 25%">
+                <div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
+                <br/>
+                <div data-netdata="example.random2"
+                        data-dimensions="random"
+                        data-chart-library="easypiechart"
+                        data-easypiechart-max-value="32767"
+                        data-width="100%"
+                        data-after="-600"
+                        data-points="600"
+                        data-title="1/second (netdata&nbsp;default)"
+                        data-units="important metric"
+                        data-colors="#5A5"
+                        ></div>
+            </div>
+            <div style="display: inline-block; width: 40%">
+                <div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>
+                <div data-netdata="example.random2"
+                        data-dimensions="random"
+                        data-chart-library="easypiechart"
+                        data-easypiechart-max-value="32767"
+                        data-width="45%"
+                        data-after="-600"
+                        data-points="60"
+                        data-title="Updates Every 10&nbsp;Sec"
+                        data-units="important metric"
+                        data-colors="#C55"
+                        ></div>
+                <div data-netdata="example.random2"
+                        data-dimensions="random"
+                        data-chart-library="easypiechart"
+                        data-easypiechart-max-value="32767"
+                        data-width="45%"
+                        data-after="-600"
+                        data-points="2"
+                        data-title="Updates Every 5&nbsp;Mins"
+                        data-units="important metric"
+                        data-colors="#C55"
+                        ></div>
+            </div>
+        </div>
+    </div>
+    <div style="font-size: 1.5vw;">Hover on the chart below, to see the selected value on the charts above!</div>
+    <div data-netdata="example.random2"
+            data-dimensions="random"
+            data-dygraph-theme="sparkline"
+            data-width="100%"
+            data-height="20vh"
+            data-after="-600"
+            data-points="600"
+            data-title="1/second (netdata&nbsp;default)"
+            data-units="something"
+            data-colors="#888"
+            ></div>
+</div>
+</body>
+</html>