As part of my continued interactions with the open source stack, I came across a very nice library: Gridster.js. Gridster is a really cool and awesome JavaScript library that enables drag and drop as well as re-sizing features for your html placeholders (div’s).
One aspect of BI self-service modules is the flexibility for the user to define his own story line and the order in which the user wants to see the visuals. That got me thinking if gridster can help us out there.
We will be trying to build a drag and drop dashboard which allows user to rearrange the elements dynamically.
We will be taking the analytics dashboard that we built using D3.JS, DC.JS, Node JS and MongoDB and apply Gridster.js to it resulting in a dashboard in which we can rearrange the visuals on a grid without losing the interactive features like drill-down and filtering.
Our AIM: Implement Gridster.js library in our interactive dashboard to enable rearrangement and re-sizing of visuals.
Steps to Success:
- Get your hands on the working dashboard.
- Insert the Gridster libraries into your html page.
- Enclose your div’s within Gridster list tags.
- Run your app and see if the functionality works.
Here’s how our finished dashboard will look like:
https://anmolkoul.files.wordpress.com/2015/07/gridpreview.gif
I strongly recommend going through the tutorial that guides you on creating an interactive dashboard before starting this tutorial. The source code for this tutorial can be found at this github repository. This code is complete in itself and utilizes the dashboard we built previously and implements the Gridster library into it.
Step 1: Get your Hands on the working dashboard
You can download the project folder from this repository at github. Download/Fork it and navigate to the gridster-D3 directory in your command prompt /shell and start the app by using npm start.
Step 2: Insert the Gridster libraries into your html page
We can set the base dimensions for the widgets. Think of base dimensions as the building block for the grids. You can set the width and height of your div’s in multiples of the base dimensions.
We define the margins for the widgets and you might notice a resize option which we have set to false. Yes, Gridster allows you to manually resize your grid elements. In this case we have svg charts generated by DC.js and i gave it a skip.
Step 3: Enclose your div’s within Gridster list tags
Gridster essentially divides your webpage into grids and columns. The data-row and data-col attribute enable you to place your div at a desired location on the grid.
The data-sizex and data-sizey are the attributes that define the size of the grid element that is to be created. Note that this is essentially builds on the base dimensions that we described earlier.
Step 4: Run your app
Go to the app folder, in this case gridster-D3 and execute npm start command.
Fire up you browser and go to localhost:8080 to view the dashboard. Drag and drop the elements to see the Gridster functionality.
This was a detailed overview for implementing Gridster on an interactive D3 based analytics dashboard.
Do post any question or comments in the comments section. I will be happy to discuss further.
For the complete post please visit: https://anmolkoul.wordpress.com/2015/07/06/drag-and-drop-visuals-in-your-interactive-dashboard-gridster-d3-js/
