Context Navigation

source: Dev/trunk/RGraph/libraries/RGraph.waterfall.js @ 171

Last change on this file since 171 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 25.4 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 bar chart constructor
	19	*
	20	* @param object canvas The canvas object
	21	* @param array data The chart data
	22	*/
	23	RGraph.Waterfall = function (id, data)
	24	{
	25	// Get the canvas and context objects
	26	this.id = id;
	27	this.canvas = document.getElementById(id);
	28	this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null;
	29	this.canvas.__object__ = this;
	30	this.type = 'waterfall';
	31	this.max = 0;
	32	this.isRGraph = true;
	33	this.coords = [];
	34
	35	/**
	36	* Compatibility with older browsers
	37	*/
	38	RGraph.OldBrowserCompat(this.context);
	39
	40
	41	// Various config
	42	this.properties = {
	43	'chart.background.barcolor1': 'rgba(0,0,0,0)',
	44	'chart.background.barcolor2': 'rgba(0,0,0,0)',
	45	'chart.background.grid': true,
	46	'chart.background.grid.color': '#ddd',
	47	'chart.background.grid.width': 1,
	48	'chart.background.grid.hsize': 20,
	49	'chart.background.grid.vsize': 20,
	50	'chart.background.grid.vlines': true,
	51	'chart.background.grid.hlines': true,
	52	'chart.background.grid.border': true,
	53	'chart.background.grid.autofit':false,
	54	'chart.background.grid.autofit.numhlines': 7,
	55	'chart.background.grid.autofit.numvlines': 20,
	56	'chart.background.grid.autofit.align': false,
	57	'chart.background.image': null,
	58	'chart.background.hbars': null, // ???
	59
	60	'chart.numyticks': 10,
	61	'chart.hmargin': 5,
	62	'chart.strokestyle': '#666',
	63	'chart.axis.color': 'black',
	64	'chart.gutter.left': 25,
	65	'chart.gutter.right': 25,
	66	'chart.gutter.top': 25,
	67	'chart.gutter.bottom': 25,
	68	'chart.labels': [],
	69	'chart.ylabels': true,
	70	'chart.text.color': 'black',
	71	'chart.text.size': 10,
	72	'chart.text.angle': 0,
	73	'chart.text.font': 'Verdana',
	74	'chart.ymax': null,
	75
	76	'chart.title': '',
	77	'chart.title.color': 'black',
	78	'chart.title.background': null,
	79	'chart.title.hpos': null,
	80	'chart.title.vpos': null,
	81	'chart.title.xaxis': '',
	82	'chart.title.yaxis': '',
	83	'chart.title.xaxis.pos': 0.25,
	84	'chart.title.yaxis.pos': 0.25,
	85	'chart.title.yaxis.align': 'left',
	86
	87	'chart.colors': ['green', 'red', 'blue'],
	88
	89	'chart.shadow': false,
	90	'chart.shadow.color': '#666',
	91	'chart.shadow.offsetx': 3,
	92	'chart.shadow.offsety': 3,
	93	'chart.shadow.blur': 3,
	94
	95	'chart.tooltips': null,
	96	'chart.tooltips.effect': 'fade',
	97	'chart.tooltips.css.class': 'RGraph_tooltip',
	98	//'chart.tooltips.event': 'onclick',
	99	'chart.tooltips.coords.adjust': [0,0],
	100	'chart.tooltips.highlight': true,
	101	'chart.tooltips.override': null,
	102
	103	'chart.highlight.stroke': 'black',
	104	'chart.highlight.fill': 'rgba(255,255,255,0.5)',
	105
	106	'chart.contextmenu': null,
	107
	108	'chart.units.pre': '',
	109	'chart.units.post': '',
	110
	111	//'chart.scale.decimals': 0,
	112	//'chart.scale.point': '.',
	113	//'chart.scale.thousand': ',',
	114	//'chart.scale.formatter': null,
	115
	116	'chart.crosshairs': false,
	117	'chart.crosshairs.color': '#333',
	118
	119	'chart.annotatable': false,
	120	'chart.annotate.color': 'black',
	121
	122	'chart.zoom.factor': 1.5,
	123	'chart.zoom.fade.in': true,
	124	'chart.zoom.fade.out': true,
	125	'chart.zoom.hdir': 'right',
	126	'chart.zoom.vdir': 'down',
	127	'chart.zoom.frames': 10,
	128	'chart.zoom.delay': 50,
	129	'chart.zoom.shadow': true,
	130	'chart.zoom.mode': 'canvas',
	131	'chart.zoom.thumbnail.width': 75,
	132	'chart.zoom.thumbnail.height': 75,
	133	'chart.zoom.background': true,
	134
	135	'chart.resizable': false,
	136	'chart.resize.handle.adjust': [0,0],
	137	'chart.resize.handle.background': null,
	138
	139	'chart.noaxes': false,
	140	'chart.noxaxis': false,
	141	'chart.noyaxis': false,
	142
	143	'chart.axis.color': 'black',
	144	'chart.total': true
	145	}
	146
	147	// Check for support
	148	if (!this.canvas) {
	149	alert('[WATERFALL] No canvas support');
	150	return;
	151	}
	152
	153	// Store the data
	154	this.data = data;
	155	}
	156
	157
	158	/**
	159	* A setter
	160	*
	161	* @param name string The name of the property to set
	162	* @param value mixed The value of the property
	163	*/
	164	RGraph.Waterfall.prototype.Set = function (name, value)
	165	{
	166	this.properties[name.toLowerCase()] = value;
	167	}
	168
	169
	170	/**
	171	* A getter
	172	*
	173	* @param name string The name of the property to get
	174	*/
	175	RGraph.Waterfall.prototype.Get = function (name)
	176	{
	177	return this.properties[name.toLowerCase()];
	178	}
	179
	180
	181	/**
	182	* The function you call to draw the bar chart
	183	*/
	184	RGraph.Waterfall.prototype.Draw = function ()
	185	{
	186	// MUST be the first thing done!
	187	if (typeof(this.Get('chart.background.image')) == 'string' && !this.__background_image__) {
	188	RGraph.DrawBackgroundImage(this);
	189	return;
	190	}
	191
	192
	193	/**
	194	* Fire the onbeforedraw event
	195	*/
	196	RGraph.FireCustomEvent(this, 'onbeforedraw');
	197
	198	/**
	199	* Clear all of this canvases event handlers (the ones installed by RGraph)
	200	*/
	201	RGraph.ClearEventListeners(this.id);
	202
	203	/**
	204	* This is new in May 2011 and facilitates indiviual gutter settings,
	205	* eg chart.gutter.left
	206	*/
	207	this.gutterLeft = this.Get('chart.gutter.left');
	208	this.gutterRight = this.Get('chart.gutter.right');
	209	this.gutterTop = this.Get('chart.gutter.top');
	210	this.gutterBottom = this.Get('chart.gutter.bottom');
	211
	212	/**
	213	* Stop the coords array from growing uncontrollably
	214	*/
	215	this.coords = [];
	216
	217	/**
	218	* Work out a few things. They need to be here because they depend on things you can change after you instantiate the object
	219	*/
	220	this.max = 0;
	221	this.grapharea = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom;
	222	this.graphwidth = RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight;
	223	this.halfTextHeight = this.Get('chart.text.size') / 2;
	224
	225	// Work out the resulting total
	226	if (typeof(this.Get('chart.total')) == 'boolean' && this.Get('chart.total')) {
	227	var total = RGraph.array_sum(this.data);
	228	this.data.push(total);
	229	this.Set('chart.total', total);
	230	}
	231
	232	/**
	233	* Work out the maximum value
	234	*/
	235	var runningTotal = 0;
	236	for (var i=0; i<this.data.length - 1; ++i) {
	237	runningTotal += this.data[i];
	238	this.max = Math.max(this.max, runningTotal);
	239	}
	240
	241	this.scale = RGraph.getScale(typeof(this.Get('chart.ymax')) == 'number' ? this.Get('chart.ymax') : this.max, this);
	242	this.max = this.scale[4];
	243	var decimals = this.Get('chart.scale.decimals');
	244
	245	this.scale = [
	246	(this.max * (1/5)).toFixed(decimals),
	247	(this.max * (2/5)).toFixed(decimals),
	248	(this.max * (3/5)).toFixed(decimals),
	249	(this.max * (4/5)).toFixed(decimals),
	250	this.max.toFixed(decimals)
	251	];
	252
	253
	254	// Progressively Draw the chart
	255	RGraph.background.Draw(this);
	256
	257	this.Drawbars();
	258	this.DrawAxes();
	259	this.DrawLabels();
	260
	261	/**
	262	* Setup the context menu if required
	263	*/
	264	if (this.Get('chart.contextmenu')) {
	265	RGraph.ShowContext(this);
	266	}
	267
	268
	269	/**
	270	* Draw crosschairs
	271	*/
	272	if (this.Get('chart.crosshairs')) {
	273	RGraph.DrawCrosshairs(this);
	274	}
	275
	276	/**
	277	* If the canvas is annotatable, do install the event handlers
	278	*/
	279	if (this.Get('chart.annotatable')) {
	280	RGraph.Annotate(this);
	281	}
	282
	283	/**
	284	* This bit shows the mini zoom window if requested
	285	*/
	286	if (this.Get('chart.zoom.mode') == 'thumbnail' \|\| this.Get('chart.zoom.mode') == 'area') {
	287	RGraph.ShowZoomWindow(this);
	288	}
	289
	290
	291	/**
	292	* This function enables resizing
	293	*/
	294	if (this.Get('chart.resizable')) {
	295	RGraph.AllowResizing(this);
	296	}
	297
	298	/**
	299	* Tooltips
	300	*/
	301	if (this.Get('chart.tooltips')) {
	302
	303	RGraph.Register(this);
	304
	305
	306
	307
	308
	309
	310
	311
	312
	313
	314
	315
	316
	317
	318	/**
	319	* Install the onclick event handler for the tooltips
	320	*/
	321	var canvas_onclick_func = function (e)
	322	{
	323	e = RGraph.FixEventObject(e);
	324
	325	var canvas = document.getElementById(this.id);
	326	var context = canvas.getContext('2d');
	327	var obj = canvas.__object__;
	328
	329	/**
	330	* Redraw the graph first, in effect resetting the graph to as it was when it was first drawn
	331	* This "deselects" any already selected bar
	332	*/
	333	RGraph.Clear(canvas);
	334	obj.Draw();
	335
	336	/**
	337	* Get the mouse X/Y coordinates
	338	*/
	339	var mouseCoords = RGraph.getMouseXY(e);
	340	var mouseX = mouseCoords[0];
	341	var mouseY = mouseCoords[1];
	342	var adjust = obj.Get('chart.tooltips.coords.adjust');
	343
	344	/**
	345	* Loop through the bars determining if the mouse is over a bar
	346	*/
	347	for (var i=0; i<obj.coords.length; i++) {
	348
	349	var coordsX = obj.coords[i][0];
	350	var coordsY = obj.coords[i][1];
	351	var coordsW = obj.coords[i][2];
	352	var coordsH = obj.coords[i][3];
	353
	354	if (
	355	mouseX >= (coordsX + adjust[0]) &&
	356	mouseX <= (coordsX + coordsW + adjust[0]) &&
	357	mouseY >= (coordsY + adjust[1]) &&
	358	mouseY <= (coordsY + coordsH + adjust[1])
	359	) {
	360
	361	if (!obj.Get('chart.tooltips')[i]) {
	362	return;
	363	}
	364
	365	// Draw the highlight (if necessary)
	366	if (obj.Get('chart.tooltips.highlight')) {
	367	context.beginPath();
	368	context.fillStyle = obj.Get('chart.highlight.fill');
	369	context.strokeStyle = obj.Get('chart.highlight.stroke');
	370	context.strokeRect(coordsX, coordsY, coordsW, coordsH);
	371	context.fillRect(coordsX, coordsY, coordsW, coordsH);
	372	context.stroke();
	373	context.fill();
	374	}
	375
	376	/**
	377	* Get the tooltip text
	378	*/
	379	if (typeof(obj.Get('chart.tooltips')) == 'function') {
	380	var text = String(obj.Get('chart.tooltips')(i));
	381
	382	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[i]) == 'function') {
	383	var text = String(obj.Get('chart.tooltips')[barCoords[5]](i));
	384
	385	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && (typeof(obj.Get('chart.tooltips')[i]) == 'string' \|\| typeof(obj.Get('chart.tooltips')[i]) == 'number')) {
	386	var text = String(obj.Get('chart.tooltips')[i]);
	387
	388	} else {
	389	var text = null;
	390	}
	391
	392	if (text) {
	393	canvas.style.cursor = 'pointer';
	394	} else {
	395	canvas.style.cursor = 'default';
	396	}
	397
	398	RGraph.Tooltip(canvas, obj.Get('chart.tooltips')[i], e.pageX, e.pageY, text, i);
	399	}
	400	}
	401
	402	/**
	403	* Stop the event bubbling
	404	*/
	405	e.stopPropagation();
	406
	407	return false;
	408	}
	409	this.canvas.addEventListener('click', canvas_onclick_func, false);
	410	RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
	411
	412	/**
	413	* Install the window onclick handler
	414	*/
	415	var window_onclick_func = function (){RGraph.Redraw();};
	416	window.addEventListener('click', window_onclick_func, false);
	417	RGraph.AddEventListener('window_' + this.id, 'click', window_onclick_func);
	418
	419
	420
	421
	422
	423
	424
	425
	426
	427
	428
	429
	430
	431	/**
	432	* Install the onmousemove event handler for the tooltips
	433	*/
	434	var canvas_onmousemove_func = function (e)
	435	{
	436	e = RGraph.FixEventObject(e);
	437
	438	var canvas = document.getElementById(this.id);
	439	var context = canvas.getContext('2d');
	440	var obj = canvas.__object__;
	441
	442	/**
	443	* Get the mouse X/Y coordinates
	444	*/
	445	var mouseCoords = RGraph.getMouseXY(e);
	446	var mouseX = mouseCoords[0];
	447	var mouseY = mouseCoords[1];
	448	var adjust = obj.Get('chart.tooltips.coords.adjust');
	449
	450	/**
	451	* Loop through the bars determining if the mouse is over a bar
	452	*/
	453	for (var i=0; i<obj.coords.length; i++) {
	454
	455	var coordsX = obj.coords[i][0];
	456	var coordsY = obj.coords[i][1];
	457	var coordsW = obj.coords[i][2];
	458	var coordsH = obj.coords[i][3];
	459
	460	if (
	461	mouseX >= (coordsX + adjust[0]) &&
	462	mouseX <= (coordsX + coordsW + adjust[0]) &&
	463	mouseY >= (coordsY + adjust[1]) &&
	464	mouseY <= (coordsY + coordsH + adjust[1])
	465	) {
	466	if (obj.Get('chart.tooltips')[i]) {
	467	canvas.style.cursor = 'pointer';
	468	e.stopPropagation();
	469	}
	470
	471	return;
	472	}
	473	}
	474
	475	canvas.style.cursor = 'default';
	476
	477	/**
	478	* Stop the event bubbling
	479	*/
	480	e.stopPropagation();
	481
	482	return false;
	483	}
	484	this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
	485	RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
	486
	487
	488
	489
	490
	491
	492
	493
	494
	495
	496
	497
	498
	499	}
	500
	501
	502	/**
	503	* Fire the RGraph ondraw event
	504	*/
	505	RGraph.FireCustomEvent(this, 'ondraw');
	506	}
	507
	508
	509	/**
	510	* Draws the charts axes
	511	*/
	512	RGraph.Waterfall.prototype.DrawAxes = function ()
	513	{
	514	if (this.Get('chart.noaxes')) {
	515	return;
	516	}
	517
	518	this.context.beginPath();
	519	this.context.strokeStyle = this.Get('chart.axis.color');
	520	this.context.lineWidth = 1;
	521
	522	// Draw the Y axis
	523	if (this.Get('chart.noyaxis') == false) {
	524	this.context.moveTo(this.gutterLeft, this.gutterTop);
	525	this.context.lineTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom);
	526	}
	527
	528	// Draw the X axis
	529	if (this.Get('chart.noxaxis') == false) {
	530	this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom);
	531	this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom);
	532	}
	533
	534	var numYTicks = this.Get('chart.numyticks');
	535
	536	// Draw the Y tickmarks
	537	if (this.Get('chart.noyaxis') == false) {
	538
	539	var yTickGap = (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / numYTicks;
	540
	541	for (y=this.gutterTop; y < (RGraph.GetHeight(this) - this.gutterBottom); y += yTickGap) {
	542	this.context.moveTo(this.gutterLeft, y);
	543	this.context.lineTo(this.gutterLeft - 3, y);
	544	}
	545
	546	/**
	547	* If the X axis is not being shown, draw an extra tick
	548	*/
	549	if (this.Get('chart.noxaxis')) {
	550	this.context.moveTo(this.gutterLeft - 3, RGraph.GetHeight(this) - this.gutterBottom);
	551	this.context.lineTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom);
	552	}
	553	}
	554
	555
	556	// Draw the X tickmarks
	557	if (this.Get('chart.noxaxis') == false) {
	558
	559	xTickGap = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight ) / this.data.length;
	560
	561	yStart = RGraph.GetHeight(this) - this.gutterBottom;
	562	yEnd = (RGraph.GetHeight(this) - this.gutterBottom) + 3;
	563
	564	for (x=this.gutterLeft + xTickGap; x<=RGraph.GetWidth(this) - this.gutterRight; x+=xTickGap) {
	565	this.context.moveTo(x, yStart);
	566	this.context.lineTo(x, yEnd);
	567	}
	568
	569	if (this.Get('chart.noyaxis')) {
	570	this.context.moveTo(this.gutterLeft, yStart);
	571	this.context.lineTo(this.gutterLeft, yEnd);
	572	}
	573	}
	574
	575	/**
	576	* If the Y axis is not being shown, draw an extra tick
	577	*/
	578	if (this.Get('chart.noyaxis') && this.Get('chart.noxaxis') == false) {
	579	this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom);
	580	this.context.lineTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom + 3);
	581	}
	582
	583	this.context.stroke();
	584	}
	585
	586
	587	/**
	588	* Draws the labels for the graph
	589	*/
	590	RGraph.Waterfall.prototype.DrawLabels = function ()
	591	{
	592	var context = this.context;
	593	var numYLabels = 5;
	594	var interval = this.grapharea / numYLabels;
	595	var font = this.Get('chart.text.font');
	596	var size = this.Get('chart.text.size');
	597	var color = this.Get('chart.text.color');
	598	var units_pre = this.Get('chart.units.pre');
	599	var units_post = this.Get('chart.units.post');
	600
	601	this.context.beginPath();
	602	this.context.fillStyle = color;
	603
	604	/**
	605	* First, draw the Y labels
	606	*/
	607	if (this.Get('chart.ylabels')) {
	608	for (var i=1; i<=numYLabels; ++i) {
	609
	610	RGraph.Text(context,
	611	font,
	612	size,
	613	this.gutterLeft - 5,
	614	this.canvas.height - this.gutterBottom - (i * interval),
	615	RGraph.number_format(this, this.scale[i - 1], units_pre, units_post),
	616	'center',
	617	'right');
	618
	619	}
	620	}
	621
	622
	623
	624	/**
	625	* Now, draw the X labels
	626	*/
	627	if (this.Get('chart.labels').length > 0) {
	628
	629	// Recalculate the interval for the X labels
	630	interval = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / this.Get('chart.labels').length;
	631
	632	var halign = 'center';
	633	var angle = this.Get('chart.text.angle');
	634
	635	if (angle) {
	636	halign = 'right';
	637	angle *= -1;
	638	}
	639
	640	for (var i=0; i<this.Get('chart.labels').length; ++i) {
	641
	642	var labels = this.Get('chart.labels');
	643
	644	RGraph.Text(context,
	645	font,
	646	size,
	647	this.gutterLeft - 5 + (i * interval) + (interval / 2),// X
	648	RGraph.GetHeight(this) - this.gutterBottom + 5 + this.halfTextHeight, // Y
	649	labels[i],
	650	'center',
	651	halign,
	652	null,
	653	angle);
	654
	655	}
	656	}
	657
	658	this.context.stroke();
	659	this.context.fill();
	660	}
	661
	662
	663	/**
	664	* Draws the bars on to the chart
	665	*/
	666	RGraph.Waterfall.prototype.Drawbars = function ()
	667	{
	668	var context = this.context;
	669	var canvas = this.canvas;
	670	var hmargin = this.Get('chart.hmargin');
	671	var runningTotal = 0;
	672
	673
	674	for (var i=0; i<this.data.length; ++i) {
	675	context.beginPath();
	676	context.strokeStyle = this.Get('chart.strokestyle');
	677
	678	var isLast = (i == (this.data.length - 1));
	679	var x = this.gutterLeft + hmargin + ((this.graphwidth / this.data.length) * i);
	680	var y = this.gutterTop + this.grapharea - (i == 0 ? ((this.data[0] / this.max) * this.grapharea) : (this.data[i] > 0 ? ((runningTotal + this.data[i]) / this.max) * this.grapharea : (runningTotal / this.max) * this.grapharea));
	681	var w = ((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / this.data.length) - (2 * this.Get('chart.hmargin'));
	682	var h = (Math.abs(this.data[i]) / this.max) * this.grapharea;
	683
	684	// Color
	685	context.fillStyle = this.data[i] >= 0 ? this.Get('chart.colors')[0] : this.Get('chart.colors')[1];
	686
	687	// Last item? Change to the third color
	688	if (isLast && this.Get('chart.total')) {
	689	context.fillStyle = this.Get('chart.colors')[2];
	690	y = this.gutterTop + this.grapharea - h;
	691	}
	692
	693	if (this.Get('chart.shadow')) {
	694	RGraph.SetShadow(this, this.Get('chart.shadow.color'), this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur'));
	695	} else {
	696	RGraph.NoShadow(this);
	697	}
	698
	699	context.strokeRect(x, y, w, h);
	700	context.fillRect(x, y, w, h);
	701
	702	this.coords.push([x, y, w, h]);
	703
	704	runningTotal += this.data[i];
	705
	706	context.stroke();
	707	context.fill();
	708	}
	709
	710	RGraph.NoShadow(this);
	711
	712	for (var i=1; i<this.coords.length; ++i) {
	713	context.strokeStyle = 'gray';
	714	context.beginPath();
	715	if (this.data[i - 1] > 0) {
	716	context.moveTo(this.coords[i - 1][0] + this.coords[i - 1][2], this.coords[i - 1][1]);
	717	context.lineTo(this.coords[i - 1][0] + this.coords[i - 1][2] + (2 * hmargin), this.coords[i - 1][1]);
	718	} else {
	719	context.moveTo(this.coords[i - 1][0] + this.coords[i - 1][2], this.coords[i - 1][1] + this.coords[i - 1][3]);
	720	context.lineTo(this.coords[i - 1][0] + this.coords[i - 1][2] + (2 * hmargin), this.coords[i - 1][1] + this.coords[i - 1][3]);
	721	}
	722	context.stroke();
	723	}
	724	}
	725
	726

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

Download in other formats: