How To: Setup a Graph

In Dashing a Graph Widget is a semi-transparent overlaid by the latest value in the series:

To setup a new Graph widget you'll need a Job and the HTML widget.

The Job

To get data to our graph we'll need a job:

# jobs/market.rb
SCHEDULER.every "10s", first_in: 0 do |job|
  data = [
    { "x" => 1980, "y" => 1323 },
    { "x" => 1981, "y" => 53234 },
    { "x" => 1982, "y" => 2344 }
  ]
  send_event(:market_value, points: data)
end

The Graph Widget only requires a points key and value to work. The points value should be an Array of Hash objects. The Hash should have an x and y key. Optionally you can pass displayedValue like below to set the displayed value manually:

# jobs/market.rb
SCHEDULER.every "10s", first_in: 0 do |job|
  data = [
    { "x" => 1980, "y" => 1323 },
    { "x" => 1981, "y" => 53234 },
    { "x" => 1982, "y" => 2344 }
  ]
  send_event(:market_value, points: data, displayedValue: data.first["y"])
end

Note: You can create a simple example job via the command line: dashing generate job market_value

The HTML

Now we need to display our widget on the dashboard (Note the first value you used in the above #send_event):

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="market_value" data-view="Graph"></div>
    </li>
  </ul>
</div>

The widget only needs to know the id of the event and the type of view.