MetricsViewer.js is a simple JavaScript library for displaying Dropwizard Metrics data as line graphs. Dropwizard metrics are formerly known as Coda Hale/Yammer metrics. The MetricsViewer.js library is based on MetricsGraphics.js charting library.

This library is very easy to use. You can create a simple counter metrics viewer by calling the calling addCounter.

metricsViewer.addCounter('#counter-div', 
    "Counter Metrics Viewer Example", 
    "Metric Viewer Example of Counter Metrics", 
    "counter.test.metric.a");   

The complete documentation can be found here. Other examples can be found on the examples page.

1. Download the javascript and css files from dist directory.
2. Download the MetricsGraphics files either lib directory or from MetricsGraphics site.The current version of MetricsViewer.js is based on MetricsGraphics.js v2.15.6 release.
3. The documentation can be here.
4. Follow the working examples here.

The MetricsViewer 2.0 version depends on the following libraries:

1. MetricsGraphics.js (2.15.6) is a JavaScript library for visualizing time-series data.
2. D3 (v15.16.0) is a JavaScript library for manipulating documents based on data. MetricsGraphics.js is based on D3 library.
3. jQuery (3.5.1) is a quintessential JavaScript for manipulating HTML documents.

1. Check out the library.
2. Install Node.js.
3. Install gulp from the project root directory.

    npm install gulp

4. Install the library's dependencies:

    npm install

5. To build the Javascript library, type:

    gulp build:js

P.S. If your OS does not recognize gulp, trying installing command line interface of gulp by typing:

    npm install --global gulp-cli

6. To build the css library, type

    gulp build:css

7. To build everything at the same time, type

    gulp

8. To build with Google closure compiler, type

    gulp compile

9. To unit test, type

    gulp test

The MetricsViewer.js code is shared under the terms of Apache License v2.0.