Create a gist now

Instantly share code, notes, and snippets.

JQPlot Meter for Dashing

jqplot meter Integration for Dashing

(C) 2015 Matt Parnell mparnell@dmp.com, Digital Monitoring Products https://dmp.com/

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

License

Licensed under the GNU GPL v3

Requirements

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

Installation

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/application.coffee 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

Parameters

  • 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>
</li>
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")
else
colors = @defcolors
if @get("buckets")
buckets = @get("buckets")
else
buckets = @defbuckets
if @get("reverse")
reverse = @get("reverse")
else
reverse = false
if @get("position")
pos = @get("position")
else
pos = @defpos
if @get("label")
sLabel = @get("label")
else
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]]
@graph.replot()
else
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'}
seriesDefaults:
renderer: $.jqplot.MeterGaugeRenderer
rendererOptions:
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>
.jqmetertitle{
font-size: 22px !important;
margin-top: -16px !important;
margin-bottom:0 !important;
}
.jqplot-meterGauge-label{
color: #fff !important;
}
.updated-at-jqm {
font-size: 7px;
margin: -13px auto -21px;
}
.jqmeteropt{
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