Charting for Splout with AngularJS and NVD3.js

Charting for Splout

I’ve created a AngularJS based charting solution for Splout called Dabado.

Why this?

Necessary, beside automatic application of realtime analyzed or by M/R jobs calculated data, is charting. There are a lot of JavaScript charting libraries out there. In any case D3.js is the biggest one. D3 is able to draw nearly every type of chart you can imagine, good ones, stupid ones and provides a tremendous degree of flexibility. Just have a look at the examples gallery here. There is nothing missing.

However, for normal dashboard charting we “just” need some of the standard chart types like: Line-, Bar-, Pie charts etc. Theres is a lib doing this using D3 called NVD3. For my applications this lib always has been sufficient. It provides a simple and common to all types, interface to charting and does not hide the possibilities of D3.

Needless to explain why AngularJS is a natural choice for creating a dynamic, one page web-application, right?

Splout

Splout is a component designed as the Serving Layer of a Lambda Architecture. I do not want to repeat whats on the Splout webpage, so please read the Splout Feature page. Anyway, some goodies are:

  • Splout has a RESTful SQL/JSON interface (ideal for a dashboard like Dabado)
  • Fast, in memory SQL query execution
  • Tables can be created and loaded by MapReduce jobs
  • Splout scales horizontally

Charting with Dabado

So what is Dabado? Dabado is a AngularJS based charting dashboard for Splout’s RESTful SQL interface.

Dabado allows:

  • Access to Splout’s Tablespaces by writing standard SQL queries
  • NVD3 (based on D3.js) charts
  • Storing SQL statements and charts in a (maybe central) CouchDB
  • Editing several Dashboards and charts
  • Special Angular directives for assembling charts in a one page Dashboard
  • Adding simple date and range selection drop-downs
  • Automatic interpolation of missing time points

Supported Chart Types:

  • Table: Simple table, free value names (even ‘select * from …’)
  • Pie: Pie Chart, x value has to be a String, y value a number
  • Bar: Bar chart. x value can be a date/time or a String, y value has to be a number
  • Horizontal Bar: see Bar
  • Line: Line chart. x value needs to be a date/time, y value has to be a number
  • Line With Focus: see Line
  • Line Plus Bar: see Line. The bar part can be signed by a chart name with ‘^’ as first character (like “^ChartName” select time as x, amount as y from …)
  • Stacked Area: see Line

Dabado Usage:

  • Dashboards contain a set of named Charts, that contain a set of SQL Queries
  • The gear symbol opens two setup panes
  • Type in your queries on the right pane “Chart and SQL” with Tablespace, Partition Key and SQL Query. Execute it with Execute Query.
  • In general, the textbox SQL Queries can have more than one SQL query. One per line. The queries are executed in parallel and are added as data to the graphs (as long they can show more than one data).
  • The SQL queries must have the columns “x” and “y” used for the graph axes (except table charts).
  • The pane “Dashboard” on the left allows to create new Dashboards, adding and deleting new sets of SQL Queries
  • The text box Queries as JSON contains a serialized version of the query table. You can send the JSON via email. If you receive a JSON, paste it into the left textbox “Table as JSON” and press the put into table button.
  • File /app/demoSQL.json contains some test SQL statements. If the file is there, it get loaded automatically to the table.

Dabado Status:

Well, what should I say: It’s a beta software. It is perfect for my needs, but may need some debugging and enhancements (especially documentation ;-))…

I am using a NVD3 directives library called angularjs-nvd3-directives. But I needed to patch it. Mainly because of the missing DOM removal. Other libraries are checked in just for convenience.

And here is the code of Dabado.

Comments are closed.