Stand Alone Live Charts Example

The purpose of this sample is to demonstrate the ability to use the hawkular-chart tag outside of a full blown angular application. It's an Angular tag so it will still require Angular but eliminating many of the dependencies of the application and getting it down to Angular and a couple libs and css dependencies is the goal. Placing the tag in a normal html web page and have it retrieve and update data is the objective. We are not there yet but here is the first pass.

1. cd hawkular-charts (here)
2. Optionally, edit stand-alone-chart-sample.html, if desired (add new metrics, change time range or refresh interval)
3. Launch http web server of your choice (example: 'python -m SimpleHTTPServer 8000 .')
4. View page at: http://localhost:8000/stand-alone-chart-sample.html
5. Update the <FEED-ID> at "Metric Id" with the value of the Feed Id or remove if feedless

Explanation: Examining the source code, there is an app and a controller required to render the angular directive. The StandAloneController is just a dummy controller required to render directives(tags). It doesn't really do anything just required for Angular directives. After that, the only thing that is needed for use is some hawkular-chart tags with relevant metric-id and metric-url attributes. So this will all be boiled down to several additional lines of code (< 5) to support angular tags in pages; with one angular tag for each chart.

Go ahead and play with the input values below to see that no handlers are needed, just link your atrributes to the chart directive and let two-way binding work its magic.