Connect With Us

DesignRush Go to Design Rush

Building awesome ruby dashboard using because it’s-cool.

By Kapil Raj Nakhwa on Mar, 16, 2016

On one of the unofficial meet ups for rubynepal where we were going through our usual beer round when our conversation turned towards office set ups, One of our good friend Jonathan Clarke from vayu ( suggested a cool idea to have a dashboard in office to view some key metrics on the performance of the teams. Now obviously , If it was dashboard it had to be visible on the office workspace and had to be on center of our working hall where every one from the team could have a better view of it. Also it had to be auto updates with metrics as it changed. We ran through several options and landed on from shopify . It was simple and was easy to implement and we were like okay so let’s give it a spin. Landed up on page and was pretty straight forward from there. Added some widgets and there it is, your new dashboard. 


Getting Start :

Dashing is a simple sinatra based web application. So setting it up is pretty simple.

gem install dashing
dashing new jyaasa-dashboards
cd jyaasa-dashboards
dashing start

pointed our browser to http://localhost:3030 and wow!!

That was pretty easy.

So let’s dive a little deeper.

Your vanilla dashing dashboard gives you following folders. ( apart from config and the Capfile which we added later on )

      uses sprockets to manage it’s assets .cool right .
images , fonts, coffee and sass exactly what we would’ve prefered.

In simple terms

  • Assets : your cool coffee, fonts , images, and sasy sass files.
  • Dashboards : your erb files for each of the dashboards that you would want to use.
  • Jobs : This is where you put your ruby *.rb files for fetching data . ( how awesome is that consume all api’s )
  • Lib : Usual helper files .
  • Public : error pages and stuff i guess ?
  • Widgets: Now this is where you put your widgets, Each widget is going to be a subdirectory on it’s own with your html/coffee/scss files for your widgets’ . Oh yes, that does mean each widget can be style separately .

Now here is an example of a typical dashboard you might want to have.

            require "httparty"
            url = " no)"
            response = HTTParty.get(url)
            projects = response["projects"]
            <% content_for(:title) { "Dashboard" } %>
              <div class="gridster">
                  <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
                    <div data-id="emitii_count" data-view="Number" data-title="Hours Tracked on Emitii" data-prefix="">


Notice the data attributes ? Those are indeed special . Here’s what they do.

  • Data-id : Now this would be your widget id. Don’t worry about having it unique
  • Data-view : And this would be your view there are some prebuilt ones like Number, Clock, Text, Synergy, List etc . But you can add up as you prefer. Like in below we have added our quote and weather widgets.


Like we said earlier, Widgets would just be a mix of html/coffee and scss files. Here is what is composed of.




      <h1 class="title" data-bind="title"></h1>
      <h3 data-bind="text"></h3>
      <p class="more-info" data-bind="moreinfo"></p>
      <p class="updated-at" data-bind="updatedAtMessage"></p>




          //Sass declarations
          $background-color:  #9c4274;
          $title-color:       rgba(255, 255, 255, 0.7);
          $moreinfo-color:    rgba(255, 255, 255, 0.7);
        // Widget-quote styles
          .widget-quote {
            background: $background-color url('/assets/quote.png') no-repeat 50% 50%;
            .title {
              color: $title-color;
            .more-info {
              color: $moreinfo-color;
            .updated-at {
              color: rgba(0, 0, 0, 0.3);
            h3 {
              position: relative;
              z-index: 1;
            &.large h3 {
              font-size: 65px;

          class Dashing.Quote extends Dashing.Widget


The widget uses what’s called as nana-nana-nana-nana BATMAN !! yes batman js ( . I know it is no longer supported . Because it is not the hero gotham deserve but the hero gotham needs. But you can check out batman binding docs here for reference

The cool thing is whenever the widget receives JSON data it automatically updates it into itself. And you handle the data fetch in your job files


here’s jobs/quote.rb
  require 'net/http'
  require 'uri'
  require 'json'
  server = ""
  SCHEDULER.every '10s', :first_in => 0 do |job|
    url = URI.parse("#{server}/api/1.0/?method=getQuote&key=&format=json&lang=en")
    req =
    res = Net::HTTP.start(, url.port) {|http|
    # Convert to JSON
    j = JSON[res.body]
    # Update the dashboard
    send_event("quote", { text: j['quoteText'], moreinfo: j['quoteAuthor'] })


Notice the line send_event("quote", { text: j['quoteText'], moreinfo: j['quoteAuthor'] }) It is automatically updating the widget with it “quote” with the updated data.

Deployment ? Normal Capistrano recipe should do that job to get the code to the server. For nginx you can use proxy pass and start the dashing with a monitored script or even a detached screen. Here’s a simple conf we are using for nginx.


server {
          listen       80;
          root /home/deployer/www/jyaasa-dashboard/current/public;
        location /{



There you now Know. What would you build with it ? . Feel free to get in touch .

References :


Share This:

Latest Posts

Why we organize all hands Annual Retreat? By Promising Software Engineer on Sep, 17, 2019

Career Conclave 2019 By Promising Software Engineer on Jul, 30, 2019

Ruby Workshop at Jyaasa By Promising Software Engineer on Jul, 30, 2019

Bootcamp @ Jyaasa By Promising Software Engineer on Jul, 30, 2019

Integrating Afterpay Payment in a Rails Project By Umesh P Kafle on Sep, 07, 2018