Skip to content

Instantly share code, notes, and snippets.

@hussfelt
Forked from masha256/README.md
Last active August 29, 2015 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hussfelt/c6725a4685b4135e5e12 to your computer and use it in GitHub Desktop.
Save hussfelt/c6725a4685b4135e5e12 to your computer and use it in GitHub Desktop.

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))
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()
<div class="gauge"></div>
<p class="more-info" data-bind="moreinfo"></p>
// ----------------------------------------------------------------------------
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment