Eye Candy for Cloudant

Data visualization right in the dashboard, via userscript

Rebus: eye-candy for cloud-ant

IBM Cloudant is a fully-managed NoSQL database-as-a-service based on Apache CouchDB™. While Cloudant’s web UI provides a JSON view and a table view of your data, it does not, however, include a visual representation of your data.

There are numerous tools and applications out there to extract your data from Cloudant and visualize/analyze it. While these systems are powerful and definitely necessary, sometimes you just need a quick visualization.

The Candy Jar

With the SimpleDataVis npm module and a little userscript, you can easily integrate a data-visualizing view into Cloudant. Initially created for the Simple Logging Service visualization page, SimpleDataVis is a JavaScript module that aids in the visualization of data. Userscripts allow for on-the-fly the modification of web pages to add functionality or make cosmetic changes.

The userscript created is simple, but effective, in providing a visualization for a database view in the Cloudant dashboard. The script adds a new button in the context of a view beside the JSON and Table buttons.

Injecting a new Chart button into the Cloudant dashboard.

Clicking the new button renders a visualization of the current view data.

Automatically visualize aggregated Cloudant JSON with SimpleDataVis.

Chocolate Factory

To install the script, use the Firefox browser with the Greasemonkey extension.

1. Go to the cloudant-eyecandy.user.js
2. Click on the Raw button
3. Install the script when prompted

Once installed, log in to Cloudant and go to a view. In the view page, the new Chart button should now appear. If the button does not appear, ensure the script is enabled and try refreshing the page.

Visualizations like pie charts or bar charts assume some kind of aggregation on your data. The most direct way to do aggregations is to use Cloudant’s built-in reduce functions. Cloudant’s documentation on views (MapReduce) has the details.

Different charts expect data in different formats. Here are the schemas that SimpleDataVis will use to automatically render visualizations. You’ll notice that certain simple charts like bar and pie varieties expect data in the same format: [{ key: "", value: n }, ...]. In this case, the code will randomly pick one format to display. If you extend my userscript to select certain charts in this scenario, please let me know in the comments.

Once you have properly defined your database view, it’s time to visualize it. To see the aggregated results, be sure to check the Reduce button from the query Options menu in your view. Now, you’ll be all set to receive your Eye Candy.

Be sure to check your query options to enable aggregated results for visualizations.

If you’d like to try and reproduce the example in this article, replicate https://examples.cloudant.com/movies-demo into your own Cloudant instance (note that you might incur a small fee). Here's an example view definition you can use—be sure to select the _sum reduce function in the UI too:

Example view function that accounts for empty string values. You could also try just doc.Movie_rating in the if-statement and note the difference.

Sour Patches

The current implementation of the userscript works with the Greasemonkey extension for Firefox. However, you can easily modify it to work with other userscript manager extensions (for example, Tampermonkey for Chrome). Here’s the code for SimpleDataVis on GitHub. Theoretically, SimpleDataVis could also work with Apache CouchDB™’s new Fauxton dashboard. I’d love to hear about any modifications in the comments.

Thanks for checking out SimpleDataVis, and please ♡ this article to recommend it to other Medium readers.