analytics, d3, gridster, Visualization

Drag and Drop Visuals in your Interactive Dashboard – Gridster & D3.js

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:

  1. Get your hands on the working dashboard.
  2. Insert the Gridster libraries into your html page.
  3. Enclose your div’s within Gridster list tags.
  4. Run your app and see if the functionality works.

Here’s how our finished dashboard will look like:

gridpreview

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!

Advertisements

14 thoughts on “Drag and Drop Visuals in your Interactive Dashboard – Gridster & D3.js

  1. Thanks for sharing – really appreciate it. I went down the same backend road of Mongodb and a custom REST api but eventually hit a performance wall (with a dataset is rapidly growing). Need alternatives… Have you tried hooking dc.js into the ELK stack?

    Like

    1. Hi Christian, Thank you for appreciating the post. I feel the same for the increased data sizes. I noticed that a python server was a bit faster than node as far as creating an api was concerned. A learned senior of mine suggested using indexing in mongo and then querying from the server using indexes but i never implemented that. That is something you could look into.
      As for the ELK Stack, i have not hooked it with dc.js but here is a google group conversation that might answer some of your questions on the approach.

      https://groups.google.com/forum/#!searchin/dc-js-user-group/elasticsearch/dc-js-user-group/RyFtyRh7QbM/iGTHTioXIxcJ
      I would be happy to work collaboratively with you on this if needed.

      Cheers!

      Like

  2. Dear Anmol,

    My name is Kumar. I am trying to create a dashboard using D3.JS based on CSV file as input with below examples.

    http://bl.ocks.org/diethardsteiner/3287802

    While we are trying pass 3 different CSV files ( for pie, line, bar charts) there is a issue with local and global variables and code does not work well when we use update function.

    http://bl.ocks.org/dk8996/5538271

    In this we want to replace the add task with passing it into CSV file like append and then present it to chart.

    any help on this CSV file visualization is much appreciated.

    Thanks,
    Hasnain

    Like

    1. Hi Kumar,

      Sorry for the delayed response. I think your problem is a pretty complex one.

      If you are trying to use three different csv’s to create a drill down capable dashboard, it will require using pure play d3 and lots of javascripting.
      I dont have a clue as to how to approach this using dc.js
      Stackoverflow might help you out. Do give it a shot there.

      Otherwise if you are looking to make unconnected charts, should be pretty easy using dc.js. All you need is to initialize different queue.js queues and crossfilter instances. Might be able to make them connected but will again require passing parameters on chart objects. I would suggest going with the first approach.

      Do let me know what you think.

      Cheers,

      Cheers!

      Like

  3. Hello, I was looking for a tool that is capable of managing drag and drop dashboard widgets. And I have seen your model. Can I use this tool for this way ? Or not any recommendation ?

    Like

  4. Awesome! Thank you for the tutorial
    Please, can you re-post the link of the dataset? The Url response – 404 not found
    Thanks

    Like

  5. Hey Anmoul,
    Have you had a chance to check out gridstack.js? As a current maintainer, I’ve put together an official tutorial, similar to yours, for how to create charts using gridstack – both open source softwares. gridstack.js is a dashboard library and highcharts.js if a charting library. Check out the tutorial here if you haven’t yet had a chance https://dylandreams.com/2017/05/06/of-charts-and-dashboards/

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s