/**
* NOOP Chart module.
* @memberof noop
* @namespace chart
* @author cisco211
* @copyright © 2019 by "cisco211"
* @version 0.100
*/
(function(noop, undefined)
{
'use strict';
// #region Private
// #endregion Private
// #region Public
noop.chart = new class Chart
{
constructor()
{
/**
* @summary Pie chart.
* @function pie
* @memberof noop.chart
* @param {string} selectors - CSS selectors to apply this chart on.
* @param {Array.<number>} data - An array of data numbers.
* @param {Array.<string>} color - An array of color strings.
* @example noop.chart.pie('canvas#pie', [17, 32, 52], ['red', 'blue', 'green']);
*/
this.pie = function(selectors, data, color)
{
var canvas;
var ctx;
var elements = document.querySelectorAll(selectors);
var lastend;
var myTotal;
var hh;
var hw;
for (var i = 0; i < elements.length; i++)
{
canvas = elements[i];
if (typeof canvas.getContext != 'function')
continue;
ctx = canvas.getContext('2d');
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
hh = canvas.height / 2;
hw = canvas.width / 2;
ctx.translate(hw, hh);
ctx.rotate(270 * Math.PI / 180);
ctx.translate(hw * -1, hh * -1);
lastend = 0;
myTotal = 0;
for (var i = 0; i < data.length; i++)
myTotal += data[i];
for (var i = 0; i < data.length; i++)
{
ctx.fillStyle = color[i];
ctx.beginPath();
ctx.moveTo(hw, hh);
ctx.arc(hw, hh, hh, lastend, lastend + (Math.PI * 2 * (data[i] / myTotal)), false);
ctx.lineTo(hw, hh);
ctx.fill();
lastend += Math.PI * 2 * (data[i] / myTotal);
}
}
}; // pie = function(selectors, data, color)
/**
* @summary Pie chart as image.
* @function pieImage
* @memberof noop.chart
* @param {Array.<number>} data - An array of data numbers.
* @param {Array.<string>} color - An array of color strings.
* @return {string} dataURL - An image data URL string.
* @example var dataURL = noop.chart.pieImage([17, 32, 52], ['red', 'blue', 'green']);
*/
this.pieImage = function(data, color)
{
var canvas;
var ctx;
var lastend = 0;
var myTotal = 0;
var hh;
var hw;
canvas = document.createElement('canvas');
canvas.height = canvas.width;
if (typeof canvas.getContext != 'function')
return canvas.toDataURL();
ctx = canvas.getContext('2d');
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
hh = canvas.height / 2;
hw = canvas.width / 2;
ctx.translate(hw, hh);
ctx.rotate(270 * Math.PI / 180);
ctx.translate(hw * -1, hh * -1);
for (var i = 0; i < data.length; i++)
myTotal += data[i];
for (var i = 0; i < data.length; i++)
{
ctx.fillStyle = color[i];
ctx.beginPath();
ctx.moveTo(hw, hh);
ctx.arc(hw, hh, hh, lastend, lastend +(Math.PI * 2 * (data[i] / myTotal)), false);
ctx.lineTo(hw, hh);
ctx.fill();
lastend += Math.PI * 2 * (data[i] / myTotal);
}
return canvas.toDataURL();
}; // pieImage = function(data, color)
} // constructor()
}; // noop.chart = new class Chart
// #endregion Public
} // (function(noop, undefined)
(window.noop = window.noop || new class NOOP{}));
// EOF