Dijit D3 Custom Dashboard Part 1

In this series I am going to show you how to build a custom dashboard applications using dijit for the ui controls, ajax calls for data acquisition and d3 for charting and graphs.
For the layout I am going to use a BorderContainer control in the dijit library. The BorderContainer is very good at layouts that would be difficult to pull of with just html and client side code. It has a splitter control that I will go over in another post.


Dashboard layout using dijit Border Container Widget (Js Fiddle)

Basic Layout

After you have the border container in place you can add your widgets and make them drag-able from region to region. In order to add drag and drop functionality to the dashboard each region must contain a dojo.dnd.Source widget. The Source widget acts as both the source of a drag-able widget and as a destination. The Source widget has to have an accept attribute with the name of the class of widgets it will accept as a drag item.

Dashboard with added drag and drop widgets (Js Fiddle)

Dashboard with drag-able widgets

Right out of the box dojo contains very rich support for drag and drop. When you drag an item it will automatically show you an avatar of the item you are dragging. You can drag items with in the same container with out any additional code.

Next time I will talk about adding and removing widgets from the dashboard and how to resize regions.

Continue to part 2