fnordmetric ui doc...

Todo

====

  Show HN: Open-Source framwork for beautiful real-time dashboards

  → make fnordmetric products italic

  → doc: example: age distribution

  → doc: hacking

  → doc: document all widget options

  → doc: sending data: stomp + amqp

  → implement, _decr, _max, _min for zero config gauges

  → gauge explorer: fix gauges multiple times in select dropdown

  → doc: distribution, toplist and timeseries gauge

Backlog

=======

  → bignumberwidget

  → fancy topbar daterange picker for legacy dashboards

  → make fnordmetric responsive

  → favicon (F)

  → timeseries-widget: cardinal on/off should be flick-switch

  → namespace picker in sidebar

  → distgauge: render std. deviation

  → timeseries-gauge: overview series weights

  → timeseries-gauge: punchcards

  → incr_fraction: implement progressive

  → timeseries gauge: restrict to max resolution

  → formatter: num, time, currency, percent, time_of_day

  → put images into one sprite

Changelog

=========

  1.1.1

    → icons for sidebar

    → simple gauge explorer (style like active users) + html5 api snippet generator

    → new file structure

    → better namespacing for javascript

  1.1.0

    → js api (<div data-gauge="...">)

    → gauge human_titles, units, scale_by

    → added stomp acceptor, amqp acceptor, fyrehose acceptor

    → explicit dashboard initialization with options -> dashboard grouping

    → bugfix: lots of small bugfixes

  1.0.0

    → improved ui

    → highcharts is dead, long live d3.js :)

    → websockets instead of ajax

    → new gauges are variable interval!

    → new gauges: timeseries, toplist, distribution (anti-repetition!)

    → timeseries gauge: fraction api

    → new things: trends, punchards, stdeviation etc

    → splitted up code into acceptor, web, worker etc.

    → splitted up javascript code

    → refactorings, no server-side rendering

    → less ram usage / garbage collection / single tick

    → fnordmetric:announce redis pusub event-data instead of event_id

    → config in multiple files

Todo

====

  → fnordmetric-enterprise: admin interface

  → fnordmetric-enterprise: csv export

  → fnordmetric-ui: sum & avg in client

  → fnordmetric-doc: enterprise deployment (init script, puppet, heroku, etc)

  → fnordmetric-doc: enterprise http api

  → fnordmetric-classic: timeseries-widget: cardinal on/off should be flick-switch

      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>

      The Default is "now". You can find the <a href="/documentation/fnordmetric_api_reference"/>full documentation for this time format here</a>

    </td>

  </tr>

  <tr>

      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"

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

      You can find the <a href="/documentation/fnordmetric_api_reference"/>full documentation for this time format here</a>

    </td>

  </tr>

  <tr>

    FnordMetric.resize();

### JavaScript API

FnordMetric UI provides a JavaScript API to retrieve metric values.

**FnordMetric#value_at(metrics, time, callback)**

Retrieves the measured value of a metric at a specific point in time. [See here](/documentation/enterprise_api_reference)

for more information about the time format.

    >> FnordMetric.value_at(["response_time-mean-30"], "now", function(){ console.log(this); })

    << {value: 2122.55581}

**FnordMetric#values_in(metrics, since, until, callback)**

Retrieves all measured values of a metric in a specific time interval. [See here](/documentation/enterprise_api_reference)

for more information about the time format.

    >> FnordMetric.values_in(["response_time-mean-30"], "-2h", "now", function(){ console.log(this); })

    << { "response_time-mean-30": {1363188688: "2036.83876", 1363188718: "2049.7485", 1363188748: "2283.37632"} }

Enterprise running as a backend</i>

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

charts into any website without having to write any 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](http://github.com/paulasmuth/fnordmetric/tree/master/fnordmetric-ui) if you want to include it in your project.

FnordMetric UI requires jQuery 1.6.2+. We set up the basic HTML structure (this

assumes you have either FnordMetric Classic or FnordMetric Enterprise running

on port 4242) and save this to a file `my_dashboard.html`

FnordMetric UI requires jQuery 1.6.2+. To set up the basic HTML structure save

this to a file `my_dashboard.html`. Download the two files `fnordmetric-ui.js`

and `fnordmetric-ui.css` [from here](/documentation/downloads) and put them into

the same folder.

    <!DOCTYPE html>

    <html>

      <head>

        <title>FnordMetric</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

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

        <script src='http://localhost:4242/fnordmetric-ui.js' type='text/javascript'></script>

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

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

      </head>

      <body>

        ...

We will display one counter "total sales in the last hour" on our page. To do that we

first have to connect to the FnordMetric Backend using WebSockets (_Make sure you set the

correct namespace, it's "myapp" in the example_):

first have to connect to the FnordMetric Backend using WebSockets. This examples assumes

that you have either FnordMetric Classic running on port 4242 or FnordMetric Enterprise

with a WebSocket listener on port 4242.

    <script>

      FnordMetric.setup({

      });

    </script>

_Note: When using FnordMetric Enterprise the namespace is always "fnordmetric"_

_Note: If you are using FnordMetric Classic, make sure you set the correct namespace (it is

"myapp" below). If you are using FnordMetric Enterprise you don't have to specify a

namespace at all)_:

Now the FnordMetric UI library is loaded and we can plug widgets into the page

using HTML5 elements. Let's start with a simple counter that displays the sum of

    <span

      data-fnordmetric="counter"

      data-at="sum(-1hour)"

      data-gauge="total_sales_in_euro"

      data-gauge="total_sales-sum-10"

      data-autoupdate="1"

      data-unit="$"

      >0</span>

page displaying "0". It's a good idea to open the JavaScript / Inspector

console of your browser as FnordMetric UI will print error messages using `console.log`

The last step is to start sending data. This will report one sale of 29€:

The last step is to start sending data. We will report one sale of 29$.

If you are using FnordMetric Enterprise you can do this with e.g. netcat:

    echo "SAMPLE total_sales-sum-10 29" | nc localhost 8922

If you are using FnordMetric Classic you can do this e.g. with curl + http:

    curl -X POST -d '{ "_type": "_incr", "value": 29, "gauge": "total_sales_in_euro" }' http://localhost:4242/events

    curl -X POST -d '{ "_type": "_incr", "value": 29, "gauge": "total_sales-sum-10" }' http://localhost:4242/events

For fun and profit, we can display a timeseries graph of sales in the last 10 minutes with this snippet:

      data-fnordmetric="timeseries"

      data-since="-10minutes"

      data-until="now"

      data-gauges="total_sales_in_euro"

      data-gauges="total_sales-sum-10"

      data-autoupdate="1"

      ></div>