JQPlot Meter for Dashing

README.md

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>

jqmeter.coffee

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
    )

jqmeter.html

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

jqmeter.scss

.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;
}