doc: fnordmetric-ui docs

  fnordmetric_ui:

    -

      title: "Getting Started"

      title: "Introduction"

      url: "/ui_index"

    -

      title: "API Reference"

      url: "/ui_html5_api"

    -

      title: "Examples"

      url: "/ui_examples"

  fnordmetric_classic:

    -

      title: "Getting Started"

      url: "/classic_index"

    -

      title: "Running FnordMetric"

      url: "/classic_gauges"

    -

      title: "Sending Data"

      url: "/classic_gauges"

    -

      title: "Gauges"

      url: "/classic_gauges"

    -

      title: "Event Handlers"

      url: "/classic_gauges"

    -

      title: "Custom Dashboards"

      url: "/classic_gauges"

    -

      title: "Plugins"

      url: "/classic_gauges"

    -

      title: "Examples"

      url: "/classic_gauges"

    -

      title: "Hacking"

      url: "/classic_gauges"

  fnordmetric_enterprise:

    -

      title: "Getting Started"

      url: "/ui_index"

    -

      title: "HTTP API"

      url: "/ui_index"

FnordMetric UI Examples

-----------------------

here be dragons

+ link

+ link

### Customizing the widgets

Since all widgets are rendered with HTML5 + SVG (d3.js) you can control

the style with CSS.

Example: This five-line CSS snippet applies a "dark" style:

    body{ background:#111; }

    body .fnordmetric_legend li.line .label{ color:#fff; }

    body .fnordmetric_graph .y_grid .tick { stroke:rgba(255,255,255,.15); stroke-dasharray:0; }

    body .fnordmetric_graph .y_ticks text { fill:#ffffff; }

    body .fnordmetric_graph .x_tick .title { color:#ffffff; }

FnordMetric HTML5 API

---------------------

### Introduction

The FnordMetric UI HTML5 API allows you to plugin real-time data and

charts into any website without having to write code. This is achieved

by including a JavaScript library and using data-* attributes on html

elements to declare the widgets.

The javascript library `fnordmetric-ui.js` is bundled with FnordMetric

Classic and FnordMetric Enterprise, but you can download a copy here (FIXPAUL)

if you want to include it in your project.

FnordMetric UI requires jQuery 1.6.2+

    <script src='fnordmetric-ui.js' type='text/javascript'></script>

    <link href='fnordmetric-ui.css' type='text/css' rel='stylesheet' />

### Reference: Counters

Counters are span or div elements. Example:

    <span

      data-fnordetric="counter"

      data-gauge="my_gauge"

      data-at="now"

      >0</span>

These are the valid html attributes:

<table>

  <tr>

    <th>data-fnordmetric <i>(mandatory)</i></th>

    <td>

      must be "counter"

    </td>

  </tr>

  <tr>

    <th>data-gauge <i>(mandatory)</i></th>

    <td>

      name of the gauge to be displayed

    </td>

  </tr>

  <tr>

    <th>data-at</th>

    <td>

      display this value at a certain time, may be a unix timestamp,

      a time definition like `-3hours` (3 hours ago), `-45m` (45m ago)

      or `-3600` (3600 seconds = 1 hour ago).

      <p>You can also get a sum of the last x measurements by setting this to

      e.g. "sum(-3hours)" which will give you the sum of the last three hours.</p>

      <p>You can also get a average of the last x measurements by setting this to

      e.g. "avg(-3hours)" which will give you the average of the last three hours.</p>

      <p>The Default is "now".</p>

    </td>

  </tr>

  <tr>

    <th>data-autoupdate</th>

    <td>

      refresh this value every N seconds

    </td>

  </tr>

  <tr>

    <th>data-unit</th>

    <td>

      display the value with a unit (e.g. € or ms)

    </td>

  </tr>

</table>

<br />

### Reference: Timeseries

Counters div elements. The chart will auto-size itself to the size of the

container div. The height has to be configured manually (default is 240px):

    <div

      data-fnordetric="timeseries"

      data-gauges="my_gauge"

      data-since="-2hours"

      data-until="now"

      ></div>

These are the valid html attributes:

<table>

  <tr>

    <th>data-fnordmetric <i>(mandatory)</i></th>

    <td>

      must be "timeseries"

    </td>

  </tr>

  <tr>

    <th>data-gauges <i>(mandatory)</i></th>

    <td>

      comma seperated list of gauges to be dispalyed (mandatory)

    </td>

  </tr>

  <tr>

    <th>data-since,<br />data-until <i>(mandatory)</i></th>

    <td>

      these attributes specify the time range to be displayed. they may be a

      unix timestamp, a time definition like "-3hours" (3 hours ago), "-45m"

      (45m ago) or "-3600" (3600 seconds = 1 hour ago) or "now". To e.g. display

      the last two hours of data use: data-since="-2hours" data-until="now"

    </td>

  </tr>

  <tr>

    <th>data-colors</th>

    <td>

      comma seperated list of series / gauge colors (optional)

    </td>

  </tr>

  <tr>

    <th>data-height</th>

    <td>

    height of the chart (default is 240px)

    </td>

  </tr>

  <tr>

    <th>data-chart-style</th>

    <td>

    render style (either line, area or flow), default is "line"

    </td>

  </tr>

  <tr>

    <th>data-legend</th>

    <td>

    display a legend? (values are "on" or "off"), default is "on"

    </td>

  </tr>

  <tr>

    <th>data-cardinal</th>

    <td>

    use cardinal splines (values are "on" or "off"), default is "off"

    </td>

  </tr>

  <tr>

    <th>data-autoupdate</th>

    <td>

      refresh this chart every N seconds, default is no autorefresh

    </td>

  </tr>

</table>

<br />

### Refreshing / Resizing

FnordMetric UI offers two JavaScript methods: `refresh` and `resize`.

**FnordMetric#refresh**

You are allowed manipulate the data-* attributes at runtime. You could use this to build

e.g. a custom date picker. After changing the data-* attributes, you should tell FnordMetric

to refresh this widget.

Example: Refresh element "my_graph"

    FnordMetric.refresh($("#my_graph"));

**FnordMetric#resize**

Resizes all widgets but does not redraw (you can use this to build responsive layouts)

Example: Resize all widgets

    FnordMetric.resize();

FnordMetric UI

--------------

 + refresh

 + resize

 + customize style -> css (ex. dark)

Timeseries

----------

  data-fnordmetric

    must be "timeseries" (mandatory)

  data-gauges

    comma seperated list of gauges to be dispalyed (mandatory)

  data-since, data-until

    these attributes specify the time range to be displayed. they may be a

    unix timestamp, a time definition like "-3hours" (3 hours ago), "-45m"

    (45m ago) or "-3600" (3600 seconds = 1 hour ago) or "now". To e.g. display

    the last two hours of data use: data-since="-2hours" data-until="now"

  data-colors

    comma seperated list of series / gauge colors (optional)

  data-height

    height of the chart (default is 240px)

  data-chart-style

    render style (either line, area or flow), default is "line"

  data-legend

    display a legend? (values are "on" or "off"), default is "on"

  data-cardinal

    use cardinal splines (values are "on" or "off"), default is "off"

  data-autoupdate

    refresh this chart every N seconds, default is no autorefresh

Counters

--------

  data-fnordmetric

    must be "counter"

  data-gauge

    name of the gauge to be displayed

  data-at

    display this value at a certain time, may be a unix timestamp,

    a time definition like "-3hours" (3 hours ago), "-45m" (45m ago)

    or "-3600" (3600 seconds = 1 hour ago).

    You can also get a sum of the last x measurements by setting this to

    e.g. "sum(-3hours)" which will give you the sum of the last three hours.

    You can also get a average of the last x measurements by setting this to

    e.g. "avg(-3hours)" which will give you the average of the last three hours.

    The Default is "now".

  data-autoupdate

    refresh this value every N seconds

  data-unit

    display the value with a unit (e.g. € or ms)

<i>This tutorial assumes that you have either FnordMetric Class or FnordMetric

Enterprise running as a backend</i>

here be dragons: fnordmetric ui tutorial

#navigation {

  height:1200px;

  width:210px;

  border-right:1px solid #c7c9cc;

  background:#f4f4f4;

  padding-top:15px;

  float:left;

}

#navigation ul li {

  font-size: 14px;

  line-height:26px;

  line-height:30px;

}

#navigation ul li a {

  color: #333;

  font-size: 14px;

  line-height:24px;

  border-left:1px solid #c7c9cc;

  background:#fff;

  padding-bottom:70px;

  min-height:1200px;

}

#documentation_wrap {

  min-height:600px;

  border-radius:5px; background:#fff; border:1px solid #ddd; border-top:none; box-shadow:0 0 5px #000; overflow:hidden; width:920px;

  border-radius:5px;

  border:1px solid #ddd;

  border-top:none;

  box-shadow:0 0 5px #000;

  overflow:hidden;

  width:920px;

  background:#f4f4f4;

}

#documentation h3 {

pre code {

  padding: 10px 15px;

  display: block;

}

pre {

table th {

  font-weight: 600;

  color: #333;

  vertical-align:top;

  width: 125px;

}

table th i {