Context Navigation

source: Dev/branches/jQueryUI/client/RGraph/libraries/RGraph.skeleton.js @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.

File size: 11.5 KB

Line
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
16
17
18	/**
19	* This is the RGraph.skeleton.js file which you can use as a base for creating new graph types.
20	*/
21
22
23
24
25	/**
26	* Having this here means that the RGraph libraries can be included in any order, instead of you having
27	* to include the common core library first.
28	*/
29	if (typeof(RGraph) == 'undefined') RGraph = {};
30
31
32
33
34	/**
35	* The chart constructor. This function sets up the object. It takes the ID (the HTML attribute) of the canvas as the
36	* first argument and the data as the second. If you need to change this, you can.
37	*
38	* @param string id The canvas tag ID
39	* @param array data The chart data
40	*/
41	RGraph.Skeleton = function (id, data)
42	{
43	/**
44	* Set these as object properties so they don't have to be constantly retrieved. Note that using a dollar
45	* function - $() - can cause conflicts with popular javascript libraries, eg jQuery. It's therefore best
46	* to stick to document.getElementById(). Setting the canvas and context as object properties means you
47	* can reference them like this: myObj.canvas
48	* myObj.context
49	*/
50	this.id = id;
51	this.canvas = document.getElementById(id);
52	this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null;
53
54	/**
55	* This puts a reference to this object on to the canvas. Useful in event handling.
56	*/
57	this.canvas.__object__ = this;
58
59	/**
60	* This defines the type of this graph type and should be a one word description.
61	*/
62	this.type = 'skeleton';
63
64	/**
65	* This facilitates easy object identification, and should be true
66	*/
67	this.isRGraph = true;
68
69	/**
70	* This does a few things, for example adding the .fillText() method to the canvas 2D context when
71	* it doesn't exist. This facilitates the graphs to be still shown in older browser (though without
72	* text obviously). You'll find the function in RGraph.common.core.js
73	*/
74	RGraph.OldBrowserCompat(this.context);
75
76
77	/**
78	* Some example background properties, as used by the method RGraph.background.Draw()
79	*/
80	this.properties = {
81	'chart.gutter.left': 25,
82	'chart.gutter.right': 25,
83	'chart.gutter.top': 25,
84	'chart.gutter.bottom': 25,
85	'chart.colors': ['red','blue'],
86	'chart.background.barcolor1': 'rgba(0,0,0,0)',
87	'chart.background.barcolor2': 'rgba(0,0,0,0)',
88	'chart.background.grid': true,
89	'chart.background.grid.color': '#ddd',
90	'chart.background.grid.width': 1,
91	'chart.background.grid.hsize': 20,
92	'chart.background.grid.vsize': 20,
93	'chart.background.grid.vlines': true,
94	'chart.background.grid.hlines': true,
95	'chart.background.grid.border': true,
96	'chart.background.grid.autofit':false,
97	'chart.background.grid.autofit.align':false,
98	'chart.background.grid.autofit.numhlines': 7,
99	'chart.background.grid.autofit.numvlines': 20,
100	'chart.zoom.factor': 1.5,
101	'chart.zoom.fade.in': true,
102	'chart.zoom.fade.out': true,
103	'chart.zoom.hdir': 'right',
104	'chart.zoom.vdir': 'down',
105	'chart.zoom.frames': 10,
106	'chart.zoom.delay': 50,
107	'chart.zoom.shadow': true,
108	'chart.zoom.mode': 'canvas',
109	'chart.zoom.thumbnail.width': 75,
110	'chart.zoom.thumbnail.height': 75,
111	'chart.zoom.background': true,
112	'chart.contextmenu': null,
113	'chart.labels': null,
114	'chart.labels.ingraph': null,
115	'chart.labels.above': false,
116	'chart.labels.above.decimals': 0,
117	'chart.labels.above.size': null,
118	'chart.scale.decimals': 0,
119	'chart.scale.point': '.',
120	'chart.scale.thousand': ',',
121	'chart.crosshairs': false,
122	'chart.crosshairs.color': '#333',
123	'chart.annotatable': false,
124	'chart.annotate.color': 'black',
125	'chart.units.pre': '',
126	'chart.units.post': '',
127	'chart.key': null,
128	'chart.key.background': 'white',
129	'chart.key.position': 'graph',
130	'chart.key.shadow': false,
131	'chart.key.shadow.color': '#666',
132	'chart.key.shadow.blur': 3,
133	'chart.key.shadow.offsetx': 2,
134	'chart.key.shadow.offsety': 2,
135	'chart.key.position.gutter.boxed': true,
136	'chart.key.position.x': null,
137	'chart.key.position.y': null,
138	'chart.key.color.shape': 'square',
139	'chart.key.rounded': true,
140	'chart.key.linewidth': 1,
141	'chart.title': '',
142	'chart.title.background': null,
143	'chart.title.hpos': null,
144	'chart.title.vpos': null,
145	'chart.title.xaxis': '',
146	'chart.title.yaxis': '',
147	'chart.title.xaxis.pos': 0.25,
148	'chart.title.yaxis.pos': 0.25,
149	'chart.title.yaxis.position': 'left',
150	'chart.text.color': 'black',
151	'chart.text.size': 10,
152	'chart.text.angle': 0,
153	'chart.text.font': 'Verdana',
154	'chart.resizable': false,
155	'chart.resize.handle.background': null,
156	'chart.adjustable': false,
157	'chart.hmargin': 5,
158	'chart.shadow': false,
159	'chart.shadow.color': '#666',
160	'chart.shadow.offsetx': 3,
161	'chart.shadow.offsety': 3,
162	'chart.shadow.blur': 3,
163	'chart.tooltips': null,
164	'chart.tooltips.effect': 'fade',
165	'chart.tooltips.css.class': 'RGraph_tooltip',
166	'chart.tooltips.event': 'onclick',
167	'chart.tooltips.highlight': true
168	}
169
170	/**
171	* A simple check that the browser has canvas support
172	*/
173	if (!this.canvas) {
174	alert('[SKELETON] No canvas support');
175	return;
176	}
177
178	/**
179	* Store the data that was passed to this constructor
180	*/
181	this.data = data;
182
183	/**
184	* This can be used to store the coordinates of shapes on the graph
185	*/
186	this.coords = [];
187
188
189	/**
190	* If you add a .get*(e) method to ease getting the shape that's currently being hovered over
191	* or has been clicked on (in the same vein as the Bar charts .getBar() method or the Line charts
192	* .getPoint() method) then you should set this so that common methods have a common function
193	* name to call - for example the context menu uses the common name .getShape(e) to add the
194	* details to the context menu.
195	*/
196	this.getShape = this.getXXX;
197	}
198
199
200
201
202	/**
203	* A setter method for setting graph properties. It can be used like this: obj.Set('chart.background.grid', false);
204	*
205	* @param name string The name of the property to set
206	* @param value mixed The value of the property
207	*/
208	RGraph.Skeleton.prototype.Set = function (name, value)
209	{
210	this.properties[name.toLowerCase()] = value;
211	}
212
213
214
215
216	/**
217	* A getter method for retrieving graph properties. It can be used like this: obj.Get('chart.background.grid');
218	* This can be used inside your methods that draw the graph.
219	*
220	* @param name string The name of the property to get
221	*/
222	RGraph.Skeleton.prototype.Get = function (name)
223	{
224	return this.properties[name.toLowerCase()];
225	}
226
227
228
229
230	/**
231	* The function you call to draw the chart after you have set all of the graph properties
232	*/
233	RGraph.Skeleton.prototype.Draw = function ()
234	{
235	/**
236	* This draws the background image, which when loaded draws the graph, hence the return
237	*/
238	if (typeof(this.Get('chart.background.image')) == 'string' && !this.__background_image__) {
239	RGraph.DrawBackgroundImage(this);
240	return;
241	}
242
243	/**
244	* Fire the custom RGraph onbeforedraw event (which should be fired before the chart is drawn)
245	*/
246	RGraph.FireCustomEvent(this, 'onbeforedraw');
247
248	/**
249	* Clear all of this canvases event handlers (the ones installed by RGraph)
250	*/
251	RGraph.ClearEventListeners(this.id);
252
253
254
255
256	/*************************
257	* Draw the chart here... *
258	*************************/
259
260
261
262
263	/**
264	* These call common functions, that facilitate some of RGraphs features
265	*/
266
267
268	/**
269	* Setup the context menu if required
270	*/
271	if (this.Get('chart.contextmenu')) {
272	RGraph.ShowContext(this);
273	}
274
275	/**
276	* Draw "in graph" labels
277	*/
278	if (this.Get('chart.labels.ingraph')) {
279	RGraph.DrawInGraphLabels(this);
280	}
281
282	/**
283	* Draw crosschairs
284	*/
285	if (this.Get('chart.crosshairs')) {
286	RGraph.DrawCrosshairs(this);
287	}
288
289	/**
290	* If the canvas is annotatable, do install the event handlers
291	*/
292	if (this.Get('chart.annotatable')) {
293	RGraph.Annotate(this);
294	}
295
296	/**
297	* This bit shows the mini zoom window if requested
298	*/
299	if (this.Get('chart.zoom.mode') == 'thumbnail' \|\| this.Get('chart.zoom.mode') == 'area') {
300	RGraph.ShowZoomWindow(this);
301	}
302
303
304	/**
305	* This function enables resizing
306	*/
307	if (this.Get('chart.resizable')) {
308	RGraph.AllowResizing(this);
309	}
310
311
312	/**
313	* This function enables adjusting
314	*/
315	if (this.Get('chart.adjustable')) {
316	RGraph.AllowAdjusting(this);
317	}
318
319	/**
320	* Fire the custom RGraph ondraw event (which should be fired when you have drawn the chart)
321	*/
322	RGraph.FireCustomEvent(this, 'ondraw');
323	}

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

Download in other formats: