I’ve created a AngularJS based charting solution for Splout called Dabado.
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 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.
- 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
- 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.
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.