web/demo2.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4     <title>NetData Dashboard</title>
   5     <meta name="application-name" content="netdata">
   6
   7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   8     <meta charset="utf-8">
   9     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10     <meta name="viewport" content="width=device-width, initial-scale=1">
  11     <meta name="apple-mobile-web-app-capable" content="yes">
  12     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  13     <meta name="author" content="costa@tsaousis.gr">
  14
  15     <meta property="og:locale" content="en_US" />
  16     <meta property="og:image" content="https://cloud.githubusercontent.com/assets/2662304/22945737/e98cd0c6-f2fd-11e6-96f1-5501934b0955.png"/>
  17     <meta property="og:url" content="http://my-netdata.io/"/>
  18     <meta property="og:type" content="website"/>
  19     <meta property="og:site_name" content="netdata"/>
  20     <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
  21     <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
  22 </head>
  23 <script>var netdataTheme = 'slate';</script>
  24 <script type="text/javascript" src="http://my-netdata.io/dashboard.js?v20170105-7"></script>
  25 <body>
  26
  27 <div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">
  28     <div style="font-size: 7vw;">why netdata?</div>
  29     <br/>
  30     <div style="font-size: 2vw; color: white;">These charts visualize the same data...</div>
  31
  32
  33     <!-- Nav tabs -->
  34     <ul class="nav nav-tabs" role="tablist">
  35         <li role="presentation" class="active"><a href="#gauge" aria-controls="gauge" role="tab" data-toggle="tab">Gauge.js</a></li>
  36         <li role="presentation"><a href="#easypiechart" aria-controls="easypiechart" role="tab" data-toggle="tab">Easy Pie Chart</a></li>
  37     </ul>
  38
  39     <!-- Tab panes -->
  40     <div class="tab-content">
  41         <div role="tabpanel" class="tab-pane active" id="gauge">
  42
  43             <div style="display: inline-block; width: 35.8%">
  44                 <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>
  45                 <br/>
  46                 <div data-netdata="example.random2"
  47                         data-dimensions="random"
  48                         data-chart-library="gauge"
  49                         data-gauge-max-value="32767"
  50                         data-width="100%"
  51                         data-after="-600"
  52                         data-points="600"
  53                         data-title="1/second (netdata&nbsp;default)"
  54                         data-units="important metric"
  55                         data-colors="#5A5"
  56                         ></div>
  57             </div>
  58             <div style="display: inline-block; width: 50%">
  59                 <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>
  60                 <div data-netdata="example.random2"
  61                         data-dimensions="random"
  62                         data-chart-library="gauge"
  63                         data-gauge-max-value="32767"
  64                         data-width="45%"
  65                         data-after="-600"
  66                         data-points="60"
  67                         data-title="Updates Every 10&nbsp;Sec"
  68                         data-units="important metric"
  69                         data-colors="#C55"
  70                         ></div>
  71                 <div data-netdata="example.random2"
  72                         data-dimensions="random"
  73                         data-chart-library="gauge"
  74                         data-gauge-max-value="32767"
  75                         data-width="45%"
  76                         data-after="-600"
  77                         data-points="2"
  78                         data-title="Updates Every 5&nbsp;Mins"
  79                         data-units="important metric"
  80                         data-colors="#C55"
  81                         ></div>
  82             </div>
  83         </div>
  84         <div role="tabpanel" class="tab-pane" id="easypiechart">
  85
  86             <div style="display: inline-block; width: 25%">
  87                 <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>
  88                 <br/>
  89                 <div data-netdata="example.random2"
  90                         data-dimensions="random"
  91                         data-chart-library="easypiechart"
  92                         data-easypiechart-max-value="32767"
  93                         data-width="100%"
  94                         data-after="-600"
  95                         data-points="600"
  96                         data-title="1/second (netdata&nbsp;default)"
  97                         data-units="important metric"
  98                         data-colors="#5A5"
  99                         ></div>
 100             </div>
 101             <div style="display: inline-block; width: 40%">
 102                 <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>
 103                 <div data-netdata="example.random2"
 104                         data-dimensions="random"
 105                         data-chart-library="easypiechart"
 106                         data-easypiechart-max-value="32767"
 107                         data-width="45%"
 108                         data-after="-600"
 109                         data-points="60"
 110                         data-title="Updates Every 10&nbsp;Sec"
 111                         data-units="important metric"
 112                         data-colors="#C55"
 113                         ></div>
 114                 <div data-netdata="example.random2"
 115                         data-dimensions="random"
 116                         data-chart-library="easypiechart"
 117                         data-easypiechart-max-value="32767"
 118                         data-width="45%"
 119                         data-after="-600"
 120                         data-points="2"
 121                         data-title="Updates Every 5&nbsp;Mins"
 122                         data-units="important metric"
 123                         data-colors="#C55"
 124                         ></div>
 125             </div>
 126         </div>
 127     </div>
 128     <div style="font-size: 1.5vw;">Hover on the chart below, to see the selected value on the charts above!</div>
 129     <div data-netdata="example.random2"
 130             data-dimensions="random"
 131             data-dygraph-theme="sparkline"
 132             data-width="100%"
 133             data-height="20vh"
 134             data-after="-600"
 135             data-points="600"
 136             data-title="1/second (netdata&nbsp;default)"
 137             data-units="something"
 138             data-colors="#888"
 139             ></div>
 140 </div>
 141 </body>
 142 </html>