Connect With Us

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

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

Switching to React Native from Ruby on Rails By Kamal Pandey on Aug, 29, 2018

Jyaasa in IT Career Fair 2018 By Sonika Thapa on Jun, 12, 2018

Encrypted secrets in Ruby on Rails By Rasna Shakya on Apr, 20, 2018

Rails Payment Integration with zipPay (Buy Now and Pay Later) By Nelson Suwal on Mar, 23, 2018