Polyfill-like Methods
Polyfills help older browsers implement functionality available in newer browsers. For instance, IE8 doesn't have an indexOf on arrays, but Chart.helpers.indexOf does pretty much the same thing. If Chart.helpers.indexOf functionality were made available as a method called indexOf on arrays we'd go all the way and give it the polyfill title. Some of the other methods in this section don't behave exactly like their JavaScript equivalents. That's another reason to keep calling them polyfill-like (or if you want to be chummy, just Ike).
addEvent(domElement, eventType, handler)
Attaches method as a eventType handler for domElement. The DOM API equivalent is domElement.addEventListener(eventType, handler).
EPSILON
JavaScript's Number.EPSILON if it exists or .
findIndex(array, callback, self)
Same as JavaScript's array.findIndex(callback, self).
indexOf(array, item)
Same as JavaScript's array.indexOf(item).
log10(value)
Same as Math.log10.
max(array)
Returns the maximum value in array that can be a number. If there are no elements you get -Infinity.
Chart.helpers.max([1, 'a', '2']);
// 2
Chart.helpers.max([]);
// -Infinity
min(array)
Returns the minimum value in array that can be a number. If there are no elements you get Infinity.
Chart.helpers.min([1, 'a', '-2']);
// -2
Chart.helpers.min([]);
// Infinity
removeEvent(domElement, eventType, handler)
Removes method as a eventType handler for domElement. The DOM API equivalent is domElement.removeEventListener(eventType, handler, false).
requestAnimFrame
Animating involves doing 2 steps in a loop - making incremental changes and allowing the browser to render those changes. Traditionally, this meant making our incremental changes in a loop with a setTimeout call between iterations. The browser does the rendering when the setTimeout timer runs.
Modern browsers provide an alternative way to do this - the RequestAnimationFrame method. You call RequestAnimationFrame with a method and the browser calls this method before rendering the screen, so that any changes in your method will make it to the next screen.
requestAnimFrame returns the browser's equivalent of RequestAnimationFrame or defaults to a setTimeout that's called in 1/60th of a second.
Chart.helpers.requestAnimFrame.call(
window,
// method to run right before rendering
function(timeStamp) {
console.log('Make everything purple!');
}
);
// we can use the return value to cancel the animation function call
Notice that we pass the window object to the call - if we are in a JavaScript environment other than a browser, we won't have window defined and the pre-rendering method is called straightaway.
sign(value)
Same as Math.sign.
where(arrayOrObject, callback)
array.filter(callback) with support for objects. For objects you get back an array of property values that meet the filter criteria.
Chart.helpers.where([1, 2, 3], function(e) { return e % 2; });
// [1, 3]
Chart.helpers.where({ a: 1, b: 2, c: 3 }, function(e) { return e % 2; });
// [1, 3]