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 email@example.com for more information on white-labeling.