Context Navigation

source: Dev/branches/Cartis/Tiles preview/js/RGraph/libraries/RGraph.skeleton.js @ 283

Last change on this file since 283 was 283, checked in by tjcschipper, 13 years ago

Cartis Mockup werkt!

W
I
N
N
I
N
G

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: