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                 font-weight: normal;\r
  18                 text-shadow: #333 0px 0px 1px !important;\r
  19                 -webkit-font-smoothing: none;\r
  20         }\r
  21         </style>\r
  22 \r
  23         <script type="text/javascript" src="dashboard.js"></script>\r
  24 </head>\r
  25 <body style="background-color: #444;">\r
  26 \r
  27 <div style="width: 100%; padding-top: 10px; text-align: center; color: #AAA">\r
  28         <div style="font-size: 8vw;">why netdata?</div>\r
  29         <br/>\r
  30         <div style="font-size: 2vw;">These charts update the same data...</div>\r
  31         <div data-netdata="example.random"\r
  32                         data-dimensions="random1"\r
  33                         data-chart-library="easypiechart"\r
  34                         data-easypiechart-max-value="100"\r
  35                         data-width="25%"\r
  36                         data-after="-600"\r
  37                         data-points="600"\r
  38                         data-title="1/second (netdata&nbsp;default)"\r
  39                         data-units="something"\r
  40                         data-colors="#CCC"\r
  41                         data-easypiechart-trackcolor="#555"\r
  42                         data-easypiechart-scalecolor="#555"\r
  43                         ></div>\r
  44         <div data-netdata="example.random"\r
  45                         data-dimensions="random1"\r
  46                         data-chart-library="easypiechart"\r
  47                         data-easypiechart-max-value="100"\r
  48                         data-width="20%"\r
  49                         data-after="-600"\r
  50                         data-points="300"\r
  51                         data-title="Updates Every 2&nbsp;Seconds"\r
  52                         data-units="something"\r
  53                         data-colors="#AAA"\r
  54                         data-easypiechart-trackcolor="#555"\r
  55                         data-easypiechart-scalecolor="#555"\r
  56                         ></div>\r
  57         <div data-netdata="example.random"\r
  58                         data-dimensions="random1"\r
  59                         data-chart-library="easypiechart"\r
  60                         data-easypiechart-max-value="100"\r
  61                         data-width="17.5%"\r
  62                         data-after="-600"\r
  63                         data-points="120"\r
  64                         data-title="Updates Every 5&nbsp;Seconds"\r
  65                         data-units="something"\r
  66                         data-colors="#999"\r
  67                         data-easypiechart-trackcolor="#555"\r
  68                         data-easypiechart-scalecolor="#555"\r
  69                         ></div>\r
  70         <div data-netdata="example.random"\r
  71                         data-dimensions="random1"\r
  72                         data-chart-library="easypiechart"\r
  73                         data-easypiechart-max-value="100"\r
  74                         data-width="15%"\r
  75                         data-after="-600"\r
  76                         data-points="10"\r
  77                         data-title="Updates Every 1&nbsp;Minute"\r
  78                         data-units="something"\r
  79                         data-colors="#888"\r
  80                         data-easypiechart-trackcolor="#555"\r
  81                         data-easypiechart-scalecolor="#555"\r
  82                         ></div>\r
  83         <div style="font-size: 2vw;">Hover on the peaks and the lows of the chart below, to see the diff on the charts above!</div>\r
  84         <div data-netdata="example.random"\r
  85                         data-dimensions="random1"\r
  86                         data-dygraph-theme="sparkline"\r
  87                         data-width="90%"\r
  88                         data-height="20vh"\r
  89                         data-after="-600"\r
  90                         data-points="600"\r
  91                         data-title="1/second (netdata&nbsp;default)"\r
  92                         data-units="something"\r
  93                         data-colors="#CCC"\r
  94                         ></div>\r
  95 </div>\r
  96 </body>\r
  97 </html>\r