diff --git a/README.md b/README.md
index 144125a..ff2dfaf 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,9 @@ Checkout http://justgage.com for details, demos, current release and more.
 
 ###Update log
 
+######April 25, 2013.
+ * use HTML5 'data' attributes of the DOM Element to render the gauge. (Note: data attributes override the constructor options, if present.)
+
 ######April 18, 2013.
  * **parentNode** - use instead of id, attaches gauge to node which is outside of DOM tree - demo at http://justgage.com/demos/custom-node/
  * **width** - force gauge width
diff --git a/justgage.js b/justgage.js
index 865a040..82ce152 100644
--- a/justgage.js
+++ b/justgage.js
@@ -6,6 +6,11 @@
  *
  * LATEST UPDATES
 
+ * -----------------------------
+ * April 25, 2013.
+ * -----------------------------
+    * use HTML5 'data' attributes of the DOM Element to render the gauge. (Note: data attributes override the constructor options, if present.)
+
  * -----------------------------
  * April 18, 2013.
  * -----------------------------
@@ -85,6 +90,49 @@
 
   var obj = this;
 
+  // Helps in case developer wants to debug it. unobtrusive
+  if (config === null || config ===  undefined) {
+      console.log("Make sure to pass options to the constructor.");
+      return false;
+  }
+
+  // Helps in case developer wants to debug it. unobtrusive
+  if (!config.id) {
+      console.log("Make sure to pass the id attribute to the constructor.");
+      return false;
+  }
+
+  var uel = document.getElementById(config.id);
+  var dataset = uel.dataset ? uel.dataset : {};
+
+  // Helps in case developer wants to debug it. unobtrusive
+  if (!uel) {
+      console.log("No element with id : %s found", config.id);
+      return false;
+  }
+
+  //
+  // tiny helper function to lookup value of a key from two hash tables
+  // if none found, return defaultvalue
+  //
+  // key: string
+  // tablea: object
+  // tableb: DOMStringMap|object
+  // defval: string|integer|float|null
+  //
+  var kvLookup = function(key, tablea, tableb, defval) {
+      if (key === null || key === undefined) {
+          return defval;
+      }
+      if (tableb !== null && tableb !== undefined && typeof tableb === "object" && key in tableb) {
+          return tableb[key];
+      } else if (tablea !== null && tablea !== undefined && typeof tablea === "object" && key in tablea) {
+          return tablea[key];
+      } else {
+          return defval;
+      }
+  };
+
   // configurable parameters
   obj.config =
   {
@@ -94,167 +142,163 @@
 
     // parentNode : node object
     // this is container element
-    parentNode : (config.parentNode) ? config.parentNode : null,
+    parentNode : kvLookup('parentNode', config, dataset, null),
 
     // width : int
     // gauge width
-    width : (config.width) ? config.width : null,
+    width : kvLookup('width', config, dataset, null),
 
     // height : int
     // gauge height
-    height : (config.height) ? config.height : null,
+    height : kvLookup('height', config, dataset, null),
 
     // title : string
     // gauge title
-    title : (config.title) ? config.title : "",
+    title : kvLookup('title', config, dataset, ""),
 
     // titleFontColor : string
     // color of gauge title
-    titleFontColor : (config.titleFontColor) ? config.titleFontColor : "#999999",
+    titleFontColor : kvLookup('titleFontColor', config, dataset,  "#999999"),
 
     // value : int
     // value gauge is showing
-    value : (config.value) ? config.value : 0,
+    value : kvLookup('value', config, dataset, 0),
 
     // valueFontColor : string
     // color of label showing current value
-    valueFontColor : (config.valueFontColor) ? config.valueFontColor : "#010101",
+    valueFontColor : kvLookup('valueFontColor', config, dataset, "#010101"),
 
     // symbol : string
     // special symbol to show next to value
-    symbol : (config.symbol) ? config.symbol : "",
+    symbol : kvLookup('symbol', config, dataset, ''),
 
     // min : int
     // min value
-    min : (config.min) ? parseFloat(config.min) : 0,
+    min : parseFloat(kvLookup('min', config, dataset, 0)),
 
     // max : int
     // max value
-    max : (config.max) ? parseFloat(config.max) : 100,
+    max : parseFloat(kvLookup('max', config, dataset, 100)),
 
     // humanFriendlyDecimal : int
     // number of decimal places for our human friendly number to contain
-    humanFriendlyDecimal : (config.humanFriendlyDecimal) ? config.humanFriendlyDecimal : 0,
+    humanFriendlyDecimal : kvLookup('humanFriendlyDecimal', config, dataset, 0),
 
     // textRenderer: func
     // function applied before rendering text
-    textRenderer  : (config.textRenderer) ? config.textRenderer : null,
+    textRenderer  : kvLookup('textRenderer', config, dataset, null),
 
     // gaugeWidthScale : float
     // width of the gauge element
-    gaugeWidthScale : (config.gaugeWidthScale) ? config.gaugeWidthScale : 1.0,
+    gaugeWidthScale : kvLookup('gaugeWidthScale', config, dataset, 1.0),
 
     // gaugeColor : string
     // background color of gauge element
-    gaugeColor : (config.gaugeColor) ? config.gaugeColor : "#edebeb",
+    gaugeColor : kvLookup('gaugeColor', config, dataset, "#edebeb"),
 
     // label : string
     // text to show below value
-    label : (config.label) ? config.label : "",
+    label : kvLookup('label', config, dataset, ''),
 
     // labelFontColor : string
     // color of label showing label under value
-    labelFontColor : (config.labelFontColor) ? config.labelFontColor : "#b3b3b3",
+    labelFontColor : kvLookup('labelFontColor', config, dataset, "#b3b3b3"),
 
     // shadowOpacity : int
     // 0 ~ 1
-    shadowOpacity : (config.shadowOpacity) ? config.shadowOpacity : 0.2,
+    shadowOpacity : kvLookup('shadowOpacity', config, dataset, 0.2),
 
     // shadowSize: int
     // inner shadow size
-    shadowSize : (config.shadowSize) ? config.shadowSize : 5,
+    shadowSize : kvLookup('shadowSize', config, dataset, 5),
 
     // shadowVerticalOffset : int
     // how much shadow is offset from top
-    shadowVerticalOffset : (config.shadowVerticalOffset) ? config.shadowVerticalOffset : 3,
+    shadowVerticalOffset : kvLookup('shadowVerticalOffset', config, dataset, 3),
 
     // levelColors : string[]
     // colors of indicator, from lower to upper, in RGB format
-    levelColors : (config.levelColors) ? config.levelColors : [
-    "#a9d70b",
-    "#f9c802",
-    "#ff0000"
-    ],
+    levelColors : kvLookup('levelColors', config, dataset, [ "#a9d70b", "#f9c802", "#ff0000" ]),
 
     // startAnimationTime : int
     // length of initial animation
-    startAnimationTime : (config.startAnimationTime) ? config.startAnimationTime : 700,
+    startAnimationTime : kvLookup('startAnimationTime', config, dataset, 700),
 
     // startAnimationType : string
     // type of initial animation (linear, >, <,  <>, bounce)
-    startAnimationType : (config.startAnimationType) ? config.startAnimationType : ">",
+    startAnimationType : kvLookup('startAnimationType', config, dataset, '>'),
 
     // refreshAnimationTime : int
     // length of refresh animation
-    refreshAnimationTime : (config.refreshAnimationTime) ? config.refreshAnimationTime : 700,
+    refreshAnimationTime : kvLookup('refreshAnimationTime', config, dataset, 700),
 
     // refreshAnimationType : string
     // type of refresh animation (linear, >, <,  <>, bounce)
-    refreshAnimationType : (config.refreshAnimationType) ? config.refreshAnimationType : ">",
+    refreshAnimationType : kvLookup('refreshAnimationType', config, dataset, '>'),
 
     // donutStartAngle : int
     // angle to start from when in donut mode
-    donutStartAngle : (config.donutStartAngle) ? config.donutStartAngle : 90,
+    donutStartAngle : kvLookup('donutStartAngle', config, dataset, 90),
 
     // valueMinFontSize : int
     // absolute minimum font size for the value
-    valueMinFontSize : config.valueMinFontSize || 16,
+    valueMinFontSize : kvLookup('valueMinFontSize', config, dataset, 16),
 
     // titleMinFontSize
     // absolute minimum font size for the title
-    titleMinFontSize : config.titleMinFontSize || 10,
+    titleMinFontSize : kvLookup('titleMinFontSize', config, dataset, 10),
 
     // labelMinFontSize
     // absolute minimum font size for the label
-    labelMinFontSize : config.labelMinFontSize || 10,
+    labelMinFontSize : kvLookup('labelMinFontSize', config, dataset, 10),
 
     // minLabelMinFontSize
     // absolute minimum font size for the minimum label
-    minLabelMinFontSize : config.minLabelMinFontSize || 10,
+    minLabelMinFontSize : kvLookup('minLabelMinFontSize', config, dataset, 10),
 
     // maxLabelMinFontSize
     // absolute minimum font size for the maximum label
-    maxLabelMinFontSize : config.maxLabelMinFontSize || 10,
+    maxLabelMinFontSize : kvLookup('maxLabelMinFontSize', config, dataset, 10),
 
     // hideValue : bool
     // hide value text
-    hideValue : (config.hideValue) ? config.hideValue : false,
+    hideValue : kvLookup('hideValue', config, dataset, false),
 
     // hideMinMax : bool
     // hide min and max values
-    hideMinMax : (config.hideMinMax) ? config.hideMinMax : false,
+    hideMinMax : kvLookup('hideMinMax', config, dataset, false),
 
     // hideInnerShadow : bool
     // hide inner shadow
-    hideInnerShadow : (config.hideInnerShadow) ? config.hideInnerShadow : false,
+    hideInnerShadow : kvLookup('hideInnerShadow', config, dataset, false),
 
     // humanFriendly : bool
     // convert large numbers for min, max, value to human friendly (e.g. 1234567 -> 1.23M)
-    humanFriendly : (config.humanFriendly) ? config.humanFriendly : false,
+    humanFriendly : kvLookup('humanFriendly', config, dataset, false),
 
     // noGradient : bool
     // whether to use gradual color change for value, or sector-based
-    noGradient : (config.noGradient) ? config.noGradient : false,
+    noGradient : kvLookup('noGradient', config, dataset, false),
 
     // donut : bool
     // show full donut gauge
-    donut : (config.donut) ? config.donut : false,
+    donut : kvLookup('donut', config, dataset, false),
 
     // relativeGaugeSize : bool
     // whether gauge size should follow changes in container element size
-    relativeGaugeSize : (config.relativeGaugeSize) ? config.relativeGaugeSize : false,
+    relativeGaugeSize : kvLookup('relativeGaugeSize', config, dataset, false),
 
     // counter : bool
     // animate level number change
-    counter : (config.counter) ? config.counter : false,
+    counter : kvLookup('counter', config, dataset, false),
 
     // decimals : int
     // number of digits after floating point
-    decimals : (config.decimals) ? config.decimals : 0,
+    decimals : kvLookup('decimals', config, dataset, 0),
 
     // customSectors : [] of objects
     // number of digits after floating point
-    customSectors : (config.customSectors) ? config.customSectors : []
+    customSectors : kvLookup('customSectors', config, dataset, [])
   };
 
   // variables
@@ -822,7 +866,7 @@ function getColor(val, pct, col, noGradient, custSec) {
   if (no === 1) return col[0];
   inc = (noGradient) ? (1 / no) : (1 / (no - 1));
   colors = [];
-  for (var i = 0; i < col.length; i++) {
+  for (i = 0; i < col.length; i++) {
     percentage = (noGradient) ? (inc * (i + 1)) : (inc * i);
     rval = parseInt((cutHex(col[i])).substring(0,2),16);
     gval = parseInt((cutHex(col[i])).substring(2,4),16);