node-red-contrib-smartnode-hook
Version:
this project is dependenced by the node-red-contrib-smartnode for some IoT display function
1,299 lines (1,015 loc) • 65.8 kB
JavaScript
// version: 2014-11-15
/**
* o--------------------------------------------------------------------------------o
* | This file is part of the RGraph package - you can learn more at: |
* | |
* | http://www.rgraph.net |
* | |
* | This package is licensed under the Creative Commons BY-NC license. That means |
* | that for non-commercial purposes it's free to use and for business use there's |
* | a 99 GBP per-company fee to pay. You can read the full license here: |
* | |
* | http://www.rgraph.net/license |
* o--------------------------------------------------------------------------------o
*/
RGraph = window.RGraph || {isRGraph: true};
/**
* The traditional radar chart constructor
*
* @param string id The ID of the canvas
* @param array data An array of data to represent
*/
RGraph.Radar = function (conf)
{
/**
* Allow for object config style
*/
if ( typeof conf === 'object'
&& typeof conf.data === 'object'
&& typeof conf.id === 'string') {
var parseConfObjectForOptions = true; // Set this so the config is parsed (at the end of the constructor)
// Turn conf.data into a multi-d array if it's not already
if (typeof conf.data[0] === 'number') {
conf.data = [conf.data];
}
} else {
var conf = {id: conf, data: []};
// Arguments style: var foo = new RGraph.Radar('cvs', [1,2,3], [1,2,3], [1,2,3]);
if (typeof arguments[1] === 'object' && typeof arguments[1][0] === 'number') {
for (var i=1; i<arguments.length; ++i) {
conf.data.push(RGraph.arrayClone(arguments[i]));
}
// Arguments style: var foo = new RGraph.Radar('cvs', [[1,2,3], [1,2,3], [1,2,3]]);
} else if ( typeof arguments[1] === 'object'
&& typeof arguments[1][0] === 'object'
&& typeof arguments[1][0][0] === 'number') {
conf.data = RGraph.arrayClone(arguments[1]);
}
}
this.id = conf.id;
this.canvas = document.getElementById(conf.id);
this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null;
this.canvas.__object__ = this;
this.type = 'radar';
this.isRGraph = true;
this.data = [];
this.max = 0;
this.uid = RGraph.CreateUID();
this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID();
this.colorsParsed = false;
this.coords = [];
this.coordsText = [];
this.original_data = [];
this.original_colors = [];
this.firstDraw = true; // After the first draw this will be false
/**
* Add the data to the .original_data array and work out the max value
*/
for (var i=0,len=conf.data.length; i<len; ++i) {
this.original_data.push(RGraph.arrayClone(conf.data[i]));
this.data.push(RGraph.arrayClone(conf.data[i]));
this.max = Math.max(this.max, RGraph.arrayMax(conf.data[i]));
}
this.properties =
{
'chart.strokestyle': '#aaa',
'chart.gutter.left': 25,
'chart.gutter.right': 25,
'chart.gutter.top': 25,
'chart.gutter.bottom': 25,
'chart.linewidth': 1,
'chart.colors': ['rgba(255,255,0,0.25)','rgba(0,255,255,0.25)','rgba(255,0,0,0.5)', 'red', 'green', 'blue', 'pink', 'aqua','brown','orange','grey'],
'chart.colors.alpha': null,
'chart.circle': 0,
'chart.circle.fill': 'red',
'chart.circle.stroke': 'black',
'chart.labels': [],
'chart.labels.offset': 10,
'chart.background.circles': true,
'chart.background.circles.count': null,
'chart.background.circles.color': '#ddd',
'chart.background.circles.poly': true,
'chart.background.circles.spokes': 24,
'chart.text.size': 10,
'chart.text.size.scale': null,
'chart.text.font': 'Arial',
'chart.text.color': 'black',
'chart.title': '',
'chart.title.background': null,
'chart.title.hpos': null,
'chart.title.vpos': null,
'chart.title.color': 'black',
'chart.title.bold': true,
'chart.title.font': null,
'chart.title.x': null,
'chart.title.y': null,
'chart.title.halign': null,
'chart.title.valign': null,
'chart.linewidth': 1,
'chart.key': null,
'chart.key.background': 'white',
'chart.key.shadow': false,
'chart.key.shadow.color': '#666',
'chart.key.shadow.blur': 3,
'chart.key.shadow.offsetx': 2,
'chart.key.shadow.offsety': 2,
'chart.key.position': 'graph',
'chart.key.halign': 'right',
'chart.key.position.gutter.boxed': false,
'chart.key.position.x': null,
'chart.key.position.y': null,
'chart.key.color.shape': 'square',
'chart.key.rounded': true,
'chart.key.linewidth': 1,
'chart.key.colors': null,
'chart.key.interactive': false,
'chart.key.interactive.highlight.chart.stroke': 'rgba(255,0,0,0.3)',
'chart.key.interactive.highlight.label': 'rgba(255,0,0,0.2)',
'chart.key.text.color': 'black',
'chart.contextmenu': null,
'chart.annotatable': false,
'chart.annotate.color': 'black',
'chart.zoom.factor': 1.5,
'chart.zoom.fade.in': true,
'chart.zoom.fade.out': true,
'chart.zoom.hdir': 'right',
'chart.zoom.vdir': 'down',
'chart.zoom.frames': 25,
'chart.zoom.delay': 16.666,
'chart.zoom.shadow': true,
'chart.zoom.background': true,
'chart.zoom.action': 'zoom',
'chart.tooltips.effect': 'fade',
'chart.tooltips.event': 'onmousemove',
'chart.tooltips.css.class': 'RGraph_tooltip',
'chart.tooltips.highlight': true,
'chart.highlight.stroke': 'gray',
'chart.highlight.fill': 'rgba(255,255,255,0.7)',
'chart.highlight.point.radius': 2,
'chart.resizable': false,
'chart.resize.handle.adjust': [0,0],
'chart.resize.handle.background': null,
'chart.labels.axes': '',
'chart.labels.background.fill': 'white',
'chart.labels.boxed': false,
'chart.labels.axes.bold': [],
'chart.labels.axes.boxed': null, // This defaults to true - but that's set in the Draw() method
'chart.labels.axes.boxed.zero': true,
'chart.labels.specific': [],
'chart.labels.count': 5,
'chart.ymax': null,
'chart.accumulative': false,
'chart.radius': null,
'chart.events.click': null,
'chart.events.mousemove': null,
'chart.scale.decimals': 0,
'chart.scale.point': '.',
'chart.scale.thousand': ',',
'chart.units.pre': '',
'chart.units.post': '',
'chart.tooltips': null,
'chart.tooltips.event': 'onmousemove',
'chart.centerx': null,
'chart.centery': null,
'chart.radius': null,
'chart.numxticks': 5,
'chart.numyticks': 5,
'chart.axes.color': 'rgba(0,0,0,0)',
'chart.highlights': false,
'chart.highlights.stroke': '#ddd',
'chart.highlights.fill': null,
'chart.highlights.radius': 3,
'chart.fill.click': null,
'chart.fill.mousemove': null,
'chart.fill.tooltips': null,
'chart.fill.highlight.fill': 'rgba(255,255,255,0.7)',
'chart.fill.highlight.stroke': 'rgba(0,0,0,0)',
'chart.fill.mousemove.redraw': false,
'chart.animation.trace.clip': 1
}
// Must have at least 3 points
for (var dataset=0; dataset<this.data.length; ++dataset) {
if (this.data[dataset].length < 3) {
alert('[RADAR] You must specify at least 3 data points');
return;
}
}
/**
* Linearize the data and then create the $ objects
*/
var idx = 0;
for (var dataset=0; dataset<this.data.length; ++dataset) {
for (var i=0,len=this.data[dataset].length; i<len; ++i) {
this['$' + (idx++)] = {};
}
}
/**
* Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
* done already
*/
if (!this.canvas.__rgraph_aa_translated__) {
this.context.translate(0.5,0.5);
this.canvas.__rgraph_aa_translated__ = true;
}
// Short variable names
var RG = RGraph;
var ca = this.canvas;
var co = ca.getContext('2d');
var prop = this.properties;
var jq = jQuery;
var pa = RG.Path;
var win = window;
var doc = document;
var ma = Math;
/**
* "Decorate" the object with the generic effects if the effects library has been included
*/
if (RG.Effects && typeof RG.Effects.decorate === 'function') {
RG.Effects.decorate(this);
}
/**
* A simple setter
*
* @param string name The name of the property to set
* @param string value The value of the property
*/
this.set =
this.Set = function (name, value)
{
var value = typeof arguments[1] === 'undefined' ? null : arguments[1];
/**
* the number of arguments is only one and it's an
* object - parse it for configuration data and return.
*/
if (arguments.length === 1 && typeof name === 'object') {
RG.parseObjectStyleConfig(this, name);
return this;
}
name = name.toLowerCase();
/**
* This should be done first - prepend the propertyy name with "chart." if necessary
*/
if (name.substr(0,6) != 'chart.') {
name = 'chart.' + name;
}
if (name == 'chart.text.diameter') {
name = 'chart.text.size';
}
/**
* If the name is chart.color, set chart.colors too
*/
if (name == 'chart.color') {
this.properties['chart.colors'] = [value];
}
prop[name] = value;
return this;
};
/**
* A simple getter
*
* @param string name The name of the property to get
*/
this.get =
this.Get = function (name)
{
/**
* This should be done first - prepend the property name with "chart." if necessary
*/
if (name.substr(0,6) != 'chart.') {
name = 'chart.' + name;
}
if (name == 'chart.text.diameter') {
name = 'chart.text.size';
}
return prop[name];
};
/**
* The draw method which does all the brunt of the work
*/
this.draw =
this.Draw = function ()
{
/**
* Fire the onbeforedraw event
*/
RG.FireCustomEvent(this, 'onbeforedraw');
// NB: Colors are parsed further down
// Reset the coords array to stop it growing
this.coords = [];
this.coords2 = [];
this.coordsText = [];
/**
* Reset the data to the original_data
*/
this.data = RG.arrayClone(this.original_data);
// Loop thru the data array if chart.accumulative is enable checking to see if all the
// datasets have the same number of elements.
if (prop['chart.accumulative']) {
for (var i=0; i<this.data.length; ++i) {
if (this.data[i].length != this.data[0].length) {
alert('[RADAR] Error! When the radar has chart.accumulative set to true all the datasets must have the same number of elements');
}
}
}
/**
* This defaults to true, but needs to be an array with a size matching the number of
* labels.
*/
if (RG.is_null(prop['chart.labels.axes.boxed'])) {
prop['chart.labels.axes.boxed'] = [];
for (var i=0; i<(prop['chart.labels.specific'].length || prop['chart.labels.count'] || 5); ++i) {
prop['chart.labels.axes.boxed'][i] = true;
}
}
/**
* This is new in May 2011 and facilitates indiviual gutter settings,
* eg chart.gutter.left
*/
this.gutterLeft = prop['chart.gutter.left'];
this.gutterRight = prop['chart.gutter.right'];
this.gutterTop = prop['chart.gutter.top'];
this.gutterBottom = prop['chart.gutter.bottom'];
this.centerx = ((ca.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft;
this.centery = ((ca.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop;
this.radius = Math.min(ca.width - this.gutterLeft - this.gutterRight, ca.height - this.gutterTop - this.gutterBottom) / 2;
/**
* Allow these to be set by hand
*/
if (typeof prop['chart.centerx'] == 'number') this.centerx = 2 * prop['chart.centerx'];
if (typeof prop['chart.centery'] == 'number') this.centery = 2 * prop['chart.centery'];
if (typeof prop['chart.radius'] == 'number') this.radius = prop['chart.radius'];
/**
* Parse the colors for gradients. Its down here so that the center X/Y can be used
*/
if (!this.colorsParsed) {
this.parseColors();
// Don't want to do this again
this.colorsParsed = true;
}
// Work out the maximum value and the sum
if (!prop['chart.ymax']) {
// this.max is calculated in the constructor
// Work out this.max again if the chart is (now) set to be accumulative
if (prop['chart.accumulative']) {
var accumulation = [];
var len = this.original_data[0].length
for (var i=1; i<this.original_data.length; ++i) {
if (this.original_data[i].length != len) {
alert('[RADAR] Error! Stacked Radar chart datasets must all be the same size!');
}
for (var j=0; j<this.original_data[i].length; ++j) {
this.data[i][j] += this.data[i - 1][j];
this.max = Math.max(this.max, this.data[i][j]);
}
}
}
this.scale2 = RG.getScale2(this, {'max':typeof(prop['chart.ymax']) == 'number' ? prop['chart.ymax'] : this.max,
'min':0,
'scale.decimals':Number(prop['chart.scale.decimals']),
'scale.point':prop['chart.scale.point'],
'scale.thousand':prop['chart.scale.thousand'],
'scale.round':prop['chart.scale.round'],
'units.pre':prop['chart.units.pre'],
'units.post':prop['chart.units.post'],
'ylabels.count':prop['chart.labels.count']
});
this.max = this.scale2.max;
} else {
var ymax = prop['chart.ymax'];
this.scale2 = RG.getScale2(this, {'max':ymax,
'min':0,
'strict':true,
'scale.decimals':Number(prop['chart.scale.decimals']),
'scale.point':prop['chart.scale.point'],
'scale.thousand':prop['chart.scale.thousand'],
'scale.round':prop['chart.scale.round'],
'units.pre':prop['chart.units.pre'],
'units.post':prop['chart.units.post'],
'ylabels.count':prop['chart.labels.count']
});
this.max = this.scale2.max;
}
this.DrawBackground();
this.DrawAxes();
this.DrawCircle();
this.DrawLabels();
this.DrawAxisLabels();
/**
* Allow clipping
*/
co.save();
co.beginPath();
co.arc(this.centerx, this.centery, this.radius * 2, -RG.HALFPI, (RG.TWOPI * prop['chart.animation.trace.clip']) - RG.HALFPI, false);
co.lineTo(this.centerx, this.centery);
co.closePath();
co.clip();
this.DrawChart();
this.DrawHighlights();
co.restore();
// Draw the title
if (prop['chart.title']) {
RG.DrawTitle(this, prop['chart.title'], this.gutterTop, null, prop['chart.title.diameter'] ? prop['chart.title.diameter'] : null)
}
// Draw the key if necessary
// obj, key, colors
if (prop['chart.key']) {
RG.DrawKey(this, prop['chart.key'], prop['chart.colors']);
}
/**
* Show the context menu
*/
if (prop['chart.contextmenu']) {
RG.ShowContext(this);
}
/**
* This function enables resizing
*/
if (prop['chart.resizable']) {
RG.AllowResizing(this);
}
/**
* This installs the event listeners
*/
RG.InstallEventListeners(this);
/**
* This installs the Radar chart specific area listener
*/
if ( (prop['chart.fill.click'] || prop['chart.fill.mousemove'] || !RG.is_null(prop['chart.fill.tooltips'])) && !this.__fill_click_listeners_installed__) {
this.AddFillListeners();
this.__fill_click_listeners_installed__ = true;
}
/**
* Fire the onfirstdraw event
*/
if (this.firstDraw) {
RG.fireCustomEvent(this, 'onfirstdraw');
this.firstDraw = false;
this.firstDrawFunc();
}
/**
* Fire the RGraph ondraw event
*/
RGraph.FireCustomEvent(this, 'ondraw');
return this;
};
/**
* Draws the background circles
*/
this.drawBackground =
this.DrawBackground = function ()
{
var color = prop['chart.background.circles.color'];
var poly = prop['chart.background.circles.poly'];
var spacing = prop['chart.background.circles.spacing'];
var spokes = prop['chart.background.circles.spokes'];
// Set the linewidth for the grid (so that repeated redrawing works OK)
co.lineWidth = 1;
/**
* Draws the background circles
*/
if (prop['chart.background.circles'] && poly == false) {
// Draw the concentric circles
co.strokeStyle = color;
co.beginPath();
var numrings = typeof(prop['chart.background.circles.count']) == 'number' ? prop['chart.background.circles.count'] : prop['chart.labels.count'];
// TODO Currently set to 5 - needs changing
for (var r=0; r<=this.radius; r+=(this.radius / numrings)) {
co.moveTo(this.centerx, this.centery);
co.arc(this.centerx, this.centery,r, 0, RG.TWOPI, false);
}
co.stroke();
/**
* Draw the diagonals/spokes
*/
co.strokeStyle = color;
for (var i=0; i<360; i+=(360 / spokes)) {
co.beginPath();
co.arc(this.centerx,
this.centery,
this.radius,
(i / 360) * RG.TWOPI,
((i+0.001) / 360) * RG.TWOPI,
false); // The 0.01 avoids a bug in Chrome 6
co.lineTo(this.centerx, this.centery);
co.stroke();
}
/**
* The background"circles" are actually drawn as a poly based on how many points there are
* (ie hexagons if there are 6 points, squares if the are four etc)
*/
} else if (prop['chart.background.circles'] && poly == true) {
/**
* Draw the diagonals/spokes
*/
co.strokeStyle = color;
var increment = 360 / this.data[0].length
for (var i=0; i<360; i+=increment) {
co.beginPath();
co.arc(this.centerx,
this.centery,
this.radius,
((i / 360) * RG.TWOPI) - RG.HALFPI,
(((i + 0.001) / 360) * RG.TWOPI) - RG.HALFPI,
false); // The 0.001 avoids a bug in Chrome 6
co.lineTo(this.centerx, this.centery);
co.stroke();
}
/**
* Draw the lines that go around the Radar chart
*/
co.strokeStyle = color;
var numrings = typeof(prop['chart.background.circles.count']) == 'number' ? prop['chart.background.circles.count'] : prop['chart.labels.count'];
for (var r=0; r<=this.radius; r+=(this.radius / numrings)) {
co.beginPath();
for (var a=0; a<=360; a+=(360 / this.data[0].length)) {
co.arc(this.centerx,
this.centery,
r,
RG.degrees2Radians(a) - RG.HALFPI,
RG.degrees2Radians(a) + 0.001 - RG.HALFPI,
false);
}
co.closePath();
co.stroke();
}
}
};
/**
* Draws the axes
*/
this.drawAxes =
this.DrawAxes = function ()
{
co.strokeStyle = prop['chart.axes.color'];
var halfsize = this.radius;
co.beginPath();
/**
* The Y axis
*/
co.moveTo(Math.round(this.centerx), this.centery + this.radius);
co.lineTo(Math.round(this.centerx), this.centery - this.radius);
// Draw the bits at either end of the Y axis
co.moveTo(this.centerx - 5, Math.round(this.centery + this.radius));
co.lineTo(this.centerx + 5, Math.round(this.centery + this.radius));
co.moveTo(this.centerx - 5, Math.round(this.centery - this.radius));
co.lineTo(this.centerx + 5, Math.round(this.centery - this.radius));
// Draw Y axis tick marks
for (var y=(this.centery - this.radius); y<(this.centery + this.radius); y+=(this.radius/prop['chart.numyticks'])) {
co.moveTo(this.centerx - 3, Math.round(y));
co.lineTo(this.centerx + 3, Math.round(y));
}
/**
* The X axis
*/
co.moveTo(this.centerx - this.radius, Math.round(this.centery));
co.lineTo(this.centerx + this.radius, Math.round(this.centery));
// Draw the bits at the end of the X axis
co.moveTo(Math.round(this.centerx - this.radius), this.centery - 5);
co.lineTo(Math.round(this.centerx - this.radius), this.centery + 5);
co.moveTo(Math.round(this.centerx + this.radius), this.centery - 5);
co.lineTo(Math.round(this.centerx + this.radius), this.centery + 5);
// Draw X axis tick marks
for (var x=(this.centerx - this.radius); x<(this.centerx + this.radius); x+=(this.radius/prop['chart.numxticks'])) {
co.moveTo(Math.round(x), this.centery - 3);
co.lineTo(Math.round(x), this.centery + 3);
}
// Stroke it
co.stroke();
};
/**
* The function which actually draws the radar chart
*/
this.drawChart =
this.DrawChart = function ()
{
var alpha = prop['chart.colors.alpha'];
if (typeof(alpha) == 'number') {
var oldAlpha = co.globalAlpha;
co.globalAlpha = alpha;
}
var numDatasets = this.data.length;
for (var dataset=0; dataset<this.data.length; ++dataset) {
co.beginPath();
var coords_dataset = [];
for (var i=0; i<this.data[dataset].length; ++i) {
var coords = this.GetCoordinates(dataset, i);
if (coords_dataset == null) {
coords_dataset = [];
}
coords_dataset.push(coords);
this.coords.push(coords);
}
this.coords2[dataset] = coords_dataset;
/**
* Now go through the coords and draw the chart itself
*
* 18/5/2012 - chart.strokestyle can now be an array of colors as well as a single color
*/
co.strokeStyle = (typeof(prop['chart.strokestyle']) == 'object' && prop['chart.strokestyle'][dataset]) ? prop['chart.strokestyle'][dataset] : prop['chart.strokestyle'];
co.fillStyle = prop['chart.colors'][dataset] ? prop['chart.colors'][dataset] : 'rgba(0,0,0,0)';
if (co.fillStyle === 'transparent') {
co.fillStyle = 'rgba(0,0,0,0)';
}
co.lineWidth = prop['chart.linewidth'];
for (i=0; i<coords_dataset.length; ++i) {
if (i == 0) {
co.moveTo(coords_dataset[i][0], coords_dataset[i][1]);
} else {
co.lineTo(coords_dataset[i][0], coords_dataset[i][1]);
}
}
// If on the second or greater dataset, backtrack
if (prop['chart.accumulative'] && dataset > 0) {
// This goes back to the start coords of this particular dataset
co.lineTo(coords_dataset[0][0], coords_dataset[0][1]);
//Now move down to the end point of the previous dataset
co.moveTo(last_coords[0][0], last_coords[0][1]);
for (var i=coords_dataset.length - 1; i>=0; --i) {
co.lineTo(last_coords[i][0], last_coords[i][1]);
}
}
// This is used by the next iteration of the loop
var last_coords = coords_dataset;
co.closePath();
co.stroke();
co.fill();
}
// Reset the globalAlpha
if (typeof(alpha) == 'number') {
co.globalAlpha = oldAlpha;
}
};
/**
* Gets the coordinates for a particular mark
*
* @param number i The index of the data (ie which one it is)
* @return array A two element array of the coordinates
*/
this.getCoordinates =
this.GetCoordinates = function (dataset, index)
{
// The number of data points
var len = this.data[dataset].length;
// The magnitude of the data (NOT the x/y coords)
var mag = (this.data[dataset][index] / this.max) * this.radius;
/**
* Get the angle
*/
var angle = (RG.TWOPI / len) * index; // In radians
angle -= RG.HALFPI;
/**
* Work out the X/Y coordinates
*/
var x = Math.cos(angle) * mag;
var y = Math.sin(angle) * mag;
/**
* Put the coordinate in the right quadrant
*/
x = this.centerx + x;
y = this.centery + y;
return [x,y];
};
/**
* This function adds the labels to the chart
*/
this.drawLabels =
this.DrawLabels = function ()
{
var labels = prop['chart.labels'];
if (labels && labels.length > 0) {
co.lineWidth = 1;
co.strokeStyle = 'gray';
co.fillStyle = prop['chart.text.color'];
var bgFill = prop['chart.labels.background.fill'];
var bold = prop['chart.labels.bold'];
var bgBoxed = prop['chart.labels.boxed'];
var offset = prop['chart.labels.offset'];
var font = prop['chart.text.font'];
var size = prop['chart.text.size'];
var radius = this.radius;
for (var i=0; i<labels.length; ++i) {
var angle = (RG.TWOPI / prop['chart.labels'].length) * i;
angle -= RG.HALFPI;
var x = this.centerx + (Math.cos(angle) * (radius + offset));
var y = this.centery + (Math.sin(angle) * (radius + offset));
/**
* Horizontal alignment
*/
var halign = x < this.centerx ? 'right' : 'left' ;
if (i == 0 || (i / labels.length) == 0.5) halign = 'center';
if (labels[i] && labels[i].length) {
RG.Text2(this, {'font':font,
'size':size,
'x':x,
'y':y,
'text':labels[i],
'valign':'center',
'halign':halign,
'bounding':bgBoxed,
'boundingFill':bgFill,
'bold':bold,
'tag': 'labels'
});
}
}
}
};
/**
* Draws the circle. No arguments as it gets the information from the object properties.
*/
this.drawCircle =
this.DrawCircle = function ()
{
var circle = {};
circle.limit = prop['chart.circle'];
circle.fill = prop['chart.circle.fill'];
circle.stroke = prop['chart.circle.stroke'];
if (circle.limit) {
var r = (circle.limit / this.max) * this.radius;
co.fillStyle = circle.fill;
co.strokeStyle = circle.stroke;
co.beginPath();
co.arc(this.centerx, this.centery, r, 0, RG.TWOPI, 0);
co.fill();
co.stroke();
}
};
/**
* Unsuprisingly, draws the labels
*/
this.drawAxisLabels =
this.DrawAxisLabels = function ()
{
/**
* Draw specific axis labels
*/
if (RG.is_array(prop['chart.labels.specific']) && prop['chart.labels.specific'].length) {
this.DrawSpecificAxisLabels();
return;
}
co.lineWidth = 1;
// Set the color to black
co.fillStyle = 'black';
co.strokeStyle = 'black';
var r = this.radius;
var font = prop['chart.text.font'];
var size = typeof(prop['chart.text.size.scale']) == 'number' ? prop['chart.text.size.scale'] : prop['chart.text.size'];
var axes = prop['chart.labels.axes'].toLowerCase();
var color = 'white';
var drawzero = false;
var units_pre = prop['chart.units.pre'];
var units_post = prop['chart.units.post'];
var decimals = prop['chart.scale.decimals'];
var bold = prop['chart.labels.axes.bold'];
var boxed = prop['chart.labels.axes.boxed'];
var centerx = this.centerx;
var centery = this.centery;
var scale = this.scale;
co.fillStyle = prop['chart.text.color'];
// The "North" axis labels
if (axes.indexOf('n') > -1) {
for (var i=0; i<this.scale2.labels.length; ++i) {
RG.Text2(this, {'bold':bold[i],
'font':font,
'size':size,
'x':centerx,
'y':centery - (r * ((i+1)/this.scale2.labels.length)),
'text':this.scale2.labels[i],
'valign':'center',
'halign':'center',
'bounding':boxed[i],
'boundingFill':color,
'tag': 'scale'
});
}
drawzero = true;
}
// The "South" axis labels
if (axes.indexOf('s') > -1) {
for (var i=0; i<this.scale2.labels.length; ++i) {
RG.Text2(this, {'bold':bold[i],
'font':font,
'size':size,
'x':centerx,
'y':centery + (r * ((i+1)/this.scale2.labels.length)),
'text':this.scale2.labels[i],
'valign':'center',
'halign':'center',
'bounding':boxed[i],
'boundingFill':color,
'tag': 'scale'
});
}
drawzero = true;
}
// The "East" axis labels
if (axes.indexOf('e') > -1) {
for (var i=0; i<this.scale2.labels.length; ++i) {
RG.Text2(this, {'bold':bold[i],
'font':font,
'size':size,
'x':centerx + (r * ((i+1)/this.scale2.labels.length)),
'y':centery,
'text':this.scale2.labels[i],
'valign':'center',
'halign':'center',
'bounding':boxed[i],
'boundingFill':color,
'tag': 'scale'
});
}
drawzero = true;
}
// The "West" axis labels
if (axes.indexOf('w') > -1) {
for (var i=0; i<this.scale2.labels.length; ++i) {
RG.Text2(this, {'bold':bold[i],
'font':font,
'size':size,
'x':centerx - (r * ((i+1)/this.scale2.labels.length)),
'y':centery,
'text':this.scale2.labels[i],
'valign':'center',
'halign':'center',
'bounding':boxed[i],
'boundingFill':color,
'tag': 'scale'
});
}
drawzero = true;
}
if (drawzero) {
RG.Text2(this, {'font':font,
'size':size,
'x':centerx,
'y':centery,
'text':RG.number_format(this, Number(0).toFixed(decimals), units_pre, units_post),
'valign':'center',
'halign':'center',
'bounding':prop['chart.labels.axes.boxed.zero'],
'boundingFill':color,
'bold':prop['chart.labels.axes.bold.zero'],
'tag': 'scale'
});
}
};
/**
* Draws specific axis labels
*/
this.drawSpecificAxisLabels =
this.DrawSpecificAxisLabels = function ()
{
/**
* Specific axis labels
*/
var labels = prop['chart.labels.specific'];
var bold = RG.array_pad(prop['chart.labels.axes.bold'],labels.length);
var boxed = RG.array_pad(prop['chart.labels.axes.boxed'],labels.length);
var reversed_labels = RG.array_reverse(labels);
var reversed_bold = RG.array_reverse(bold);
var reversed_boxed = RG.array_reverse(boxed);
var font = prop['chart.text.font'];
var size = typeof(prop['chart.text.size.scale']) == 'number' ? prop['chart.text.size.scale'] : prop['chart.text.size'];
var axes = prop['chart.labels.axes'].toLowerCase();
co.fillStyle = prop['chart.text.color'];
for (var i=0; i<labels.length; ++i) {
if (axes.indexOf('n') > -1) RG.Text2(this, {'tag': 'labels.specific', 'bold':reversed_bold[i],'font':font,'size':size,'x':this.centerx,'y':this.centery - this.radius + ((this.radius / labels.length) * i),'text':reversed_labels[i],'valign':'center','halign':'center','bounding':reversed_boxed[i],'boundingFill':'white'});
if (axes.indexOf('s') > -1) RG.Text2(this, {'tag': 'labels.specific', 'bold':bold[i],'font':font,'size':size,'x':this.centerx,'y':this.centery + ((this.radius / labels.length) * (i+1)),'text':labels[i],'valign':'center','halign':'center','bounding':boxed[i],'boundingFill':'white'});
if (axes.indexOf('w') > -1) RG.Text2(this, {'tag': 'labels.specific', 'bold':reversed_bold[i],'font':font,'size':size,'x':this.centerx - this.radius + ((this.radius / labels.length) * i),'y':this.centery,'text':reversed_labels[i],'valign':'center','halign':'center','bounding':reversed_boxed[i],'boundingFill':'white'});
if (axes.indexOf('e') > -1) RG.Text2(this, {'tag': 'labels.specific', 'bold':bold[i],'font':font,'size':size,'x':this.centerx + ((this.radius / labels.length) * (i+1)),'y':this.centery,'text':labels[i],'valign':'center','halign':'center','bounding':boxed[i],'boundingFill':'white'});
}
};
/**
* This method eases getting the focussed point (if any)
*
* @param event e The event object
*/
this.getShape =
this.getPoint = function (e)
{
for (var i=0; i<this.coords.length; ++i) {
var x = this.coords[i][0];
var y = this.coords[i][1];
var tooltips = prop['chart.tooltips'];
var index = Number(i);
var mouseXY = RG.getMouseXY(e);
var mouseX = mouseXY[0];
var mouseY = mouseXY[1];
if ( mouseX < (x + 5)
&& mouseX > (x - 5)
&& mouseY > (y - 5)
&& mouseY < (y + 5)
) {
var tooltip = RG.parseTooltipText(prop['chart.tooltips'], index);
return {0: this, 'object': this,
1: x, 'x': x,
2: y, 'y': y,
3: null, 'dataset': null,
4: index, 'index': i,
'tooltip': tooltip
}
}
}
};
/**
* Each object type has its own Highlight() function which highlights the appropriate shape
*
* @param object shape The shape to highlight
*/
this.highlight =
this.Highlight = function (shape)
{
// Add the new highlight
RG.Highlight.Point(this, shape);
};
/**
* The getObjectByXY() worker method. Don't call this call:
*
* RGraph.ObjectRegistry.getObjectByXY(e)
*
* @param object e The event object
*/
this.getObjectByXY = function (e)
{
var mouseXY = RG.getMouseXY(e);
if (
mouseXY[0] > (this.centerx - this.radius)
&& mouseXY[0] < (this.centerx + this.radius)
&& mouseXY[1] > (this.centery - this.radius)
&& mouseXY[1] < (this.centery + this.radius)
) {
return this;
}
};
/**
* This function positions a tooltip when it is displayed
*
* @param obj object The chart object
* @param int x The X coordinate specified for the tooltip
* @param int y The Y coordinate specified for the tooltip
* @param objec tooltip The tooltips DIV element
*/
this.positionTooltip = function (obj, x, y, tooltip, idx)
{
var dataset = tooltip.__dataset__;
var index = tooltip.__index__;
var coordX = this.coords[index][0];
var coordY = this.coords[index][1];
var canvasXY = RG.getCanvasXY(obj.canvas);
var gutterLeft = this.gutterLeft;
var gutterTop = this.gutterTop;
var width = tooltip.offsetWidth;
// Set the top position
tooltip.style.left = 0;
tooltip.style.top = parseInt(tooltip.style.top) - 9 + 'px';
// By default any overflow is hidden
tooltip.style.overflow = '';
// The arrow
var img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAFCAYAAACjKgd3AAAARUlEQVQYV2NkQAN79+797+RkhC4M5+/bd47B2dmZEVkBCgcmgcsgbAaA9GA1BCSBbhAuA/AagmwQPgMIGgIzCD0M0AMMAEFVIAa6UQgcAAAAAElFTkSuQmCC';
img.style.position = 'absolute';
img.id = '__rgraph_tooltip_pointer__';
img.style.top = (tooltip.offsetHeight - 2) + 'px';
tooltip.appendChild(img);
// Reposition the tooltip if at the edges:
// LEFT edge
if ((canvasXY[0] + coordX - (width / 2)) < 10) {
tooltip.style.left = (canvasXY[0] + coordX - (width * 0.1)) + 'px';
img.style.left = ((width * 0.1) - 8.5) + 'px';
// RIGHT edge
} else if ((canvasXY[0] + coordX + (width / 2)) > doc.body.offsetWidth) {
tooltip.style.left = canvasXY[0] + coordX - (width * 0.9) + 'px';
img.style.left = ((width * 0.9) - 8.5) + 'px';
// Default positioning - CENTERED
} else {
tooltip.style.left = (canvasXY[0] + coordX - (width * 0.5)) + 'px';
img.style.left = ((width * 0.5) - 8.5) + 'px';
}
};
/**
* This draws highlights on the points
*/
this.drawHighlights =
this.DrawHighlights = function ()
{
if (prop['chart.highlights']) {
var sequentialIdx = 0;
var dataset = 0;
var index = 0;
var radius = prop['chart.highlights.radius'];
for (var dataset=0; dataset <this.data.length; ++dataset) {
for (var index=0; index<this.data[dataset].length; ++index) {
co.beginPath();
co.strokeStyle = prop['chart.highlights.stroke'];
co.fillStyle = prop['chart.highlights.fill'] ? prop['chart.highlights.fill'] : ((typeof(prop['chart.strokestyle']) == 'object' && prop['chart.strokestyle'][dataset]) ? prop['chart.strokestyle'][dataset] : prop['chart.strokestyle']);
co.arc(this.coords[sequentialIdx][0], this.coords[sequentialIdx][1], radius, 0, RG.TWOPI, false);
co.stroke();
co.fill();
++sequentialIdx;
}
}
}
};
/**
* This function returns the radius (ie the distance from the center) for a particular
* value