Search code examples
jqueryjquery-uijquery-ui-draggablegridsterdashing

Which jquery draggable/resizable dashboard template to use

Background

I'm making a front end interface to display log data. I currently have a table that shows raw data with plenty of operations, a calendar similar to a heat-map and a bar chart displaying aggregated data for any chosen attribute, time period and granularity (using d3). The data size is rather huge so all the actions is done at back-end (literally, all filter/sort etc. is an AJAX call to server side). There should be more graphs to come, in similar fashion.

Goal

What I'm trying to have is a dashboard using JQuery for all the graphs and Stats later. I have briefly skimmed through the following options:

  • GridList
  • Dashing

  • Gridly (can't insert 2+ links because of reputation...)

  • sDashboard ^

  • Gridster (According to Gridlist it's no longer in development and thus uncertain reliability?)

The problem is I can't really tell significant difference between all of them or which one fits better, and I have very limited front-end experience (I looked up and learned JS function definition syntax couple days ago). Below is a list of functionalities I would like to achieve ideally:

  1. each widget behaves like a normal DOM object, or as if there were no widgets. So I am still able to manipulate the table and graphs within the widget, sending AJAX calls to one another.
  2. able to add widgets with custom settings for different graphs, ideally also with user-defined relationship between widgets(I'm thinking about like assigning IDs). So for instance there could be 4 widgets: 2 tables and 2 graphs, and graph A changes accordingly whenever I click on table A, and graph B upon operations on table B. (This sounds tricky, is it doable?)

[Optional Ones]

  1. change the entire board to some preset layout with one click
  2. option to display a widget in an almost full-screen modal pop-up window fashion for better manipulation

Those are what I can think of so far. Wondering if anyone has done something similar, and what are the pros/cons/limitations for each/any of the mentioned options? Any suggestion is appreciated :)

Solution

  • Why build it yourself? Use ELK instead (Elastica, Log Stash, Kibana).

    It is already built and does exactly what you need -- unless you're logging to a Database. If you are, then may god have mercy on your soul (and your poor DBMS).

    Here is a tutorial from DigitalOcean with instructions to set it up: https://www.digitalocean.com/community/tutorials/how-to-install-elasticsearch-logstash-and-kibana-4-on-ubuntu-14-04

    Anyway...

    Disclaimer - I contribute to the Dashing project and I am heavily biased.

    Answers to your list:

    1. All elements on an HTML page are "normal DOM objects" that can be manipulated and I don't understand how this relates to AJAX whatsoever. You can run AJAX requests from any web page, so long as the request is made to the same domain or another domain that has a CORS header (otherwise you run into XSS issues)
    2. Dashing doesn't really support widgets interacting with other widgets out of the box, but I you could still code this up. It sounds very complicated and I would probably advise against it.
    3. In Dashing, you could have more than one Dashboard and just link to each of them to get different layouts. Each Dashboard has it's own ERB template which renders different HTML based on the HTTP route that is requested.
    4. Modern browsers support the Fullscreen API, which could be used to make a widget go fullscreen.