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))