This project provides AngularJS directives for displaying visual representations of time series data as charts. It uses D3 as its charting toolkit and tries to simply creating metrics visualizations by using Angular.js.

The parent project that spurred this project is Hawkular - A Metrics engine based on Cassandra (there is also an embedded version of hawkular metrics). The console in Hawkular uses these charting components and will further push the development of these charting components into the future.

Don’t like the charts we have? Take one of the existing charts and modify (coming soon!)

Or

Download: hawkular-charts.js

Bind to a javascript array of metrics:

The nice part of about using angular in the charting framework is that whenever the underlying data changes, watchers automatically load and re-render the chart (as well as any of the properties that may have changed like chart-type). This results in less code and more productivity.

1. Add the hawkular-charts.css to the main index.html page

2. Add the charting module to the application module: app.module('myApp', ['hawkularCharts']);

All that’s left to do now is select the chart type and bind the data attribute on the <hawkular-chart> directive.

Stand Alone Live Updating Tag Example

<hawkular-chart
        chart-type="bar"
        metric-id="server2.cpu.user"
        metric-url="http://127.0.0.1:8080/hawkular/metrics"
        time-range-in-seconds="86400002"
        refresh-interval-in-seconds="30"
        chart-height="250" >
</hawkular-chart>

Stand Alone Charting Explained

• Most cosmetic issues are controlled via standard css through the hawkular-charts.css.

• Custom Chart types: Soon!

• Custom Indicators: Soon!

• Install Node.js - Find more information on Node.js

  • Install npm - If npm is not already installed with Node.js, you have to install it manually. Find more information on npm

• Install Gulp and Bower globally: npm install -g bower gulp

• Install npm dependencies with: npm install

• Install bower dependencies with: bower install

The environment is now ready to be built.

The hawkular Charts directives can be built with: gulp. Only the one command is needed as building is so fast that a watcher task is not necessary.

The resulting javascript file is placed in the root directory as hawkular-charts.js

We’re always interested in contributions from the community.

• Detailed description of the proposed changes

• Rebased onto the latest master commit

• This is a Typescript project, so please submit the typescript source (not the javascript source)