// o---------------------------------------------------------------------------o // | This file is part of the RGraph package - you can learn more at: | // | | // | https://www.rgraph.net | // | | // | RGraph is dual-licensed under the Open Source GPL license. This means | // | that it's free to use for any purpose. The GPL license does have | // | consequences on the license of the software that you include it in, | // | however. If this is not desirable, then there's an inexpensive commercial | // | license option available. See the RGraph website for more details. | // o---------------------------------------------------------------------------o // // 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. // // Define the RGraph global variable RGraph = window.RGraph || {isrgraph:true,isRGraph: true,rgraph:true}; RGraph.Drawing = RGraph.Drawing || {}; // // The constructor. This function sets up the object. // RGraph.Drawing.Background = function (conf) { var id = conf.id, canvas = document.getElementById(id); this.id = id; this.canvas = document.getElementById(this.id); this.context = this.canvas.getContext('2d'); this.canvas.__object__ = this; this.original_colors = []; this.colorsParsed = false; this.firstDraw = true; // After the first draw this will be false // // This defines the type of this shape // this.type = 'drawing.background'; // // This facilitates easy object identification, and should always be true // this.isRGraph = true; this.isrgraph = true; this.rgraph = true; // // This adds a uid to the object that you can use for identification purposes // this.uid = RGraph.createUID(); // // This adds a UID to the canvas for identification purposes // this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.createUID(); // // Some example background properties // this.properties = { backgroundBarsCount: null, backgroundBarsColor1: 'transparent', backgroundBarsColor2: 'transparent', backgroundGrid: true, backgroundGridColor: '#eee', backgroundGridLinewidth: 1, backgroundGridVlines: true, backgroundGridHlines: true, backgroundGridBorder: true, backgroundGridAutofit: true, backgroundGridHlinesCount: 5, backgroundGridVlinesCount: 20, backgroundGridDashed: false, backgroundGridDotted: false, backgroundGridDashArray: null, backgroundImage : null, backgroundImageStretch: true, backgroundImageX: null, backgroundImageY: null, backgroundImageW: null, backgroundImageH: null, backgroundImageAlign: null, backgroundColor: null, backgroundBorder: false, backgroundBorderLinewidth: 1, backgroundBorderColor: '#aaa', backgroundBorderDashed: false, backgroundBorderDotted: false, backgroundBorderDashArray: null, marginLeft: 35, marginRight: 35, marginTop: 35, marginBottom: 35, textColor: 'black', textSize: 12, textFont: 'Arial, Verdana, sans-serif', textBold: false, textItalic: false, textAccessible: false, textAccessibleOverflow: 'visible', textAccessiblePointerevents: false, text: null, tooltips: null, tooltipsHighlight: true, tooltipsCssClass: 'RGraph_tooltip', tooltipsCss: null, tooltipsEffect: 'slide', tooltipsEvent: 'onclick', tooltipsPersistent: false, tooltipsFormattedThousand: ',', tooltipsFormattedPoint: '.', tooltipsFormattedDecimals: 0, tooltipsFormattedUnitsPre: '', tooltipsFormattedUnitsPost: '', tooltipsFormattedListType: 'ul', tooltipsFormattedListItems: null, tooltipsPointer: true, tooltipsPointerOffsetx: 0, tooltipsPointerOffsety: 0, tooltipsPositionStatic: true, tooltipsOffsetx: 0, tooltipsOffsety: 0, highlightStroke: 'transparent', highlightFill: 'rgba(255,255,255,0.7)', highlightFade: true, linewidth: 1, title: '', titleFont: null, titleSize: null, titleColor: null, titleBold: true, titleItalic: null, titleX: null, titleY: null, titleHalign: null, titleValign: null, titleOffsetx: 0, titleOffsety: 0, titleSubtitle: '', titleSubtitleSize: null, titleSubtitleColor: '#aaa', titleSubtitleFont: null, titleSubtitleBold: null, titleSubtitleItalic: null, titleSubtitleOffsetx: 0, titleSubtitleOffsety: 0, xaxisTitle: '', xaxisTitleBold: null, xaxisTitleItalic: null, xaxisTitleSize: null, xaxisTitleFont: null, xaxisTitleColor: null, xaxisTitleX: null, xaxisTitleY: null, xaxisTitlePos: null, yaxisTitle: '', yaxisTitleBold: null, yaxisTitleSize: null, yaxisTitleFont: null, yaxisTitleColor: null, yaxisTitleItalic: null, yaxisTitleX: null, yaxisTitleY: null, yaxisTitlePos: null, clearto: 'transparent', responsive: null, events: {}, clip: null, scale: true, scaleFactor: 2, antialiasTranslate: false, style: [] }; // // These are the properties that get scaled up if the // scale option is enabled. // this.properties_scale = [ 'backgroundGridLinewidth', 'backgroundGridHsize', 'backgroundGridVsize', 'backgroundImageX', 'backgroundImageY', 'backgroundImageW', 'backgroundImageH', 'backgroundBorderLinewidth', 'backgroundBorderDashArray', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'textSize', 'titleX', 'titleY', 'titleSize', 'titleOffsetx', 'titleOffsety', 'titleSubtitleSize', 'titleSubtitleOffsetx', 'titleSubtitleOffsety', 'yaxisTitleSize', 'yaxisTitleX', 'yaxisTitleY', 'yaxisTitleOffsetx', 'yaxisTitleOffsety', 'xaxisTitleSize', 'xaxisTitleOffsetx', 'xaxisTitleOffsety', 'xaxisTitleX', 'xaxisTitleY' ]; // // Add the reverse look-up table for property names // so that property names can be specified in any case. // this.properties_lowercase_map = []; for (var i in this.properties) { if (typeof i === 'string') { this.properties_lowercase_map[i.toLowerCase()] = i; } } // // A simple check that the browser has canvas support // if (!this.canvas) { alert('[DRAWING.BACKGROUND] No canvas support'); return; } // // Create the dollar object so that functions can be added to them // this.$0 = {}; // Easy access to properties and the path function var properties = this.properties; this.path = RGraph.pathObjectFunction; // // "Decorate" the object with the generic effects if the effects library has been included // if (RGraph.Effects && typeof RGraph.Effects.decorate === 'function') { RGraph.Effects.decorate(this); } // // A setter method for setting graph properties. It can be used like this: obj.set('colorsStroke', '#666'); // // @param name string The name of the property to set OR it can be a map // of name/value settings like what you set in the constructor // this.set = function (name) { var value = typeof arguments[1] === 'undefined' ? null : arguments[1]; // Go through all of the properties and make sure // that they're using the correct capitalisation if (typeof name === 'string') { name = this.properties_lowercase_map[name.toLowerCase()] || name; } // Go through all of the properties and make sure // that they're using the correct capitalisation name = this.properties_lowercase_map[name.toLowerCase()] || name; // Set the colorsParsed flag to false if the colors // property is being set if ( name === 'backgroundColor' || name === 'backgroundGridColor' || name === 'backgroundBarsColor1' || name === 'backgroundBarsColor2' || name === 'highlightStroke' || name === 'highlightFill' ) { this.colorsParsed = false; } // the number of arguments is only one and it's an // object - parse it for configuration data and return. if (arguments.length === 1 && typeof arguments[0] === 'object') { for (i in arguments[0]) { if (typeof i === 'string') { this.set(i, arguments[0][i]); } } return this; } properties[name] = value; return this; }; // // A getter method for retrieving graph properties. It can be used like this: obj.get('colorsStroke'); // // @param name string The name of the property to get // this.get = function (name) { // Go through all of the properties and make sure // that they're using the correct capitalisation name = this.properties_lowercase_map[name.toLowerCase()] || name; return properties[name]; }; // // Draws the circle // this.draw = function () { // MUST be the first thing that's done - but only // once!! RGraph.runOnce(`scale-up-the-canvas-once-in-the-draw-function-${this.id}-${this.uid}`, () => { // Note that were in an arrow function so the // 'this' variable is OK to be used and refers // to the RGraph Line chart object. RGraph.scale(this); }); // // Fire the onbeforedraw event // RGraph.fireCustomEvent(this, 'onbeforedraw'); // // Add any CSS that has been specified to the document. // This is general CSS and does not necessarily have to // pertain to the canvas tag. It only gets added once // to the document no matter how many times this draw // function is called. // // Add the CSS to a