// 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 RGraph = window.RGraph || {isrgraph:true,isRGraph:true,rgraph:true}; // // The bar chart constructor // RGraph.Waterfall = function (conf) { this.id = conf.id; this.canvas = document.getElementById(this.id); this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; this.canvas.__object__ = this; this.type = 'waterfall'; this.max = 0; this.data = conf.data; this.isRGraph = true; this.isrgraph = true; this.rgraph = true; this.uid = RGraph.createUID(); this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.createUID(); this.colorsParsed = false; this.coords = []; this.coordsText = []; this.original_colors = []; this.original_data = RGraph.arrayClone(conf.data); this.firstDraw = true; // After the first draw this will be false this.stopAnimationRequested = false;// Used to control the animations // Various config this.properties = { backgroundBarsCount: null, backgroundBarsColor1: 'transparent', backgroundBarsColor2: 'transparent', backgroundGrid: true, backgroundGridAutofit: true, backgroundGridAutofitAlign: true, backgroundGridColor: '#eee', backgroundGridLinewidth: 1, backgroundGridHsize: 20, backgroundGridVsize: 20, backgroundGridVlines: false, backgroundGridHlines: true, backgroundGridBorder: false, backgroundGridAlign: true, backgroundGridHlinesCount: 5, backgroundGridVlinesCount: 20, backgroundImage: null, backgroundImageStretch: true, backgroundImageX: null, backgroundImageY: null, backgroundImageW: null, backgroundImageH: null, backgroundImageAlign: null, backgroundHbars: null, backgroundBorder: false, backgroundBorderLinewidth: 1, backgroundBorderColor: '#aaa', backgroundBorderDashed: false, backgroundBorderDotted: false, backgroundBorderDashArray: null, linewidth: 1, colorsStroke: 'transparent', colors: RGraph.getColors(), colorsSequential: false, colorsConnectors: '#666', marginLeft: 35, marginRight: 35, marginTop: 35, marginBottom: 35, marginInner: 5, xaxis: false, xaxisPosition: 'bottom', xaxisLinewidth: 1, xaxisColor: 'black', xaxisTickmarks: true, xaxisTickmarksLength: 3, xaxisTickmarksLastLeft: null, xaxisTickmarksLastRight: null, xaxisTickmarksCount: null, xaxisLabels: null, xaxisLabelsFormattedDecimals: 0, xaxisLabelsFormattedUnitsPre: '', xaxisLabelsFormattedUnitsPost: '', xaxisLabelsFormattedThousand: ',', xaxisLabelsFormattedPoint: '.', xaxisLabelsSize: null, xaxisLabelsFont: null, xaxisLabelsItalic: null, xaxisLabelsBold: null, xaxisLabelsColor: null, xaxisLabelsOffsetx: 0, xaxisLabelsOffsety: 0, xaxisLabelsHalign: null, xaxisLabelsValign: null, xaxisLabelsPosition: 'section', xaxisLabelsSpecificAlign:'left', xaxisPosition: 'bottom', xaxisLabelsAngle: 0, xaxisTitle: '', xaxisTitleBold: null, xaxisTitleSize: null, xaxisTitleFont: null, xaxisTitleColor: null, xaxisTitleItalic: null, xaxisTitlePos: null, xaxisTitleOffsetx: 0, xaxisTitleOffsety: 0, xaxisTitleX: null, xaxisTitleY: null, xaxisTitleHalign: 'center', xaxisTitleValign: 'top', yaxis: false, yaxisPosition: 'left', yaxisLinewidth: 1, yaxisColor: 'black', yaxisTickmarks: true, yaxisTickmarksCount: null, yaxisTickmarksLastTop: null, yaxisTickmarksLastBottom: null, yaxisTickmarksLength: 3, yaxisScale: true, yaxisScaleMin: 0, yaxisScaleMax: null, yaxisScaleUnitsPre: '', yaxisScaleUnitsPost: '', yaxisScaleDecimals: 0, yaxisScalePoint: '.', yaxisScaleThousand: ',', yaxisScaleRound: false, yaxisScaleInvert: false, yaxisScaleFormatter: null, yaxisLabelsSpecific: null, yaxisLabelsCount: 5, yaxisLabelsOffsetx: 0, yaxisLabelsOffsety: 0, yaxisLabelsHalign: null, yaxisLabelsValign: null, yaxisLabelsFont: null, yaxisLabelsSize: null, yaxisLabelsColor: null, yaxisLabelsBold: null, yaxisLabelsItalic: null, yaxisLabelsPosition: 'edge', yaxisTitle: '', yaxisTitleBold: null, yaxisTitleSize: null, yaxisTitleFont: null, yaxisTitleColor: null, yaxisTitleItalic: null, yaxisTitlePos: null, yaxisTitleX: null, yaxisTitleY: null, yaxisTitleOffsetx: 0, yaxisTitleOffsety: 0, yaxisTitleHalign: null, yaxisTitleValign: null, yaxisTitleAccessible: null, labelsAbove: false, labelsAboveFont: null, labelsAboveSize: null, labelsAboveBold: null, labelsAboveItalic: null, labelsAboveColor: null, labelsAboveOffsetx: 0, labelsAboveOffsety: 0, labelsAboveSpecific: null, labelsAboveDecimals: 0, labelsAboveUnitsPre: '', labelsAboveUnitsPost: '', labelsAbovePoint: '.', labelsAboveThousand: ',', labelsAboveFormatter: null, labelsAboveTotalItalic: null, labelsAboveTotalBold: null, labelsAboveTotalSize: null, labelsAboveTotalFont: null, labelsAboveTotalColor: null, labelsAboveTotalDecimals: null, labelsAboveTotalUnitsPre: null, labelsAboveTotalUnitsPost: null, labelsAboveTotalPoint: null, labelsAboveTotalThousand: null, labelsAboveTotalFormatter: null, labelsAboveTotalOffsetx: 0, labelsAboveTotalOffsety: 0, textColor: 'black', textSize: 12, textFont: 'Arial, Verdana, sans-serif', textBold: false, textItalic: false, textAccessible: false, textAccessibleOverflow: 'visible', textAccessiblePointerevents: false, text: null, title: '', titleBold: true, titleFont: null, titleSize: null, titleItalic: null, titleColor: 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, shadow: false, shadowOffsetx: 2, shadowOffsety: 2, shadowBlur: 2, shadowColor: 'rgba(0,0,0,0.25)', tooltips: null, tooltipsEffect: 'slide', tooltipsCssClass: 'RGraph_tooltip', tooltipsCss: null, tooltipsEvent: 'onclick', tooltipsHighlight: true, tooltipsOverride: null, tooltipsPersistent: false, tooltipsFormattedThousand: ',', tooltipsFormattedPoint: '.', tooltipsFormattedDecimals: 0, tooltipsFormattedUnitsPre: '', tooltipsFormattedUnitsPost: '', tooltipsFormattedKeyColors: null, tooltipsFormattedKeyColorsShape: 'square', tooltipsFormattedKeyLabels: [], tooltipsFormattedListType: 'ul', tooltipsFormattedListItems: null, tooltipsFormattedTableHeaders: null, tooltipsFormattedTableData: null, tooltipsPointer: true, tooltipsPointerOffsetx: 0, tooltipsPointerOffsety: 0, tooltipsPositionStatic: true, tooltipsHotspotIgnore: null, highlightStroke: 'transparent', highlightFill: 'rgba(255,255,255,0.7)', highlightFade: true, contextmenu: null, crosshairs: false, crosshairsColor: '#333', crosshairsHline: true, crosshairsVline: true, crosshairsLinewidth: 1, annotatable: false, annotatableLinewidth: 1, annotatableColor: 'black', total: true, multiplierX: 1, // Used for animation multiplierW: 1, // Used for animation key: null, keyBackground: 'white', keyPosition: 'graph', keyHalign: 'right', keyShadow: false, keyShadowColor: '#666', keyShadowBlur: 3, keyShadowOffsetx: 2, keyShadowOffsety: 2, keyPositionGutterBoxed: false, keyPositionX: null, keyPositionY: null, keyColorShape: 'square', keyRounded: true, keyLinewidth: 1, keyColors: null, keyInteractive: false, keyInteractiveHighlightChartStroke:'#000', keyInteractiveHighlightChartFill: 'rgba(255,255,255,0.7)', keyInteractiveHighlightLabel: 'rgba(255,0,0,0.2)', keyLabelsColor: null, keyLabelsFont: null, keyLabelsSize: null, keyLabelsBold: null, keyLabelsItalic: null, keyLabelsOffsetx: 0, keyLabelsOffsety: 0, keyFormattedDecimals: 0, keyFormattedPoint: '.', keyFormattedThousand: ',', keyFormattedUnitsPre: '', keyFormattedUnitsPost: '', keyFormattedValueSpecific: null, keyFormattedItemsCount: null, barOffsetx: 0, // Used to facilitate multiple dataset Waterfall charts barOffsety: 0, // Used to facilitate multiple dataset Waterfall charts clearto: 'transparent', events: {}, clip: null, responsive: 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', 'backgroundGridDashArray', 'backgroundImageX', 'backgroundImageY', 'backgroundImageW', 'backgroundImageH', 'backgroundBorderLinewidth', 'backgroundBorderDashArray', 'xaxisLinewidth', 'xaxisTickmarksLength', 'xaxisLabelsSize', 'xaxisLabelsOffsetx', 'xaxisLabelsOffsety', 'xaxisTitleSize', 'xaxisTitleOffsetx', 'xaxisTitleOffsety', 'xaxisTitleX', 'xaxisTitleY', 'yaxisLinewidth', 'yaxisTickmarksLength', 'yaxisLabelsOffsetx', 'yaxisLabelsOffsety', 'yaxisLabelsSize', 'yaxisTitleSize', 'yaxisTitleX', 'yaxisTitleY', 'yaxisTitleOffsetx', 'yaxisTitleOffsety', 'labelsAboveSize', 'labelsAboveOffsetx', 'labelsAboveOffsety', 'labelsAboveTotalSize', 'labelsAboveTotalOffsetx', 'labelsAboveTotalOffsety', 'linewidth', 'tickmarksLinewidth', 'tickmarksSize', 'tickmarksStyleDotLinewidth', 'tickmarksStyleImageOffsetx', 'tickmarksStyleImageOffsety', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'marginInner', 'textSize', 'titleSize', 'titleX', 'titleY', 'titleOffsetx', 'titleOffsety', 'titleSubtitleSize', 'titleSubtitleOffsetx', 'titleSubtitleOffsety', 'shadowOffsetx', 'shadowOffsety', 'shadowBlur', 'keyShadowBlur', 'keyShadowOffsetx', 'keyShadowOffsety', 'keyPositionMarginHSpace', 'keyPositionX', 'keyPositionY', 'keyLinewidth', 'keyLabelsSize', 'keyLabelsOffsetx', 'keyLabelsOffsety', 'crosshairsLinewidth', 'annotatableLinewidth', 'barOffsetx', 'barOffsety' ]; // // 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; } } // Check for support if (!this.canvas) { alert('[WATERFALL] No canvas support'); return; } // Split a string this.data = RGraph.stringsToNumbers(this.data); // // Create the $ objects // // 2/5/016: Now also use this loop to go through the dat conerting // strings to floats // for (var i=0,len=this.data.length; i<=len; ++i) { // Create the object for adding event listeners this['$' + i] = {} // Ensure that the data point is numeric //if (typeof this.data[i] === 'string') { // this.data[i] = parseFloat(this.data[i]); //} } // 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); } // Add the responsive method. This method resides in the common file. this.responsive = RGraph.responsive; // // A setter // // @param name string The name of the property to set // @param value mixed The value of the property // 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; } // Set the colorsParsed flag to false if the colors // property is being set if ( name === 'colors' || name === 'keyColors' || name === 'crosshairsColor' || name === 'highlightStroke' || name === 'highlightFill' || name === 'backgroundBarsColor1' || name === 'backgroundBarsColor2' || name === 'backgroundGridColor' || name === 'colorsStroke' || name === 'xaxisColor' || name === 'yaxisColor' ) { 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 // // @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]; }; // // The function you call to draw the bar chart // 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 we're 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