web/demo2.html

   1 <!DOCTYPE html>\r
   2 <html lang="en">\r
   3 <head>\r
   4         <title>NetData Dashboard</title>\r
   5 \r
   6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
   7         <meta charset="utf-8">\r
   8         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\r
   9         <meta name="viewport" content="width=device-width, initial-scale=1">\r
  10         <meta name="apple-mobile-web-app-capable" content="yes">\r
  11         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">\r
  12         <meta name="author" content="costa@tsaousis.gr">\r
  13 \r
  14         <style>\r
  15         .easyPieChartLabel {\r
  16                 color: #222 !important;\r
  17                 text-shadow: #333 0px 0px 1px !important;\r
  18         }\r
  19         .gaugeChartLabel {\r
  20                 color: #222 !important;\r
  21                 text-shadow: #CCC 0px 0px 1px !important;\r
  22         }\r
  23         </style>\r
  24 \r
  25         <script type="text/javascript" src="dashboard.js"></script>\r
  26 </head>\r
  27 <body style="background-color: #444;">\r
  28 \r
  29 <div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">\r
  30         <div style="font-size: 7vw;">why netdata?</div>\r
  31         <br/>\r
  32         <div style="font-size: 2vw; color: white;">These charts visualize the same data...</div>\r
  33 \r
  34 \r
  35         <!-- Nav tabs -->\r
  36         <ul class="nav nav-tabs" role="tablist">\r
  37                 <li role="presentation" class="active"><a href="#gauge" aria-controls="gauge" role="tab" data-toggle="tab">Gauge.js</a></li>\r
  38                 <li role="presentation"><a href="#easypiechart" aria-controls="easypiechart" role="tab" data-toggle="tab">Easy Pie Chart</a></li>\r
  39         </ul>\r
  40 \r
  41         <!-- Tab panes -->\r
  42         <div class="tab-content">\r
  43                 <div role="tabpanel" class="tab-pane active" id="gauge">\r
  44 \r
  45                         <div style="display: inline-block; width: 35.8%">\r
  46                                 <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
  47                                 <br/>\r
  48                                 <div data-netdata="example.random2"\r
  49                                                 data-dimensions="random"\r
  50                                                 data-chart-library="gauge"\r
  51                                                 data-gauge-max-value="32767"\r
  52                                                 data-width="100%"\r
  53                                                 data-after="-600"\r
  54                                                 data-points="600"\r
  55                                                 data-title="1/second (netdata&nbsp;default)"\r
  56                                                 data-units="important metric"\r
  57                                                 data-colors="#5A5"\r
  58                                                 data-gauge-stroke-color="#555"\r
  59                                                 data-gauge-pointer-color="#333"\r
  60                                                 ></div>\r
  61                         </div>\r
  62                         <div style="display: inline-block; width: 50%">\r
  63                                 <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
  64                                 <div data-netdata="example.random2"\r
  65                                                 data-dimensions="random"\r
  66                                                 data-chart-library="gauge"\r
  67                                                 data-gauge-max-value="32767"\r
  68                                                 data-width="45%"\r
  69                                                 data-after="-600"\r
  70                                                 data-points="40"\r
  71                                                 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
  72                                                 data-units="important metric"\r
  73                                                 data-colors="#C55"\r
  74                                                 data-gauge-stroke-color="#555"\r
  75                                                 data-gauge-pointer-color="#333"\r
  76                                                 ></div>\r
  77                                 <div data-netdata="example.random2"\r
  78                                                 data-dimensions="random"\r
  79                                                 data-chart-library="gauge"\r
  80                                                 data-gauge-max-value="32767"\r
  81                                                 data-width="45%"\r
  82                                                 data-after="-600"\r
  83                                                 data-points="2"\r
  84                                                 data-title="Updates Every 5&nbsp;Mins&nbsp;(your&nbsp;NMS)"\r
  85                                                 data-units="important metric"\r
  86                                                 data-colors="#C55"\r
  87                                                 data-gauge-stroke-color="#555"\r
  88                                                 data-gauge-pointer-color="#333"\r
  89                                                 ></div>\r
  90                         </div>\r
  91                 </div>\r
  92                 <div role="tabpanel" class="tab-pane" id="easypiechart">\r
  93 \r
  94                         <div style="display: inline-block; width: 25%">\r
  95                                 <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
  96                                 <br/>\r
  97                                 <div data-netdata="example.random2"\r
  98                                                 data-dimensions="random"\r
  99                                                 data-chart-library="easypiechart"\r
 100                                                 data-easypiechart-max-value="32767"\r
 101                                                 data-width="100%"\r
 102                                                 data-after="-600"\r
 103                                                 data-points="600"\r
 104                                                 data-title="1/second (netdata&nbsp;default)"\r
 105                                                 data-units="important metric"\r
 106                                                 data-colors="#5A5"\r
 107                                                 data-easypiechart-trackcolor="#555"\r
 108                                                 data-easypiechart-scalecolor="#555"\r
 109                                                 ></div>\r
 110                         </div>\r
 111                         <div style="display: inline-block; width: 40%">\r
 112                                 <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
 113                                 <div data-netdata="example.random2"\r
 114                                                 data-dimensions="random"\r
 115                                                 data-chart-library="easypiechart"\r
 116                                                 data-easypiechart-max-value="32767"\r
 117                                                 data-width="45%"\r
 118                                                 data-after="-600"\r
 119                                                 data-points="40"\r
 120                                                 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
 121                                                 data-units="important metric"\r
 122                                                 data-colors="#C55"\r
 123                                                 data-easypiechart-trackcolor="#555"\r
 124                                                 data-easypiechart-scalecolor="#555"\r
 125                                                 ></div>\r
 126                                 <div data-netdata="example.random2"\r
 127                                                 data-dimensions="random"\r
 128                                                 data-chart-library="easypiechart"\r
 129                                                 data-easypiechart-max-value="32767"\r
 130                                                 data-width="45%"\r
 131                                                 data-after="-600"\r
 132                                                 data-points="2"\r
 133                                                 data-title="Updates Every 5&nbsp;Mins&nbsp;(your&nbsp;NMS)"\r
 134                                                 data-units="important metric"\r
 135                                                 data-colors="#C55"\r
 136                                                 data-easypiechart-trackcolor="#555"\r
 137                                                 data-easypiechart-scalecolor="#555"\r
 138                                                 ></div>\r
 139                         </div>\r
 140                 </div>\r
 141         </div>\r
 142         <div style="font-size: 1.5vw;">Hover on the chart below, to see the selected value on the charts above!</div>\r
 143         <div data-netdata="example.random2"\r
 144                         data-dimensions="random"\r
 145                         data-dygraph-theme="sparkline"\r
 146                         data-width="100%"\r
 147                         data-height="20vh"\r
 148                         data-after="-600"\r
 149                         data-points="600"\r
 150                         data-title="1/second (netdata&nbsp;default)"\r
 151                         data-units="something"\r
 152                         data-colors="#888"\r
 153                         ></div>\r
 154 </div>\r
 155 </body>\r
 156 </html>\r