2 * o------------------------------------------------------------------------------o
3 * | This file is part of the RGraph package - you can learn more at: |
5 * | http://www.rgraph.net |
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: |
11 * | http://www.rgraph.net/LICENSE.txt |
12 * o------------------------------------------------------------------------------o
19 * This is the RGraph.skeleton.js file which you can use as a base for creating new graph types.
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.
29 if (typeof(RGraph) == 'undefined') RGraph = {};
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.
38 * @param string id The canvas tag ID
39 * @param array data The chart data
41 RGraph.Skeleton = function (id, data)
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
51 this.canvas = document.getElementById(id);
52 this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null;
55 * This puts a reference to this object on to the canvas. Useful in event handling.
57 this.canvas.__object__ = this;
60 * This defines the type of this graph type and should be a one word description.
62 this.type = 'skeleton';
65 * This facilitates easy object identification, and should be true
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
74 RGraph.OldBrowserCompat(this.context);
78 * Some example background properties, as used by the method RGraph.background.Draw()
82 'chart.colors': ['red','blue'],
83 'chart.background.barcolor1': 'rgba(0,0,0,0)',
84 'chart.background.barcolor2': 'rgba(0,0,0,0)',
85 'chart.background.grid': true,
86 'chart.background.grid.color': '#ddd',
87 'chart.background.grid.width': 1,
88 'chart.background.grid.hsize': 20,
89 'chart.background.grid.vsize': 20,
90 'chart.background.grid.vlines': true,
91 'chart.background.grid.hlines': true,
92 'chart.background.grid.border': true,
93 'chart.background.grid.autofit':false,
94 'chart.background.grid.autofit.numhlines': 7,
95 'chart.background.grid.autofit.numvlines': 20,
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.contextmenu': null,
109 'chart.labels': null,
110 'chart.labels.ingraph': null,
111 'chart.labels.above': false,
112 'chart.labels.above.decimals': 0,
113 'chart.labels.above.size': null,
114 'chart.scale.decimals': 0,
115 'chart.scale.point': '.',
116 'chart.scale.thousand': ',',
117 'chart.crosshairs': false,
118 'chart.crosshairs.color': '#333',
119 'chart.annotatable': false,
120 'chart.annotate.color': 'black',
121 'chart.units.pre': '',
122 'chart.units.post': '',
124 'chart.key.background': 'white',
125 'chart.key.position': 'graph',
126 'chart.key.shadow': false,
127 'chart.key.shadow.color': '#666',
128 'chart.key.shadow.blur': 3,
129 'chart.key.shadow.offsetx': 2,
130 'chart.key.shadow.offsety': 2,
131 'chart.key.position.gutter.boxed': true,
132 'chart.key.position.x': null,
133 'chart.key.position.y': null,
134 'chart.key.color.shape': 'square',
135 'chart.key.rounded': true,
137 'chart.title.background': null,
138 'chart.title.hpos': null,
139 'chart.title.vpos': null,
140 'chart.title.xaxis': '',
141 'chart.title.yaxis': '',
142 'chart.title.xaxis.pos': 0.25,
143 'chart.title.yaxis.pos': 0.25,
144 'chart.text.color': 'black',
145 'chart.text.size': 10,
146 'chart.text.angle': 0,
147 'chart.text.font': 'Verdana',
148 'chart.resizable': false,
149 'chart.adjustable': false,
151 'chart.shadow': false,
152 'chart.shadow.color': '#666',
153 'chart.shadow.offsetx': 3,
154 'chart.shadow.offsety': 3,
155 'chart.shadow.blur': 3,
156 'chart.tooltips': null,
157 'chart.tooltips.effect': 'fade',
158 'chart.tooltips.css.class': 'RGraph_tooltip',
159 'chart.tooltips.event': 'onclick',
160 'chart.tooltips.coords.adjust': [0,0],
161 'chart.tooltips.highlight': true,
165 * A simple check that the browser has canvas support
168 alert('[BAR] No canvas support');
173 * Check that the common library has been included
175 if (typeof(RGraph) == 'undefined') {
176 alert('[SKELETON] Fatal error: The common library does not appear to have been included');
180 * Store the data that was passed to this constructor
185 * This can be used to store the coordinates of shapes on the graph
194 * A setter method for setting graph properties. It can be used like this: obj.Set('chart.background.grid', false);
196 * @param name string The name of the property to set
197 * @param value mixed The value of the property
199 RGraph.Skeleton.prototype.Set = function (name, value)
201 this.properties[name.toLowerCase()] = value;
208 * A getter method for retrieving graph properties. It can be used like this: obj.Get('chart.background.grid');
209 * This can be used inside your methods that draw the graph.
211 * @param name string The name of the property to get
213 RGraph.Skeleton.prototype.Get = function (name)
215 return this.properties[name];
222 * The function you call to draw the chart after you have set all of the graph properties
224 RGraph.Bar.prototype.Draw = function ()
227 * Fire the custom RGraph onbeforedraw event (which should be fired before the chart is drawn)
229 RGraph.FireCustomEvent(this, 'onbeforedraw');
232 * Clear all of this canvases event handlers (the ones installed by RGraph)
234 RGraph.ClearEventListeners(this.id);
239 /*************************
240 * Draw the chart here... *
241 *************************/
247 * These call common functions, that facilitate some of RGraps features
252 * Setup the context menu if required
254 if (this.Get('chart.contextmenu')) {
255 RGraph.ShowContext(this);
259 * Draw "in graph" labels
261 if (this.Get('chart.labels.ingraph')) {
262 RGraph.DrawInGraphLabels(this);
268 if (this.Get('chart.crosshairs')) {
269 RGraph.DrawCrosshairs(this);
273 * If the canvas is annotatable, do install the event handlers
275 if (this.Get('chart.annotatable')) {
276 RGraph.Annotate(this);
280 * This bit shows the mini zoom window if requested
282 if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
283 RGraph.ShowZoomWindow(this);
288 * This function enables resizing
290 if (this.Get('chart.resizable')) {
291 RGraph.AllowResizing(this);
296 * This function enables adjusting
298 if (this.Get('chart.adjustable')) {
299 RGraph.AllowAdjusting(this);
303 * Fire the custom RGraph ondraw event (which should be fired when you have drawn the chart)
305 RGraph.FireCustomEvent(this, 'ondraw');