libraries/RGraph.skeleton.js

   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':                 25,
  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':             '',
 123             'chart.key':                    null,
 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,
 136             'chart.title':                  '',
 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,
 150             'chart.hmargin':                5,
 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,
 162         }
 163
 164         /**
 165         * A simple check that the browser has canvas support
 166         */
 167         if (!this.canvas) {
 168             alert('[BAR] No canvas support');
 169             return;
 170         }
 171
 172         /**
 173         * Check that the common library has been included
 174         */
 175         if (typeof(RGraph) == 'undefined') {
 176             alert('[SKELETON] Fatal error: The common library does not appear to have been included');
 177         }
 178
 179         /**
 180         * Store the data that was passed to this constructor
 181         */
 182         this.data = data;
 183
 184         /**
 185         * This can be used to store the coordinates of shapes on the graph
 186         */
 187         this.coords = [];
 188     }
 189
 190
 191
 192
 193     /**
 194     * A setter method for setting graph properties. It can be used like this: obj.Set('chart.background.grid', false);
 195     *
 196     * @param name  string The name of the property to set
 197     * @param value mixed  The value of the property
 198     */
 199     RGraph.Skeleton.prototype.Set = function (name, value)
 200     {
 201         this.properties[name.toLowerCase()] = value;
 202     }
 203
 204
 205
 206
 207     /**
 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.
 210     *
 211     * @param name  string The name of the property to get
 212     */
 213     RGraph.Skeleton.prototype.Get = function (name)
 214     {
 215         return this.properties[name];
 216     }
 217
 218
 219
 220
 221     /**
 222     * The function you call to draw the chart after you have set all of the graph properties
 223     */
 224     RGraph.Bar.prototype.Draw = function ()
 225     {
 226         /**
 227         * Fire the custom RGraph onbeforedraw event (which should be fired before the chart is drawn)
 228         */
 229         RGraph.FireCustomEvent(this, 'onbeforedraw');
 230
 231         /**
 232         * Clear all of this canvases event handlers (the ones installed by RGraph)
 233         */
 234         RGraph.ClearEventListeners(this.id);
 235
 236
 237
 238
 239         /*************************
 240         * Draw the chart here... *
 241         *************************/
 242
 243
 244
 245
 246         /**
 247         * These call common functions, that facilitate some of RGraps features
 248         */
 249
 250
 251         /**
 252         * Setup the context menu if required
 253         */
 254         if (this.Get('chart.contextmenu')) {
 255             RGraph.ShowContext(this);
 256         }
 257
 258         /**
 259         * Draw "in graph" labels
 260         */
 261         if (this.Get('chart.labels.ingraph')) {
 262             RGraph.DrawInGraphLabels(this);
 263         }
 264
 265         /**
 266         * Draw crosschairs
 267         */
 268         if (this.Get('chart.crosshairs')) {
 269             RGraph.DrawCrosshairs(this);
 270         }
 271
 272         /**
 273         * If the canvas is annotatable, do install the event handlers
 274         */
 275         if (this.Get('chart.annotatable')) {
 276             RGraph.Annotate(this);
 277         }
 278
 279         /**
 280         * This bit shows the mini zoom window if requested
 281         */
 282         if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
 283             RGraph.ShowZoomWindow(this);
 284         }
 285
 286
 287         /**
 288         * This function enables resizing
 289         */
 290         if (this.Get('chart.resizable')) {
 291             RGraph.AllowResizing(this);
 292         }
 293
 294
 295         /**
 296         * This function enables adjusting
 297         */
 298         if (this.Get('chart.adjustable')) {
 299             RGraph.AllowAdjusting(this);
 300         }
 301
 302         /**
 303         * Fire the custom RGraph ondraw event (which should be fired when you have drawn the chart)
 304         */
 305         RGraph.FireCustomEvent(this, 'ondraw');
 306     }