Greetings Folks,

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).

I have had my fair share of experience with self service modules provided by various BI tools like Spotfire, Qlik, Tableau etc. The main aim of these modules as i inferred is to allow the business user to focus on the business aspects of visuals rather than on creating and designing the visuals.

At the same time, These self service modules reduce the dependency on IT as opposed to the traditional reporting structures where the businesses have to rely on IT for report generation.

And lastly, these modules allow faster time to insights as the dependency on the IT is reduced and the business (analyst) knows the preferred visuals for insight generation.

One aspect of these 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. Theoretically it should because at the end of the day our D3.js dashboard is made up of html elements.

For folks who want to see the D3 dashboard that we built in the previous tutorial please click here. 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:

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.

C:\Users\Anmol\Desktop\gridster-D3>npm start

Step 2: Insert the Gridster libraries into your html page

We need to include the jquery.gridster.js and jquery.gridster.css libraries into our html page.

Download the gridster files from here and save them to the css and js folder in your app respectively.

Call the jquery.gridster.css file in the head of the html document.

<link rel="stylesheet" href="css/jquery.gridster.css" />

Call the jquery.gridster.js file just before you close the body of the html document:

<script src="js/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>

Insert the following code just below the call:



<script type="text/javascript">

var gridster;

$(function(){

var log = document.getElementById('log');

gridster = $(".gridster ul").gridster({

widget_base_dimensions: [55, 55],

widget_margins: [5, 5],

resize: {

enabled: false,

}

}).data('gridster');

});

</script>

The code calls the gridster.js library essentially converting out page into a gridster grid.

As you can notice in the above code 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.

For the explorers out there we might be able to attach a dc.renderAll() function to the resize filter somehow so that the charts will get rendered post resize and fit the div’s nicely.

Onto the next step!

Step 3: Enclose your div’s within Gridster list tags

If you check out the code you may see that all our div’s are enclosed in the following code while some of the parameters may vary.

<li data-row="1" data-col="2" data-sizex="4" data-sizey="2" style="padding-top:10px;">

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. In the next tutorial we will learn how to save the state of our grid elements in browser so that the user will see the same orientation of the grid elements upon logging on to the app the next time for a seamless and consistent experience.

Do Share the post if you like it and post any question or comments in the comments section. I will be happy to discuss further.

Cheers!

Share this: Tweet





Like this: Like Loading...