README.md

Description

A Dashing widget to show a Google Visualizations Gauge on a dashboard.

Installation

Copy the google_gauge.coffee, google_gauge.html and google_gauge.scss file to into /widgets/google_gauge directory.

Add the following to the dashboard layout file:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.load("visualization", "1", {packages:["gauge"]});
    </script>

Then to include the widget on the dashboard, add the following item to your dashboard file:

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="mygauge" data-view="GoogleGauge"  data-title="Gauge" data-red_from="90" data-red_to="100"></div>
    </li>

Options

The following options can be added to the <div> of the chart object (defaults in parenthesis):

• data-title - (no title) Title of the gauge
• data-moreinfo - (blank) More info text under the gauge
• data-green_from - (no green) Position on the gauge for the start of the green area
• data-green_to - (no green) Position on the gauge for the end of the green area
• data-yellow_from - (no yellow) Position on the gauge for the start of the yellow area
• data-yellow_to - (no yellow) Position on the gauge for the end of the yellow area
• data-red_from - (no red) Position on the gauge for the start of the red area
• data-red_to - (no red) Position on the gauge for the end of the red area
• data-min - (0) Min value for the gauge
• data-max - (100) Max value for the gauge

Setting the Gauge

To send data to the chart, use send_event to send an item called current with a numeric value.

For example:

send_event('mygauge', current: rand(100))

google_gauge.coffee

class Dashing.GoogleGauge extends Dashing.Widget

  @accessor 'current'

  ready: ->

    container = $(@node).parent()
  # Gross hacks. Let's fix this.
    width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
    height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))

    @chart = new google.visualization.Gauge($(@node).find(".gauge")[0])
    @options =
      greenFrom: @get('green_from')
      greenTo: @get('green_to')
      yellowFrom: @get('yellow_from')
      yellowTo: @get('yellow_to')
      redFrom: @get('red_from')
      redTo: @get('red_to')
      minorTicks: @get('minor_ticks') || 5
      min: @get('min')
      max: @get('max')
      height: height
      width: width

    if @get('current')
      @data = google.visualization.arrayToDataTable [['Label','Value'], [@get('title'), @get('current')]]
    else
      @data = google.visualization.arrayToDataTable [['Label','Value'], [@get('title'),0]]

    @chart.draw @data, @options

  onData: (data) ->
    @ready()

google_gauge.html

<div class="gauge"></div>

<p class="more-info" data-bind="moreinfo"></p>

google_gauge.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #2c5a25;

$moreinfo-color:    rgba(255, 255, 255, 0.3);


// ----------------------------------------------------------------------------
// Widget-GoogleGauge styles
// ----------------------------------------------------------------------------
.widget-google-gauge {

  background-color: $background-color;
  position: relative;


  .gauge {
    position: absolute;
    left: 0px;
    top: 0px;
  }

  .more-info {
    color: $moreinfo-color;
    font-weight: 600;
    font-size: 20px;
    margin-top: 0;
  }

}