Embeddable Charts — Librato Blog

Embeddable Charts



One of the more frequent requests we receive is the ability to embed Librato charts in 3rd-party applications. In the past we've alluded to the existence of a JavaScript SDK available in closed beta, and today we're happy to announce it's immediate availability to all of our users! Even better, we've leveraged the power of HTML 5 data attributes to make the embedding completely unobtrusive. To get started you'll need to include the SDK and specify your authentication credentials (account name/token) with a <script> tag as follows:

<script type="text/javascript"
src="https://sdk.librato.com/librato-sdk-v0.3.0-min.js"
data-librato_email="foo@bar.com"
data-librato_token="16eb7a5fa3...">
</script>

Now that the SDK is loaded all you need to do is add a <div> where you want the chart loaded that minimally specifies a class of librato-metrics (so we can find it) and the id of the instrument you'd like displayed (you can find this at the end of the URI for an instrument on our site)

<div class="librato-metrics" data-instrument_id="3459"></div>

and we'll do the rest! Keep in mind that your authentication credentials are private, so you should only use this on applications that are both secure and authenticated. There are some additional attributes you can set on a div to control it's appearance and configure the instrument:

  • width/height - Control the size of the embedded chart.
  • data-duration - Specify in seconds how large an interval the instruments should display. Defaults to 3600 i.e. 1 hour.
  • data-source - Specify the source(s) used to populate a template instrument. Wildcard can be used to specify multiple sources.

While this initial release is still considered pre-1.0, the underlying code is fairly well tested. In fact we use this SDK in our own application to build the Librato dashboards!

Finally, if you're interested in powering externally-facing dashboards (e.g. you run a SaaS/PaaS platform and your customers need better dashboards), this embedding capability can be combined with our users API to completely white-label our charts. Contact support@librato.com for more information on white-labeling.