diff options
Diffstat (limited to 'schall/static/RGraph/libraries/RGraph.skeleton.js')
| -rw-r--r-- | schall/static/RGraph/libraries/RGraph.skeleton.js | 333 |
1 files changed, 333 insertions, 0 deletions
diff --git a/schall/static/RGraph/libraries/RGraph.skeleton.js b/schall/static/RGraph/libraries/RGraph.skeleton.js new file mode 100644 index 0000000..fd93edc --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.skeleton.js @@ -0,0 +1,333 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + + + + /** + * This is the RGraph.skeleton.js file which you can use as a base for creating new graph types. + */ + + + + + /** + * Having this here means that the RGraph libraries can be included in any order, instead of you having + * to include the common core library first. + */ + if (typeof(RGraph) == 'undefined') RGraph = {}; + + + + + /** + * The chart constructor. This function sets up the object. It takes the ID (the HTML attribute) of the canvas as the + * first argument and the data as the second. If you need to change this, you can. + * + * @param string id The canvas tag ID + * @param array data The chart data + */ + RGraph.Skeleton = function (id, data) + { + /** + * Set these as object properties so they don't have to be constantly retrieved. Note that using a dollar + * function - $() - can cause conflicts with popular javascript libraries, eg jQuery. It's therefore best + * to stick to document.getElementById(). Setting the canvas and context as object properties means you + * can reference them like this: myObj.canvas + * myObj.context + */ + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + + /** + * This puts a reference to this object on to the canvas. Useful in event handling. + */ + this.canvas.__object__ = this; + + /** + * This defines the type of this graph type and should be a one word description. + */ + this.type = 'skeleton'; + + /** + * This facilitates easy object identification, and should be true + */ + this.isRGraph = true; + + /** + * This does a few things, for example adding the .fillText() method to the canvas 2D context when + * it doesn't exist. This facilitates the graphs to be still shown in older browser (though without + * text obviously). You'll find the function in RGraph.common.core.js + */ + RGraph.OldBrowserCompat(this.context); + + + /** + * Some example background properties, as used by the method RGraph.background.Draw() + */ + this.properties = { + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.colors': ['red','blue'], + 'chart.background.barcolor1': 'rgba(0,0,0,0)', + 'chart.background.barcolor2': 'rgba(0,0,0,0)', + 'chart.background.grid': true, + 'chart.background.grid.color': '#ddd', + 'chart.background.grid.width': 1, + 'chart.background.grid.hsize': 20, + 'chart.background.grid.vsize': 20, + 'chart.background.grid.vlines': true, + 'chart.background.grid.hlines': true, + 'chart.background.grid.border': true, + 'chart.background.grid.autofit':false, + 'chart.background.grid.autofit.align':false, + 'chart.background.grid.autofit.numhlines': 7, + 'chart.background.grid.autofit.numvlines': 20, + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.contextmenu': null, + 'chart.labels': null, + 'chart.labels.ingraph': null, + 'chart.labels.above': false, + 'chart.labels.above.decimals': 0, + 'chart.labels.above.size': null, + 'chart.scale.decimals': 0, + 'chart.scale.point': '.', + 'chart.scale.thousand': ',', + 'chart.crosshairs': false, + 'chart.crosshairs.color': '#333', + 'chart.crosshairs.hline': true, + 'chart.crosshairs.vline': true, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.key': null, + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.title.xaxis': '', + 'chart.title.xaxis.bold': true, + 'chart.title.xaxis.size': null, + 'chart.title.xaxis.font': null, + 'chart.title.yaxis': '', + 'chart.title.yaxis.bold': true, + 'chart.title.yaxis.size': null, + 'chart.title.yaxis.font': null, + 'chart.title.xaxis.pos': null, + 'chart.title.yaxis.pos': null, + 'chart.title.yaxis.position': 'left', + 'chart.text.color': 'black', + 'chart.text.size': 10, + 'chart.text.angle': 0, + 'chart.text.font': 'Verdana', + 'chart.resizable': false, + 'chart.resize.handle.background': null, + 'chart.adjustable': false, + 'chart.hmargin': 5, + 'chart.shadow': false, + 'chart.shadow.color': '#666', + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.shadow.blur': 3, + 'chart.tooltips': null, + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.event': 'onclick', + 'chart.tooltips.highlight': true + } + + /** + * A simple check that the browser has canvas support + */ + if (!this.canvas) { + alert('[SKELETON] No canvas support'); + return; + } + + /** + * Store the data that was passed to this constructor + */ + this.data = data; + + /** + * This can be used to store the coordinates of shapes on the graph + */ + this.coords = []; + + + /** + * If you add a .get*(e) method to ease getting the shape that's currently being hovered over + * or has been clicked on (in the same vein as the Bar charts .getBar() method or the Line charts + * .getPoint() method) then you should set this so that common methods have a common function + * name to call - for example the context menu uses the common name .getShape(e) to add the + * details to the context menu. + */ + this.getShape = this.getXXX; + } + + + + + /** + * A setter method for setting graph properties. It can be used like this: obj.Set('chart.background.grid', false); + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.Skeleton.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + + + /** + * A getter method for retrieving graph properties. It can be used like this: obj.Get('chart.background.grid'); + * This can be used inside your methods that draw the graph. + * + * @param name string The name of the property to get + */ + RGraph.Skeleton.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + + + /** + * The function you call to draw the chart after you have set all of the graph properties + */ + RGraph.Skeleton.prototype.Draw = function () + { + /** + * This draws the background image, which when loaded draws the graph, hence the return + */ + if (typeof(this.Get('chart.background.image')) == 'string' && !this.__background_image__) { + RGraph.DrawBackgroundImage(this); + return; + } + + /** + * Fire the custom RGraph onbeforedraw event (which should be fired before the chart is drawn) + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + + + + /************************* + * Draw the chart here... * + *************************/ + + + + + /** + * These call common functions, that facilitate some of RGraphs features + */ + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * Draw "in graph" labels + */ + if (this.Get('chart.labels.ingraph')) { + RGraph.DrawInGraphLabels(this); + } + + /** + * Draw crosschairs + */ + if (this.Get('chart.crosshairs')) { + RGraph.DrawCrosshairs(this); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + + /** + * This function enables adjusting + */ + if (this.Get('chart.adjustable')) { + RGraph.AllowAdjusting(this); + } + + /** + * Fire the custom RGraph ondraw event (which should be fired when you have drawn the chart) + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } |