Skip to content

Commit

Permalink
Added support to pass HTML5 data options to render the chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@nareshv
nareshv committed Apr 25, 2013
1 parent 1a9f6da commit f594149
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 45 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
134 changes: 89 additions & 45 deletions justgage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
* -----------------------------
Expand Down Expand Up @@ -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 =
{
Expand All @@ -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
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit f594149

Please sign in to comment.