Context Navigation

source: Dev/trunk/RGraph/libraries/RGraph.pie.js @ 167

Last change on this file since 167 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 33.8 KB

Rev	Line
[77]	1	/**
	2	* o------------------------------------------------------------------------------o
	3	* \| This file is part of the RGraph package - you can learn more at: \|
	4	* \| \|
	5	* \| http://www.rgraph.net \|
	6	* \| \|
	7	* \| This package is licensed under the RGraph license. For all kinds of business \|
	8	* \| purposes there is a small one-time licensing fee to pay and for non \|
	9	* \| commercial purposes it is free to use. You can read the full license here: \|
	10	* \| \|
	11	* \| http://www.rgraph.net/LICENSE.txt \|
	12	* o------------------------------------------------------------------------------o
	13	*/
	14
	15	if (typeof(RGraph) == 'undefined') RGraph = {};
	16
	17	/**
	18	* The pie chart constructor
	19	*
	20	* @param data array The data to be represented on the pie chart
	21	*/
	22	RGraph.Pie = function (id, data)
	23	{
	24	this.id = id;
	25	this.canvas = document.getElementById(id);
	26	this.context = this.canvas.getContext("2d");
	27	this.canvas.__object__ = this;
	28	this.total = 0;
	29	this.subTotal = 0;
	30	this.angles = [];
	31	this.data = data;
	32	this.properties = [];
	33	this.type = 'pie';
	34	this.isRGraph = true;
	35
	36
	37	/**
	38	* Compatibility with older browsers
	39	*/
	40	RGraph.OldBrowserCompat(this.context);
	41
	42	this.properties = {
	43	'chart.colors': ['rgb(255,0,0)', '#ddd', 'rgb(0,255,0)', 'rgb(0,0,255)', 'pink', 'yellow', '#000'],
	44	'chart.strokestyle': '#999',
	45	'chart.linewidth': 1,
	46	'chart.labels': [],
	47	'chart.labels.sticks': false,
	48	'chart.labels.sticks.color': '#aaa',
	49	'chart.segments': [],
	50	'chart.gutter.left': 25,
	51	'chart.gutter.right': 25,
	52	'chart.gutter.top': 25,
	53	'chart.gutter.bottom': 25,
	54	'chart.title': '',
	55	'chart.title.background': null,
	56	'chart.title.hpos': null,
	57	'chart.title.vpos': null,
	58	'chart.shadow': false,
	59	'chart.shadow.color': 'rgba(0,0,0,0.5)',
	60	'chart.shadow.offsetx': 3,
	61	'chart.shadow.offsety': 3,
	62	'chart.shadow.blur': 3,
	63	'chart.text.size': 10,
	64	'chart.text.color': 'black',
	65	'chart.text.font': 'Verdana',
	66	'chart.contextmenu': null,
	67	'chart.tooltips': [],
	68	'chart.tooltips.event': 'onclick',
	69	'chart.tooltips.effect': 'fade',
	70	'chart.tooltips.css.class': 'RGraph_tooltip',
	71	'chart.tooltips.highlight': true,
	72	'chart.highlight.style': '3d',
	73	'chart.highlight.style.2d.fill': 'rgba(255,255,255,0.5)',
	74	'chart.highlight.style.2d.stroke': 'rgba(255,255,255,0)',
	75	'chart.radius': null,
	76	'chart.border': false,
	77	'chart.border.color': 'rgba(255,255,255,0.5)',
	78	'chart.key': null,
	79	'chart.key.background': 'white',
	80	'chart.key.position': 'graph',
	81	'chart.key.halign': 'right',
	82	'chart.key.shadow': false,
	83	'chart.key.shadow.color': '#666',
	84	'chart.key.shadow.blur': 3,
	85	'chart.key.shadow.offsetx': 2,
	86	'chart.key.shadow.offsety': 2,
	87	'chart.key.position.gutter.boxed': true,
	88	'chart.key.position.x': null,
	89	'chart.key.position.y': null,
	90	'chart.key.color.shape': 'square',
	91	'chart.key.rounded': true,
	92	'chart.key.linewidth': 1,
	93	'chart.annotatable': false,
	94	'chart.annotate.color': 'black',
	95	'chart.align': 'center',
	96	'chart.zoom.factor': 1.5,
	97	'chart.zoom.fade.in': true,
	98	'chart.zoom.fade.out': true,
	99	'chart.zoom.hdir': 'right',
	100	'chart.zoom.vdir': 'down',
	101	'chart.zoom.frames': 10,
	102	'chart.zoom.delay': 50,
	103	'chart.zoom.shadow': true,
	104	'chart.zoom.mode': 'canvas',
	105	'chart.zoom.thumbnail.width': 75,
	106	'chart.zoom.thumbnail.height': 75,
	107	'chart.zoom.background': true,
	108	'chart.zoom.action': 'zoom',
	109	'chart.resizable': false,
	110	'chart.resize.handle.adjust': [0,0],
	111	'chart.resize.handle.background': null,
	112	'chart.variant': 'pie',
	113	'chart.variant.donut.color': 'white',
	114	'chart.exploded': []
	115	}
	116
	117	/**
	118	* Calculate the total
	119	*/
	120	for (var i=0,len=data.length; i<len; i++) {
	121	this.total += data[i];
	122	}
	123
	124
	125	/**
	126	* Set the .getShape commonly named method
	127	*/
	128	this.getShape = this.getSegment;
	129	}
	130
	131
	132	/**
	133	* A generic setter
	134	*/
	135	RGraph.Pie.prototype.Set = function (name, value)
	136	{
	137	if (name == 'chart.highlight.style.2d.color') {
	138	name = 'chart.highlight.style.2d.fill';
	139	}
	140
	141	this.properties[name] = value;
	142	}
	143
	144
	145	/**
	146	* A generic getter
	147	*/
	148	RGraph.Pie.prototype.Get = function (name)
	149	{
	150	if (name == 'chart.highlight.style.2d.color') {
	151	name = 'chart.highlight.style.2d.fill';
	152	}
	153
	154	return this.properties[name];
	155	}
	156
	157
	158	/**
	159	* This draws the pie chart
	160	*/
	161	RGraph.Pie.prototype.Draw = function ()
	162	{
	163	/**
	164	* Fire the onbeforedraw event
	165	*/
	166	RGraph.FireCustomEvent(this, 'onbeforedraw');
	167
	168
	169	/**
	170	* This bit of code converts chart.exploded from an integer to an array
	171	* that consists of that value, repeated n times, where n is equal to
	172	* the number of segments that you have
	173	*/
	174	var explosion = this.Get('chart.exploded');
	175	if (typeof(explosion) == 'number') {
	176	this.Set('chart.exploded', RGraph.array_pad([], this.data.length, explosion));
	177	}
	178
	179	/**
	180	* This is new in May 2011 and facilitates indiviual gutter settings,
	181	* eg chart.gutter.left
	182	*/
	183	this.gutterLeft = this.Get('chart.gutter.left');
	184	this.gutterRight = this.Get('chart.gutter.right');
	185	this.gutterTop = this.Get('chart.gutter.top');
	186	this.gutterBottom = this.Get('chart.gutter.bottom');
	187
	188	/**
	189	* Reset this to an empty array
	190	*/
	191	this.Set('chart.segments', []);
	192
	193	/**
	194	* Clear all of this canvases event handlers (the ones installed by RGraph)
	195	*/
	196	RGraph.ClearEventListeners(this.id);
	197
	198
	199	this.diameter = Math.min(RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom, RGraph.GetWidth(this)) - this.gutterLeft - this.gutterRight;
	200	this.radius = this.Get('chart.radius') ? this.Get('chart.radius') : this.diameter / 2;
	201	// this.centerx now defined below
	202	this.centery = ((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop;
	203	this.subTotal = 0;
	204	this.angles = [];
	205
	206	/**
	207	* Alignment (Pie is center aligned by default) Only if centerx is not defined - donut defines the centerx
	208	*/
	209	if (this.Get('chart.align') == 'left') {
	210	this.centerx = this.radius + this.gutterLeft;
	211
	212	} else if (this.Get('chart.align') == 'right') {
	213	this.centerx = RGraph.GetWidth(this) - this.radius - this.gutterRight;
	214
	215	} else {
	216	this.centerx = RGraph.GetWidth(this) / 2;
	217	}
	218
	219	/**
	220	* Draw the shadow if required
	221	*/
	222	if (this.Get('chart.shadow') && 0) {
	223
	224	var offsetx = document.all ? this.Get('chart.shadow.offsetx') : 0;
	225	var offsety = document.all ? this.Get('chart.shadow.offsety') : 0;
	226
	227	this.context.beginPath();
	228	this.context.fillStyle = this.Get('chart.shadow.color');
	229
	230	this.context.shadowColor = this.Get('chart.shadow.color');
	231	this.context.shadowBlur = this.Get('chart.shadow.blur');
	232	this.context.shadowOffsetX = this.Get('chart.shadow.offsetx');
	233	this.context.shadowOffsetY = this.Get('chart.shadow.offsety');
	234
	235	this.context.arc(this.centerx + offsetx, this.centery + offsety, this.radius, 0, 6.28, 0);
	236
	237	this.context.fill();
	238
	239	// Now turn off the shadow
	240	RGraph.NoShadow(this);
	241	}
	242
	243	/**
	244	* The total of the array of values
	245	*/
	246	this.total = RGraph.array_sum(this.data);
	247
	248	for (var i=0,len=this.data.length; i<len; i++) {
	249	var angle = (this.data[i] / this.total) * 360;
	250
	251	// Draw the segment
	252	this.DrawSegment(angle,this.Get('chart.colors')[i],i == (this.data.length - 1), i);
	253	}
	254
	255	RGraph.NoShadow(this);
	256
	257
	258	/**
	259	* Redraw the seperating lines
	260	*/
	261	this.DrawBorders();
	262
	263	/**
	264	* Now draw the segments again with shadow turned off. This is always performed,
	265	* not just if the shadow is on.
	266	*/
	267	for (var i=0; i<this.angles.length; i++) {
	268
	269	this.context.beginPath();
	270	this.context.strokeStyle = this.Get('chart.strokestyle');
	271	this.context.fillStyle = this.Get('chart.colors')[i];
	272	this.context.moveTo(this.angles[i][2], this.angles[i][3]);
	273	this.context.arc(this.angles[i][2], this.angles[i][3], this.radius, this.angles[i][0] / 57.3, this.angles[i][1] / 57.3, false);
	274	this.context.lineTo(this.angles[i][2], this.angles[i][3]);
	275	this.context.closePath();
	276	this.context.fill();
	277	this.context.stroke();
	278	}
	279
	280	/**
	281	* Draw label sticks
	282	*/
	283	if (this.Get('chart.labels.sticks')) {
	284	this.DrawSticks();
	285
	286	// Redraw the border going around the Pie chart if the stroke style is NOT white
	287	if (
	288	this.Get('chart.strokestyle') != 'white'
	289	&& this.Get('chart.strokestyle') != '#fff'
	290	&& this.Get('chart.strokestyle') != '#fffffff'
	291	&& this.Get('chart.strokestyle') != 'rgb(255,255,255)'
	292	&& this.Get('chart.strokestyle') != 'rgba(255,255,255,0)'
	293	) {
	294
	295	// Again (?)
	296	this.DrawBorders();
	297	}
	298	}
	299
	300	/**
	301	* Draw the labels
	302	*/
	303	this.DrawLabels();
	304
	305	/**
	306	* Draw the title
	307	*/
	308	if (this.Get('chart.align') == 'left') {
	309	var centerx = this.radius + this.Get('chart.gutter.left');
	310
	311	} else if (this.Get('chart.align') == 'right') {
	312	var centerx = RGraph.GetWidth(this) - (this.radius + this.gutterRight);
	313
	314	} else {
	315	var centerx = null;
	316	}
	317
	318	RGraph.DrawTitle(this.canvas, this.Get('chart.title'), (this.canvas.height / 2) - this.radius - 5, centerx, this.Get('chart.text.size') + 2);
	319
	320
	321	/**
	322	* Setup the context menu if required
	323	*/
	324	if (this.Get('chart.contextmenu')) {
	325	RGraph.ShowContext(this);
	326	}
	327
	328	/**
	329	* Tooltips
	330	*/
	331	if (this.Get('chart.tooltips').length) {
	332
	333	/**
	334	* Register this object for redrawing
	335	*/
	336	RGraph.Register(this);
	337
	338	/**
	339	* The onclick event
	340	*/
	341	//this.canvas.onclick = function (e)
	342	var canvas_onclick_func = function (e)
	343	{
	344	RGraph.HideZoomedCanvas();
	345
	346	e = RGraph.FixEventObject(e);
	347
	348	var mouseCoords = RGraph.getMouseXY(e);
	349
	350	var canvas = e.target;
	351	var context = canvas.getContext('2d');
	352	var obj = e.target.__object__;
	353
	354
	355
	356	/**
	357	* If it's actually a donut make sure the hyp is bigger
	358	* than the size of the hole in the middle
	359	*/
	360	if (obj.Get('chart.variant') == 'donut' && Math.abs(hyp) < (obj.radius / 2)) {
	361	return;
	362	}
	363
	364	/**
	365	* The angles for each segment are stored in "angles",
	366	* so go through that checking if the mouse position corresponds
	367	*/
	368	var isDonut = obj.Get('chart.variant') == 'donut';
	369	var hStyle = obj.Get('chart.highlight.style');
	370	var segment = obj.getSegment(e);
	371
	372	if (segment) {
	373
	374	var x = mouseCoords[0] - segment[0];
	375	var y = mouseCoords[1] - segment[1];
	376	var theta = Math.atan(y / x); // RADIANS
	377	var hyp = y / Math.sin(theta);
	378
	379
	380	if (RGraph.Registry.Get('chart.tooltip') && segment[5] == RGraph.Registry.Get('chart.tooltip').__index__) {
	381	return;
	382	} else {
	383	RGraph.Redraw();
	384	}
	385
	386
	387	if (isDonut \|\| hStyle == '2d') {
	388
	389	context.beginPath();
	390
	391	context.strokeStyle = obj.Get('chart.highlight.style.2d.stroke');
	392	context.fillStyle = obj.Get('chart.highlight.style.2d.fill');
	393
	394	//context.moveTo(obj.centerx, obj.centery);
	395
	396	context.moveTo(segment[0], segment[1]);
	397	context.arc(segment[0], segment[1], segment[2], RGraph.degrees2Radians(obj.angles[segment[5]][0]), RGraph.degrees2Radians(obj.angles[segment[5]][1]), 0);
	398	context.lineTo(segment[0], segment[1]);
	399	context.closePath();
	400
	401	context.stroke();
	402	context.fill();
	403
	404	//Removed 7th December 2010
	405	//context.stroke();
	406
	407	} else if (hStyle == 'explode') {
	408
	409	var exploded = [];
	410
	411	exploded[segment[5]] = 0;
	412
	413	RGraph.Registry.Set('chart.pie.exploded', obj);
	414
	415	setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 25);
	416	setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 50);
	417	setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 75);
	418	setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 100);
	419	setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 125);
	420
	421	setTimeout(function () {RGraph.Registry.Get('chart.pie.exploded').Set('chart.exploded', []);}, 150);
	422
	423	} else {
	424
	425	context.lineWidth = 2;
	426
	427	/**
	428	* Draw a white segment where the one that has been clicked on was
	429	*/
	430	context.fillStyle = 'white';
	431	context.strokeStyle = 'white';
	432	context.beginPath();
	433	context.moveTo(segment[0], segment[1]);
	434	context.arc(segment[0], segment[1], segment[2], obj.angles[segment[5]][0] / 57.3, obj.angles[segment[5]][1] / 57.3, 0);
	435	context.stroke();
	436	context.fill();
	437
	438	context.lineWidth = 1;
	439
	440	context.shadowColor = '#666';
	441	context.shadowBlur = 3;
	442	context.shadowOffsetX = 3;
	443	context.shadowOffsetY = 3;
	444
	445	// Draw the new segment
	446	context.beginPath();
	447	context.fillStyle = obj.Get('chart.colors')[segment[5]];
	448	context.strokeStyle = obj.Get('chart.strokestyle');
	449	context.moveTo(segment[0] - 3, segment[1] - 3);
	450	context.arc(segment[0] - 3, segment[1] - 3, segment[2], RGraph.degrees2Radians(obj.angles[segment[5]][0]), RGraph.degrees2Radians(obj.angles[segment[5]][1]), 0);
	451	context.lineTo(segment[0] - 3, segment[1] - 3);
	452	context.closePath();
	453
	454	context.stroke();
	455	context.fill();
	456
	457	// Turn off the shadow
	458	RGraph.NoShadow(obj);
	459
	460	/**
	461	* If a border is defined, redraw that
	462	*/
	463	if (obj.Get('chart.border')) {
	464	context.beginPath();
	465	context.strokeStyle = obj.Get('chart.border.color');
	466	context.lineWidth = 5;
	467	context.arc(segment[0] - 3, segment[1] - 3, obj.radius - 2, RGraph.degrees2Radians(obj.angles[i][0]), RGraph.degrees2Radians(obj.angles[i][1]), 0);
	468	context.stroke();
	469	}
	470	}
	471
	472	/**
	473	* If a tooltip is defined, show it
	474	*/
	475
	476	/**
	477	* Get the tooltip text
	478	*/
	479	if (typeof(obj.Get('chart.tooltips')) == 'function') {
	480	var text = String(obj.Get('chart.tooltips')(segment[5]));
	481
	482	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[segment[5]]) == 'function') {
	483	var text = String(obj.Get('chart.tooltips')[segment[5]](segment[5]));
	484
	485	} else if (typeof(obj.Get('chart.tooltips')) == 'object') {
	486	var text = String(obj.Get('chart.tooltips')[segment[5]]);
	487
	488	} else {
	489	var text = '';
	490	}
	491
	492	if (text) {
	493	RGraph.Tooltip(canvas, text, e.pageX, e.pageY, segment[5]);
	494	}
	495
	496	/**
	497	* Need to redraw the key?
	498	*/
	499	if (obj.Get('chart.key') && obj.Get('chart.key').length && obj.Get('chart.key.position') == 'graph') {
	500	RGraph.DrawKey(obj, obj.Get('chart.key'), obj.Get('chart.colors'));
	501	}
	502
	503	e.stopPropagation();
	504
	505	return;
	506	} else if (obj.Get('chart.tooltips.event') == 'onclick') {
	507	RGraph.Redraw();
	508	}
	509	}
	510	var event_name = this.Get('chart.tooltips.event') == 'onmousemove' ? 'mousemove' : 'click';
	511
	512	this.canvas.addEventListener(event_name, canvas_onclick_func, false);
	513	RGraph.AddEventListener(this.id, event_name, canvas_onclick_func);
	514
	515
	516
	517
	518
	519
	520	/**
	521	* The onmousemove event for changing the cursor
	522	*/
	523	//this.canvas.onmousemove = function (e)
	524	var canvas_onmousemove_func = function (e)
	525	{
	526	RGraph.HideZoomedCanvas();
	527
	528	e = RGraph.FixEventObject(e);
	529
	530	var obj = e.target.__object__;
	531	var segment = obj.getSegment(e);
	532
	533	if (segment) {
	534	e.target.style.cursor = 'pointer';
	535
	536	return;
	537	}
	538
	539	/**
	540	* Put the cursor back to null
	541	*/
	542	e.target.style.cursor = 'default';
	543	}
	544	this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
	545	RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
	546
	547
	548
	549
	550
	551
	552
	553
	554
	555	/**
	556	* The window onclick function
	557	*/
	558	var window_onclick_func = function (e)
	559	{
	560	RGraph.HideZoomedCanvas();
	561
	562	e = RGraph.FixEventObject(e);
	563
	564	RGraph.Redraw();
	565
	566	/**
	567	* Put the cursor back to null
	568	*/
	569	e.target.style.cursor = 'default';
	570	}
	571	window.addEventListener('click', window_onclick_func, false);
	572	RGraph.AddEventListener('window_' + this.id, 'click', window_onclick_func);
	573	}
	574
	575
	576	/**
	577	* If a border is pecified, draw it
	578	*/
	579	if (this.Get('chart.border')) {
	580	this.context.beginPath();
	581	this.context.lineWidth = 5;
	582	this.context.strokeStyle = this.Get('chart.border.color');
	583
	584	this.context.arc(this.centerx,
	585	this.centery,
	586	this.radius - 2,
	587	0,
	588	6.28,
	589	0);
	590
	591	this.context.stroke();
	592	}
	593
	594	/**
	595	* Draw the kay if desired
	596	*/
	597	if (this.Get('chart.key') != null) {
	598	//this.Set('chart.key.position', 'graph');
	599	RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors'));
	600	}
	601
	602
	603	/**
	604	* If this is actually a donut, draw a big circle in the middle
	605	*/
	606	if (this.Get('chart.variant') == 'donut') {
	607	this.context.beginPath();
	608	this.context.strokeStyle = this.Get('chart.strokestyle');
	609	this.context.fillStyle = this.Get('chart.variant.donut.color');
	610	this.context.arc(this.centerx, this.centery, this.radius / 2, 0, 6.28, 0);
	611	this.context.stroke();
	612	this.context.fill();
	613	}
	614
	615	RGraph.NoShadow(this);
	616
	617	/**
	618	* If the canvas is annotatable, do install the event handlers
	619	*/
	620	if (this.Get('chart.annotatable')) {
	621	RGraph.Annotate(this);
	622	}
	623
	624	/**
	625	* This bit shows the mini zoom window if requested
	626	*/
	627	if (this.Get('chart.zoom.mode') == 'thumbnail' \|\| this.Get('chart.zoom.mode') == 'area') {
	628	RGraph.ShowZoomWindow(this);
	629	}
	630
	631
	632	/**
	633	* This function enables resizing
	634	*/
	635	if (this.Get('chart.resizable')) {
	636	RGraph.AllowResizing(this);
	637	}
	638
	639	/**
	640	* Fire the RGraph ondraw event
	641	*/
	642	RGraph.FireCustomEvent(this, 'ondraw');
	643	}
	644
	645
	646	/**
	647	* Draws a single segment of the pie chart
	648	*
	649	* @param int degrees The number of degrees for this segment
	650	*/
	651	RGraph.Pie.prototype.DrawSegment = function (degrees, color, last, index)
	652	{
	653	var context = this.context;
	654	var canvas = this.canvas;
	655	var subTotal = this.subTotal;
	656
	657	context.beginPath();
	658
	659	context.fillStyle = color;
	660	context.strokeStyle = this.Get('chart.strokestyle');
	661	context.lineWidth = 0;
	662
	663	if (this.Get('chart.shadow')) {
	664	RGraph.SetShadow(this, this.Get('chart.shadow.color'),this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur'));
	665	}
	666
	667	/**
	668	* Exploded segments
	669	*/
	670	if ( (typeof(this.Get('chart.exploded')) == 'object' && this.Get('chart.exploded')[index] > 0)) {
	671	var explosion = this.Get('chart.exploded')[index];
	672	var x = 0;
	673	var y = 0;
	674	var h = explosion;
	675	var t = (subTotal + (degrees / 2)) / (360/6.2830);
	676	var x = (Math.cos(t) * explosion);
	677	var y = (Math.sin(t) * explosion);
	678
	679	this.context.moveTo(this.centerx + x, this.centery + y);
	680	} else {
	681	var x = 0;
	682	var y = 0;
	683	}
	684
	685	context.arc(this.centerx + x,
	686	this.centery + y,
	687	this.radius,
	688	subTotal / 57.3,
	689	(last ? 360 : subTotal + degrees) / 57.3,
	690	0);
	691
	692	context.lineTo(this.centerx + x, this.centery + y);
	693
	694	// Keep hold of the angles
	695	this.angles.push([subTotal, subTotal + degrees, this.centerx + x, this.centery + y])
	696	this.context.closePath();
	697
	698
	699
	700	//this.context.stroke();
	701	this.context.fill();
	702
	703	/**
	704	* Calculate the segment angle
	705	*/
	706	this.Get('chart.segments').push([subTotal, subTotal + degrees]);
	707	this.subTotal += degrees;
	708	}
	709
	710	/**
	711	* Draws the graphs labels
	712	*/
	713	RGraph.Pie.prototype.DrawLabels = function ()
	714	{
	715	var hAlignment = 'left';
	716	var vAlignment = 'center';
	717	var labels = this.Get('chart.labels');
	718	var context = this.context;
	719
	720	/**
	721	* Turn the shadow off
	722	*/
	723	RGraph.NoShadow(this);
	724
	725	context.fillStyle = 'black';
	726	context.beginPath();
	727
	728	/**
	729	* Draw the key (ie. the labels)
	730	*/
	731	if (labels && labels.length) {
	732
	733	var text_size = this.Get('chart.text.size');
	734
	735	for (i=0; i<labels.length; ++i) {
	736
	737	/**
	738	* T\|his ensures that if we're given too many labels, that we don't get an error
	739	*/
	740	if (typeof(this.Get('chart.segments')[i]) == 'undefined') {
	741	continue;
	742	}
	743
	744	// Move to the centre
	745	context.moveTo(this.centerx,this.centery);
	746
	747	var a = this.Get('chart.segments')[i][0] + ((this.Get('chart.segments')[i][1] - this.Get('chart.segments')[i][0]) / 2);
	748
	749	/**
	750	* Alignment
	751	*/
	752	if (a < 90) {
	753	hAlignment = 'left';
	754	vAlignment = 'center';
	755	} else if (a < 180) {
	756	hAlignment = 'right';
	757	vAlignment = 'center';
	758	} else if (a < 270) {
	759	hAlignment = 'right';
	760	vAlignment = 'center';
	761	} else if (a < 360) {
	762	hAlignment = 'left';
	763	vAlignment = 'center';
	764	}
	765
	766
	767	/**
	768	* Handle the additional "explosion" offset
	769	*/
	770	if (typeof(this.Get('chart.exploded')) == 'object' && this.Get('chart.exploded')[i]) {
	771
	772	var t = ((this.angles[i][1] - this.angles[i][0]) / 2) / (360/6.2830);
	773	var seperation = this.Get('chart.exploded')[i];
	774	var angle = ((this.angles[i][1] - this.angles[i][0]) / 2) + this.angles[i][0];
	775
	776	// Adjust the angles
	777	var explosion_offsetx = (Math.cos(angle / 57.29) * seperation);
	778	var explosion_offsety = (Math.sin(angle / 57.29) * seperation);
	779	} else {
	780	var explosion_offsetx = 0;
	781	var explosion_offsety = 0;
	782	}
	783
	784	context.fillStyle = this.Get('chart.text.color');
	785
	786	RGraph.Text(context,
	787	this.Get('chart.text.font'),
	788	text_size,
	789	this.centerx + explosion_offsetx + ((this.radius + 10)* Math.cos(a / 57.3)) + (this.Get('chart.labels.sticks') ? (a < 90 \|\| a > 270 ? 2 : -2) : 0),
	790	this.centery + explosion_offsety + (((this.radius + 10) * Math.sin(a / 57.3))),
	791	labels[i],
	792	vAlignment,
	793	hAlignment);
	794	}
	795
	796	context.fill();
	797	}
	798	}
	799
	800
	801	/**
	802	* This function draws the pie chart sticks (for the labels)
	803	*/
	804	RGraph.Pie.prototype.DrawSticks = function ()
	805	{
	806	var context = this.context;
	807	var segments = this.Get('chart.segments');
	808	var offset = this.Get('chart.linewidth') / 2;
	809	var exploded = this.Get('chart.exploded');
	810	var sticks = this.Get('chart.labels.sticks');
	811
	812	for (var i=0; i<segments.length; ++i) {
	813
	814	// This allows the chart.labels.sticks to be an array as well as a boolean
	815	if (typeof(sticks) == 'object' && !sticks[i]) {
	816	continue;
	817	}
	818
	819	var degrees = segments[i][1] - segments[i][0];
	820
	821	context.beginPath();
	822	context.strokeStyle = this.Get('chart.labels.sticks.color');
	823	context.lineWidth = 1;
	824
	825	var midpoint = (segments[i][0] + (degrees / 2)) / 57.3;
	826
	827	if (exploded && exploded[i]) {
	828	var extra = exploded[i];
	829	} else {
	830	var extra = 0;
	831	}
	832
	833	context.lineJoin = 'round';
	834	context.lineWidth = 1;
	835
	836	context.arc(this.centerx,
	837	this.centery,
	838	this.radius + 7 + extra,
	839	midpoint,
	840	midpoint + 0.01,
	841	0);
	842
	843	context.arc(this.centerx,
	844	this.centery,
	845	this.radius - offset + extra,
	846	midpoint,
	847	midpoint + 0.01,
	848	0);
	849
	850	context.stroke();
	851	}
	852	}
	853
	854
	855	/**
	856	* The (now Pie chart specific) getSegment function
	857	*
	858	* @param object e The event object
	859	*/
	860	RGraph.Pie.prototype.getSegment = function (e)
	861	{
	862	RGraph.FixEventObject(e);
	863
	864	// The optional arg provides a way of allowing some accuracy (pixels)
	865	var accuracy = arguments[1] ? arguments[1] : 0;
	866
	867	var obj = e.target.__object__;
	868	var canvas = obj.canvas;
	869	var context = obj.context;
	870	var mouseCoords = RGraph.getMouseXY(e);
	871	var r = obj.radius;
	872	var angles = obj.angles;
	873	var ret = [];
	874
	875	for (var i=0; i<angles.length; ++i) {
	876
	877	var x = mouseCoords[0] - angles[i][2];
	878	var y = mouseCoords[1] - angles[i][3];
	879	var theta = Math.atan(y / x); // RADIANS
	880	var hyp = y / Math.sin(theta);
	881	var hyp = (hyp < 0) ? hyp + accuracy : hyp - accuracy;
	882	// Put theta in DEGREES
	883	theta *= 57.3
	884
	885	/**
	886	* Account for the correct quadrant
	887	*/
	888	if (x < 0 && y >= 0) {
	889	theta += 180;
	890	} else if (x < 0 && y < 0) {
	891	theta += 180;
	892	} else if (x > 0 && y < 0) {
	893	theta += 360;
	894	}
	895
	896	if (theta > 360) {
	897	theta -= 360;
	898	}
	899
	900	if (theta >= angles[i][0] && theta < angles[i][1]) {
	901
	902	hyp = Math.abs(hyp);
	903
	904	if (!hyp \|\| (obj.radius && hyp > obj.radius) ) {
	905	return null;
	906	}
	907
	908	if (obj.type == 'pie' && obj.Get('chart.variant') == 'donut' && (hyp > obj.radius \|\| hyp < (obj.radius / 2) ) ) {
	909	return null;
	910	}
	911
	912	ret[0] = angles[i][2];
	913	ret[1] = angles[i][3];
	914	ret[2] = (obj.type == 'rose') ? angles[i][2] : obj.radius;
	915	ret[3] = angles[i][0];
	916	ret[4] = angles[i][1];
	917	ret[5] = i;
	918
	919
	920
	921	if (ret[3] < 0) ret[3] += 360;
	922	if (ret[4] > 360) ret[4] -= 360;
	923
	924	return ret;
	925	}
	926	}
	927
	928	return null;
	929	}
	930
	931
	932	RGraph.Pie.prototype.DrawBorders = function ()
	933	{
	934	if (this.Get('chart.linewidth') > 0) {
	935
	936	this.context.lineWidth = this.Get('chart.linewidth');
	937	this.context.strokeStyle = this.Get('chart.strokestyle');
	938
	939	for (var i=0,len=this.angles.length; i<len; ++i) {
	940	this.context.beginPath();
	941	this.context.moveTo(this.angles[i][2], this.angles[i][3]);
	942	this.context.arc(this.angles[i][2], this.angles[i][3], this.radius, this.angles[i][0] / 57.3, (this.angles[i][0] + 0.01) / 57.3, 0);
	943	this.context.arc(this.angles[i][2], this.angles[i][3], this.radius, this.angles[i][0] / 57.3, (this.angles[i][1]) / 57.3, 0);
	944	this.context.closePath();
	945
	946	this.context.stroke();
	947	}
	948	}
	949	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats: