Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
JQPlot Meter for Dashing

jqplot meter Integration for Dashing

(C) 2015 Matt Parnell, Digital Monitoring Products

Special thanks to @tylermauthe for helping me get things working properly!


Licensed under the GNU GPL v3


You must download jQPlot from - you'll need jqplot.min.js, jqplot.meterGaugeRenderer.min.js, and jqplot.min.css


Drop the widget files into their own subdirectory in the widgets directory for your dashboard. Then, copy the jqplot javascript files into the assets/javascript directory and the jqplot.min.css file into the assets/css directory.

Edit assets/javascripts/ and add jqplot and the meter renderer between the dashing.js requirement and the require_directory line:

#= require dashing.js

#= require jquery.jqplot.min.js
#= require jqplot.meterGaugeRenderer.min.js
#= require_directory .
#= require_tree ../../widgets


  • value (int - the needle value)
  • buckets (array of int "steps" for the ticks)
  • colors (array of html hex codes for colors)
  • reverse (bool - shall we reverse the color direction?)
  • label (string)
  • position (string)

Example usage

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
    <div data-id="jqmeter" data-view="jqmeter" data-title="JQ Meter" style="background-color:#FF9900;padding:0 !important"></div>
class Dashing.jqmeter extends Dashing.Widget
ready: ->
@defcolors = ["#54C41B","#54C41B","#FFFF00","#FF2424"]
@defbuckets = [0,35,40,50]
@defpos = "inside"
@deflabel = "days"
if @get("colors")
colors = @get("colors")
colors = @defcolors
if @get("buckets")
buckets = @get("buckets")
buckets = @defbuckets
if @get("reverse")
reverse = @get("reverse")
reverse = false
if @get("position")
pos = @get("position")
pos = @defpos
if @get("label")
sLabel = @get("label")
sLabel = @deflabel
val = parseInt @get('value') if @get('value')
if (val >= 0)
@graph = this.drawGraph(val, buckets, colors, reverse, sLabel, pos)
onData: (data) ->
val = parseInt data.value
if (val >= 0)
if @graph
# we should probably check the other variables and update them
# but for now let's assume we keep the same scale and value
# we can pull in the fresh buckets and colors if necessary later
@graph.series[0].data = [[1, val]]
buckets = data.buckets
colors = data.colors
reverse = data.reverse
sLabel = data.label
pos = data.position
buckets = @defbuckets if not buckets
colors = @defcolors if not colors
pos = @defpos if not pos
sLabel = @deflabel if not sLabel
@graph = this.drawGraph(val, buckets, colors, reverse, sLabel, pos)
drawGraph: (val, buckets, bucketColors, reverse, sLabel, pos) ->
bucketColors.reverse() if reverse
return $(@node).find('.jqmeter').jqplot([[val]],
grid: {background: 'transparent'}
renderer: $.jqplot.MeterGaugeRenderer
label: sLabel
labelPosition: pos
showTickLabels: true
intervals: buckets
intervalColors: bucketColors
<h1 class="jqmetertitle" data-bind="title"></h1>
<div class="jqmeter"></div>
<div class="jqmeteropt"><span data-bind="value"></span></div>
<p class="updated-at-jqm" data-bind="updatedAtMessage"></p>
font-size: 22px !important;
margin-top: -16px !important;
margin-bottom:0 !important;
color: #fff !important;
.updated-at-jqm {
font-size: 7px;
margin: -13px auto -21px;
text-align: center;
margin: -36px auto 16px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment