// o---------------------------------------------------------------------------------o // | This file is part of the RGraph package - you can learn more at: | // | | // | https://www.rgraph.net/license.html | // | | // | RGraph is dual-licensed under the Open Source GPL license. That means that it's | // | free to use and there are no restrictions on what you can use RGraph for! | // | If the GPL license does not suit you however, then there's an inexpensive | // | commercial license option available. See the URL above 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.coords = []; this.uid = RGraph.createUID(); this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.createUID(); this.colorsParsed = false; 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: 'rgba(0,0,0,0)', backgroundBarsColor2: 'rgba(0,0,0,0)', backgroundGrid: true, backgroundGridAutofit: true, backgroundGridAutofitAlign: true, backgroundGridColor: '#ddd', backgroundGridLinewidth: 1, backgroundGridHsize: 20, backgroundGridVsize: 20, backgroundGridVlines: true, backgroundGridHlines: true, backgroundGridBorder: true, 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: '#666', colors: ['green','red','blue'], colorsSequential: false, colorsConnectors: '#666', marginLeft: 35, marginRight: 35, marginTop: 35, marginBottom: 35, marginInner: 5, xaxis: true, 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: true, 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, 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, yaxisTitle: '', yaxisTitleBold: null, yaxisTitleItalic: null, yaxisTitleSize: null, yaxisTitleFont: null, yaxisTitleColor: null, yaxisTitlePos: null, yaxisTitleAlign: 'left', yaxisTitleX: null, yaxisTitleY: null, yaxisLabels: true, yaxisLabelsCount: 5, yaxisLabelsOffsetx: 0, yaxisLabelsOffsety: 0, yaxisLabelsFont: null, yaxisLabelsSize: null, yaxisLabelsColor: null, yaxisLabelsBold: null, yaxisLabelsItalic: null, yaxisScaleMax: null, yaxisScaleMin: 0, yaxisScaleUnitsPre: '', yaxisScaleUnitsPost: '', yaxisScaleDecimals: 0, yaxisScalePoint: '.', yaxisScaleThousand: ',', yaxisScaleFormatter: 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: null, 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, 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: 'rgba(0,0,0,0)', highlightFill: 'rgba(255,255,255,0.7)', contextmenu: null, crosshairs: false, crosshairsColor: '#333', crosshairsHline: true, crosshairsVline: true, crosshairsLinewidth: 1, annotatable: false, annotatableLinewidth: 1, annotatableColor: 'black', resizable: false, resizableHandleBackground: null, 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: 'rgba(0,0,0,0)' } // // 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 () { // // Fire the onbeforedraw event // RGraph.fireCustomEvent(this, 'onbeforedraw'); // Translate half a pixel for antialiasing purposes - but only if it hasn't been // done already // // MUST be the first thing done! // if (!this.canvas.__rgraph_aa_translated__) { this.context.translate(0.5,0.5); this.canvas.__rgraph_aa_translated__ = true; } // // Parse the colors. This allows for simple gradient syntax // if (!this.colorsParsed) { this.parseColors(); // Don't want to do this again this.colorsParsed = true; } // // If the xaxisLabels option is a string then turn it // into an array. // if (properties.xaxisLabels && properties.xaxisLabels.length) { if (typeof properties.xaxisLabels === 'string') { properties.xaxisLabels = RGraph.arrayPad({ array: [], length: this.data.length + (properties.total ? 1 : 0), value: properties.xaxisLabels }); } // Label substitution // for (var i=0; i= 0 ? (coords[1] - 3 + (isTotal ? properties.labelsAboveTotalOffsety : properties.labelsAboveOffsety)) : (coords[1] + coords[3] + 3 + (isTotal ? properties.labelsAboveTotalOffsety : properties.labelsAboveOffsety)), text: str, valign: (isTotal ? this.total : this.data[i]) >= 0 ? 'bottom' : 'top', halign: 'center', tag: 'labels.above' }); } }; // // Calculates the running total from the data // // @return The resulting total from the data // this.runningTotal = function () { var runningTotal = 0; for (var i=0; i= 0 ? properties.colors[0] : properties.colors[1]; } if (properties.shadow) { RGraph.setShadow({ object: this, prefix: 'shadow' }); } else { RGraph.noShadow(this); } // // Draw the bar, first accounting for // negative heights // if (h < 0) { h = Math.abs(h); y = y - h; } this.context.rect( x + properties.barOffsetx, Math.floor(y) + properties.barOffsety, w, Math.floor(h) ); this.coords.push([x, y, w, h]); // The "runnningTotal" is also calculated by the // this.runningTotal() function runningTotal += this.data[i]; this.context.stroke(); this.context.fill(); // If this is the first bar and the X axis is at // the top - cover the top of the bar so that it // doesn't cover the X axis if (i === 0) { if (properties.xaxisPosition.toLowerCase() === 'bottom' || properties.xaxisPosition === 'center') { y = y + h; } // Redraw a bit of the X axis this.path( 'b lw % m % % l % % s %', properties.xaxisLinewidth, x - 1, y, x + 1 + w, y, properties.xaxisColor ); // Reset the linewidth this.path('lw %', properties.linewidth); // Alter the coordinates to account for the Xaxis being // drawn over the bars if (properties.xaxisPosition === 'center') { this.coords[0][3] = this.coords[0][3] - (this.properties.xaxisLinewidth / 2); } else if (properties.xaxisPosition === 'top') { this.coords[0][3] = this.coords[0][3] - (this.properties.xaxisLinewidth / 2); this.coords[0][1] = this.coords[0][1] + (this.properties.xaxisLinewidth / 2); } else { this.coords[0][3] = this.coords[0][3] - (this.properties.xaxisLinewidth / 2); } } } // Store the total this.total = runningTotal; // // Draw the final "total" bar on the right-hand-side if // required // if (properties.total) { // This is the height of the final bar if (properties.xaxisPosition === 'top') { h = this.getYCoord(Math.abs(runningTotal)) - this.getYCoord(0); } else { h = this.getYCoord(0) - this.getYCoord(Math.abs(runningTotal)); } // Set the Y (ie the start point) value if (properties.xaxisPosition == 'center') { y = runningTotal > 0 ? this.getYCoord(0) - h : this.getYCoord(0); } else if (properties.xaxisPosition == 'top') { y = this.getYCoord(0); } else { if (runningTotal > 0) { y = this.getYCoord(0) - h; } else { y = this.getYCoord(0); } } // This is the X position of the final bar x = x + (properties.marginInner * 2) + w; // Allow for sequential colors if (properties.colorsSequential) { this.context.fillStyle = properties.colors[seq] } else { // Final color this.context.fillStyle = properties.colors[2]; } // Adjust the coordinates of the final bar in // order to take account of the X axis width if (this.properties.xaxisPosition === 'center') { //value is positive if (y < this.getYCoord(0)) { h -= (this.properties.xaxisLinewidth / 2); // Value is negative } else { y += (this.properties.xaxisLinewidth / 2); h -= (this.properties.xaxisLinewidth / 2); } } else if (this.properties.xaxisPosition === 'top') { y += (this.properties.xaxisLinewidth / 2); h -= (this.properties.xaxisLinewidth / 2); } else { h -= (this.properties.xaxisLinewidth / 2); } // Draw the final total bar this.path( 'b r % % % % s % f %', x + properties.barOffsetx, y + properties.barOffsety, w, h, this.context.strokeStyle,this.context.fillStyle ); // This is set so that the next iteration of the // loop will be able to access THIS iterations // coordinates var previousCoords = [x, y, w, Math.abs(h)]; // Add the coordinates to the coords array (the previousCooords array, at // this point, is actually THIS iterations coords this.coords.push(previousCoords); } // Turn off the shadow RGraph.noShadow(this); // // This draws the connecting lines // this.context.lineWidth = 1; this.context.strokeStyle = properties.colorsConnectors; this.context.beginPath(); for (var i=1,len=this.coords.length; i 0 ? prev[1] + prev[3] : prev[1]); } else { var y = (prevData > 0 ? prev[1] : prev[1] + prev[3]); } this.context.moveTo( prev[0] + prev[2] + properties.barOffsetx, y + properties.barOffsety ); this.context.lineTo( curr[0] + properties.barOffsetx, y + properties.barOffsety ); } this.context.stroke(); }; // // When you click on the chart, this method can return the // Y value at that point. // // @param object e The event object // this.getValue = function (arg) { if (arg.length == 2) { var mouseX = arg[0]; var mouseY = arg[1]; } else { var mouseCoords = RGraph.getMouseXY(arg); var mouseX = mouseCoords[0]; var mouseY = mouseCoords[1]; } var obj = this; var xaxispos = properties.xaxisPosition; if (mouseY < properties.marginTop) { return xaxispos === 'bottom' || xaxispos === 'center' ? this.max : this.min; } else if (mouseY > (this.canvas.height - properties.marginBottom)) { return xaxispos === 'bottom' ? this.min : this.max; } if ( properties.xaxisPosition == 'center') { var value = (( (obj.grapharea / 2) - (mouseY - properties.marginTop)) / obj.grapharea) * (obj.max - obj.min); value *= 2; value > 0 ? value += this.min : value -= this.min; return value; } else if ( properties.xaxisPosition == 'top') { var value = ((obj.grapharea - (mouseY - properties.marginTop)) / obj.grapharea) * (obj.max - obj.min); value = Math.abs(obj.max - value) * -1; return value; } else { var value = ((obj.grapharea - (mouseY - properties.marginTop)) / obj.grapharea) * (obj.max - obj.min); value += obj.min; return value; } }; // // Not used by the class during creating the graph, but is used by event handlers // to get the coordinates (if any) of the selected bar // // @param object e The event object // this.getShape = function (e) { // // Loop through the bars determining if the mouse is over a bar // for (var i=0,len=this.coords.length; i= left && mouseX <= (left + width) && mouseY >= top && mouseY <= top + height && (this.properties.clip ? RGraph.clipTo.test(this, mouseX, mouseY) : true) ) { var tooltip = RGraph.parseTooltipText ? RGraph.parseTooltipText(properties.tooltips, i) : null; return { object: this, x: left, y: top, width: width, height: height, index: 0, dataset: i, sequentialIndex: i, label: properties.xaxisLabels && typeof properties.xaxisLabels[i] === 'string' ? properties.xaxisLabels[i] : null, tooltip: typeof tooltip === 'string' ? tooltip : null }; } } return null; }; // // The Waterfall is slightly different to Bar/Line charts so has this function to get the max value // this.getMax = function (data) { var runningTotal = 0, max = 0; for (var i=0,len=data.length; i this.marginLeft && mouseXY[0] < (this.canvas.width - this.marginRight) && mouseXY[1] > this.marginTop && mouseXY[1] < (this.canvas.height - this.marginBottom) ) { return this; } }; // // This method returns the appropriate Y coord for the given value // // @param number value The value // this.getYCoord = function (value) { // X axis position in the center if (properties.xaxisPosition == 'center') { if (value < (-1 * this.max)) { return null; } var coord = (value / this.max) * (this.grapharea / 2); return this.marginTop + (this.grapharea / 2) - coord; // X axis position at the top } else if (properties.xaxisPosition == 'top') { if (value < 0) return null; var coord = (value / this.max) * this.grapharea; return this.marginTop + coord; } else { var coord = ( (value - this.scale2.min) / (this.max - this.scale2.min) ) * this.grapharea; coord = coord + this.marginBottom; return this.canvas.height - coord; } }; // // This allows for easy specification of gradients // this.parseColors = function () { // Save the original colors so that they can be restored when the canvas is reset if (this.original_colors.length === 0) { this.original_colors.colors = RGraph.arrayClone(properties.colors); this.original_colors.keyColors = RGraph.arrayClone(properties.keyColors); this.original_colors.crosshairsColor = RGraph.arrayClone(properties.crosshairsColor); this.original_colors.highlightStroke = RGraph.arrayClone(properties.highlightStroke); this.original_colors.highlightFill = RGraph.arrayClone(properties.highlightFill); this.original_colors.backgroundBarsColor1 = RGraph.arrayClone(properties.backgroundBarsColor1); this.original_colors.backgroundBarsColor2 = RGraph.arrayClone(properties.backgroundBarsColor2); this.original_colors.backgroundGridColor = RGraph.arrayClone(properties.backgroundGridColor); this.original_colors.colorsStroke = RGraph.arrayClone(properties.colorsStroke); this.original_colors.xaxisColor = RGraph.arrayClone(properties.xaxisColor); this.original_colors.yaxisColor = RGraph.arrayClone(properties.yaxisColor); } // Colors var colors = properties.colors; if (colors) { for (var i=0,len=colors.length; i= 0) { pos += this.data[i]; } else { neg -= this.data[i]; } tot += this.data[i] } if (index === 0) { return pos; } else if (index === 1) { return neg; } else { return tot; } } }; // // Returns how many data-points there should be when a string // based key property has been specified. For example, this: // // key: '%{property:_labels[%{index}]} %{value_formatted}' // // ...depending on how many bits of data ther is might get // turned into this: // // key: [ // '%{property:_labels[%{index}]} %{value_formatted}', // '%{property:_labels[%{index}]} %{value_formatted}', // '%{property:_labels[%{index}]} %{value_formatted}', // '%{property:_labels[%{index}]} %{value_formatted}', // '%{property:_labels[%{index}]} %{value_formatted}', // ] // // ... ie in that case there would be 4 data-points so the // template is repeated 4 times. // this.getKeyNumDatapoints = function () { return this.properties.total ? 3 : 2; }; // // This function handles clipping to scale values. Because // each chart handles scales differently, a worker function // is needed instead of it all being done centrally in the // RGraph.clipTo.start() function. // // @param string clip The clip string as supplied by the // user in the chart configuration // this.clipToScaleWorker = function (clip) { // The Regular expression is actually done by the // calling RGraph.clipTo.start() function in the core // library if (RegExp.$1 === 'min') from = this.scale2.min; else from = Number(RegExp.$1); if (RegExp.$2 === 'max') to = this.scale2.max; else to = Number(RegExp.$2); if (this.properties.xaxisPosition === 'top') { var y1 = this.getYCoord(from), y2 = this.getYCoord(to); if (RegExp.$1 === 'min') y1 -= this.properties.marginTop; if (RegExp.$2 === 'max') y2 = 0; this.path( 'sa b r % % % % cl', 0,y1,this.canvas.width, Math.max(y1, y2) - Math.min(y1, y2) ); } else { var y1 = this.getYCoord(from), y2 = this.getYCoord(to); if (RegExp.$1 === 'min') y1 = this.canvas.height; if (RegExp.$2 === 'max') y2 = 0; this.path( 'sa b r % % % % cl', 0,y2,this.canvas.width, Math.max(y1, y2) - Math.min(y1, y2) ); } }; // // This function handles TESTING clipping to scale values. // Because each chart handles scales differently, a worker // function is needed instead of it all being done // centrally in the RGraph.clipTo.start() function. // // @param string clip The clip string as supplied by the // user in the chart configuration // this.clipToScaleTestWorker = function (clip) { // The Regular expression is actually done by the // calling RGraph.clipTo.start() function in the core // library if (RegExp.$1 === 'min') from = this.scale2.min; else from = Number(RegExp.$1); if (RegExp.$2 === 'max') to = this.scale2.max; else to = Number(RegExp.$2); if (this.properties.xaxisPosition === 'top') { var y1 = this.getYCoord(from), y2 = this.getYCoord(to); if (RegExp.$1 === 'min') y1 -= this.properties.marginTop; if (RegExp.$2 === 'max') y2 = 0; this.path( 'sa b r % % % % cl', 0,y1,this.canvas.width, Math.max(y1, y2) - Math.min(y1, y2) ); } else { var y1 = this.getYCoord(from), y2 = this.getYCoord(to); if (RegExp.$1 === 'min') y1 = this.canvas.height; if (RegExp.$2 === 'max') y2 = 0; this.path( 'b r % % % %', 0,y2,this.canvas.width, Math.max(y1, y2) - Math.min(y1, y2) ); } }; // // Now, because canvases can support multiple charts, canvases must always be registered // RGraph.register(this); // // This is the 'end' of the constructor so if the first argument // contains configuration data - handle that. // RGraph.parseObjectStyleConfig(this,conf.options); return this; };