/** * 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'); }