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://my-netdata.io/images/seo-performance-512.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
  23         <script>var netdataTheme = 'slate';</script>
  24         <script type="text/javascript" src="http://my-netdata.io/dashboard.js?v40"></script>
  25 </head>
  26 <body>
  27
  28 <div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">
  29         <div style="font-size: 7vw;">why netdata?</div>
  30         <br/>
  31         <div style="font-size: 2vw; color: white;">These charts visualize the same data...</div>
  32
  33
  34         <!-- Nav tabs -->
  35         <ul class="nav nav-tabs" role="tablist">
  36                 <li role="presentation" class="active"><a href="#gauge" aria-controls="gauge" role="tab" data-toggle="tab">Gauge.js</a></li>
  37                 <li role="presentation"><a href="#easypiechart" aria-controls="easypiechart" role="tab" data-toggle="tab">Easy Pie Chart</a></li>
  38         </ul>
  39
  40         <!-- Tab panes -->
  41         <div class="tab-content">
  42                 <div role="tabpanel" class="tab-pane active" id="gauge">
  43
  44                         <div style="display: inline-block; width: 35.8%">
  45                                 <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>
  46                                 <br/>
  47                                 <div data-netdata="example.random2"
  48                                                 data-dimensions="random"
  49                                                 data-chart-library="gauge"
  50                                                 data-gauge-max-value="32767"
  51                                                 data-width="100%"
  52                                                 data-after="-600"
  53                                                 data-points="600"
  54                                                 data-title="1/second (netdata&nbsp;default)"
  55                                                 data-units="important metric"
  56                                                 data-colors="#5A5"
  57                                                 ></div>
  58                         </div>
  59                         <div style="display: inline-block; width: 50%">
  60                                 <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>
  61                                 <div data-netdata="example.random2"
  62                                                 data-dimensions="random"
  63                                                 data-chart-library="gauge"
  64                                                 data-gauge-max-value="32767"
  65                                                 data-width="45%"
  66                                                 data-after="-600"
  67                                                 data-points="60"
  68                                                 data-title="Updates Every 10&nbsp;Sec"
  69                                                 data-units="important metric"
  70                                                 data-colors="#C55"
  71                                                 ></div>
  72                                 <div data-netdata="example.random2"
  73                                                 data-dimensions="random"
  74                                                 data-chart-library="gauge"
  75                                                 data-gauge-max-value="32767"
  76                                                 data-width="45%"
  77                                                 data-after="-600"
  78                                                 data-points="2"
  79                                                 data-title="Updates Every 5&nbsp;Mins"
  80                                                 data-units="important metric"
  81                                                 data-colors="#C55"
  82                                                 ></div>
  83                         </div>
  84                 </div>
  85                 <div role="tabpanel" class="tab-pane" id="easypiechart">
  86
  87                         <div style="display: inline-block; width: 25%">
  88                                 <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>
  89                                 <br/>
  90                                 <div data-netdata="example.random2"
  91                                                 data-dimensions="random"
  92                                                 data-chart-library="easypiechart"
  93                                                 data-easypiechart-max-value="32767"
  94                                                 data-width="100%"
  95                                                 data-after="-600"
  96                                                 data-points="600"
  97                                                 data-title="1/second (netdata&nbsp;default)"
  98                                                 data-units="important metric"
  99                                                 data-colors="#5A5"
 100                                                 ></div>
 101                         </div>
 102                         <div style="display: inline-block; width: 40%">
 103                                 <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>
 104                                 <div data-netdata="example.random2"
 105                                                 data-dimensions="random"
 106                                                 data-chart-library="easypiechart"
 107                                                 data-easypiechart-max-value="32767"
 108                                                 data-width="45%"
 109                                                 data-after="-600"
 110                                                 data-points="60"
 111                                                 data-title="Updates Every 10&nbsp;Sec"
 112                                                 data-units="important metric"
 113                                                 data-colors="#C55"
 114                                                 ></div>
 115                                 <div data-netdata="example.random2"
 116                                                 data-dimensions="random"
 117                                                 data-chart-library="easypiechart"
 118                                                 data-easypiechart-max-value="32767"
 119                                                 data-width="45%"
 120                                                 data-after="-600"
 121                                                 data-points="2"
 122                                                 data-title="Updates Every 5&nbsp;Mins"
 123                                                 data-units="important metric"
 124                                                 data-colors="#C55"
 125                                                 ></div>
 126                         </div>
 127                 </div>
 128         </div>
 129         <div style="font-size: 1.5vw;">Hover on the chart below, to see the selected value on the charts above!</div>
 130         <div data-netdata="example.random2"
 131                         data-dimensions="random"
 132                         data-dygraph-theme="sparkline"
 133                         data-width="100%"
 134                         data-height="20vh"
 135                         data-after="-600"
 136                         data-points="600"
 137                         data-title="1/second (netdata&nbsp;default)"
 138                         data-units="something"
 139                         data-colors="#888"
 140                         ></div>
 141 </div>
 142 </body>
 143 </html>