options.js

return {
  "name": "Bandwidth In/Out",
  "deviceMap": [
    { "deviceId": [530,531,532,533], "minimum": 1, "maximum": 1},// Incoming
    { "deviceId": [540,541,542,543], "minimum": 1, "maximum": 1} // Outgoing
  ],
  "forceDeviceMapGroup": true
}

style.less

/* Themes */
&.mac {
}

&.ninjablock {
}

&.raspberry {
  background-image: url(https://dl.dropboxusercontent.com/u/428557/Raspi_Colour_R.png);
}

background-color: white;
background-position:top center; 
background-size: contain;
background-repeat: no-repeat;

/* General column styling */
.column {
  width: 50%;
  height: 100%;
  top: 0%;
  position: relative;
  float: left;
  background: 0;
}

/* Left-side label styling (e.g. "Temperature") */
.labelleft {
  position: absolute;
  top: 80px;
  width: 100%;
  text-align: center;
  color: rgba(0,0,0,0.3);
}

/* Left-side value styling */
.valueleft {
  position: absolute;
  top: 45px;
  width: 100%;
  text-align: center;
  font-size: 45px;
  font-weight: bold;
  left: 28px;
  
  .unitsleft {
    font-size: 14px;
    font-weight: normal;
    vertical-align: super;
    position: relative;
    top: -10px;
  }
  
  .hivaltextleft {
    position: relative;
    display: inline-block;
    color: hsl(20,75%,65%);
    font-weight: bold;
    font-size: 10px;
    width: 50px;
    top: -15px;
    left: -28px;
    text-align: left;
  }
  
  .lovaltextleft {
    position: relative;
    display: inline-block;
    color: hsl(203,60%,56%);
    font-weight: bold;
    font-size: 10px;
    width: 50px;
    top: -30px;
    left: 49px;
    text-align: left;
  }
}

/* Right-side label styling (e.g. "Humidity") */
.labelright {
  position: absolute;
  top: 80px;
  width: 100%;
  text-align: center;
  color: rgba(0,0,0,0.3);
}

/* Right-side value styling */
.valueright {
  position: absolute;
  top: 45px;
  width: 100%;
  text-align: center;
  font-size: 45px;
  font-weight: bold;
  left: 58px;
  
  .unitsright {
    font-size: 14px;
    font-weight: normal;
    vertical-align: super;
    position: relative;
    top: -10px;
  }
  
  .hivaltextright {
    position: relative;
    display: inline-block;
    color: hsl(20,75%,65%);
    font-weight: bold;
    font-size: 10px;
    width: 50px;
    top: -15px;
    left: -26px;
    text-align: left;
  }
  
  .lovaltextright {
    position: relative;
    display: inline-block;
    color: hsl(203,60%,56%);
    font-weight: bold;
    font-size: 10px;
    width: 50px;
    top: -4px;
    left: -89px;
    text-align: left;
  }
}

/* Sparkline styling */
.sparkline {
  position: relative;
  top: 105px;
  width: 90%;
  height: 85px;
  margin-left: auto;
  margin-right: auto;
  line-height: 30px;
  border: 1px solid hsl(0,0%,90%);
  background: hsl(0,0%,95%);
  
  canvas {
    width: 100%;
    height: 30px;
  }
}

/* Left-side text color */
.sensorleft {
  color: hsl(45,100%,45%);
}

/* Right-side text color */
.sensorright {
  color: hsl(203,60%,56%);
}

view.html

<div class="sensorleft column">
  <div class="labelleft">Incoming</div>
  <div class="valueleft">
    <span class="text"></span>
    <sup class="unitsleft">kb</sup>
    <span class="hivaltextleft"></span>
    <span class="lovaltextleft"></span>
  </div>
  <div class="sparkline"></div>
</div>
<div class="sensorright column">
  <div class="labelright">Outgoing</div>
  <div class="valueright">
    <span class="text"></span>
    <sup class="unitsright">kb</sup>
    <span class="hivaltextright"></span>
    <span class="lovaltextright"></span>
  </div>
  <div class="sparkline"></div>
</div>

widget.js

var types = ['raspberry', 'mac', 'ninjablock']; 

var type = 'generic';

_.each(['raspberry', 'mac', 'ninjablock'], function(t) {
  if (_.some(scope.Widget.devices, function(d) {return d.tags.indexOf(t) > -1;})) {
    type = t;
  }
});

element.addClass(type);



/* Define the sparkline sensor graphs */
var sparkSensorRight = element.find(".sensorright .sparkline");
var sparkSensorLeft = element.find(".sensorleft .sparkline");

/* Values from the sensors will be stored in these arrays */
var dataSensorRight = [];
var dataSensorLeft = [];

/* Define sparkline style options */
/* The "height" here should match the height in the CSS, or else your line will appear in the wrong location */
var sparklineOptions = {
  width: '100%',
  height: '85px'
}

/* Push values to the right-side sensor display */
function SetSensorRight(value) {
  /* Update value */
  element.find(".sensorright .valueright .text").html(value);
  
  /* Update graph */
  dataSensorRight.push(value);
  sparkSensorRight.sparkline(dataSensorRight, sparklineOptions);  
  
  /* Update high/low values */
  element.find(".sensorright .valueright .hivaltextright").html("HI: " + Math.max.apply(null, dataSensorRight));
  element.find(".sensorright .valueright .lovaltextright").html("LO: " + Math.min.apply(null, dataSensorRight));
};

/* Push values to the left-side sensor display */
function SetSensorLeft(value) {
  /* Update value */
  element.find(".sensorleft .valueleft .text").html(value);
  
  /* Update data array for graph */
  dataSensorLeft.push(value);
  
  /* Update graph */
  sparkSensorLeft.sparkline(dataSensorLeft, sparklineOptions);
  
  /* Update high/low values */
  element.find(".sensorleft .valueleft .hivaltextleft").html("HI: " + Math.max.apply(null, dataSensorLeft));
  element.find(".sensorleft .valueleft .lovaltextleft").html("LO: " + Math.min.apply(null, dataSensorLeft));
};

/* Activate our update functions only when new data is received */
scope.onData = function(data) {
  if (data.D < 540) {
    SetSensorLeft(Math.floor(data.DA));
  } else {
    SetSensorRight(Math.floor(data.DA));
  }
}