// 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.Bar = function (conf) { var id = conf.id, canvas = document.getElementById(id), data = conf.data; // Get the canvas and context objects this.id = id; this.canvas = canvas; this.context = this.canvas.getContext('2d'); this.canvas.__object__ = this; this.type = 'bar'; this.max = 0; this.stackedOrGrouped = false; 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.original_colors = []; this.cachedBackgroundCanvas = null; this.firstDraw = true; // After the first draw this will be false this.stopAnimationRequested = false;// Used to control the animations // Various config type stuff this.properties = { backgroundBarsCount: null, backgroundBarsColor1: 'transparent', backgroundBarsColor2: 'transparent', backgroundGrid: true, backgroundGridColor: '#eee', backgroundGridLinewidth: 1, backgroundGridHsize: 20, backgroundGridVsize: 20, backgroundGridVlines: false, backgroundGridHlines: true, backgroundGridBorder: false, backgroundGridAutofit: true, backgroundGridAutofitAlign: true, backgroundGridHlinesCount: 5, backgroundGridDashed: false, backgroundGridDotted: false, backgroundGridDashArray: null, backgroundGridThreedYaxis: true, backgroundImage: null, backgroundImageStretch: true, backgroundImageX: null, backgroundImageY: null, backgroundImageW: null, backgroundImageH: null, backgroundImageAlign: null, backgroundColor: null, backgroundHbars: null, backgroundBorder: false, backgroundBorderLinewidth: 1, backgroundBorderColor: '#aaa', backgroundBorderDashed: false, backgroundBorderDotted: false, backgroundBorderDashArray: null, marginTop: 35, marginBottom: 35, marginLeft: 35, marginRight: 35, marginInner: 5, marginInnerGrouped: 1, labelsIngraph: null, labelsIngraphFont: null, labelsIngraphSize: null, labelsIngraphColor: null, labelsIngraphBold: null, labelsIngraphItalic: null, labelsIngraphOffsetx: 0, labelsIngraphOffsety: 0, labelsAbove: false, labelsAboveDecimals: 0, labelsAboveSize: null, labelsAboveColor: null, labelsAboveBold: null, labelsAboveItalic: null, labelsAboveFont: null, labelsAbovePoint: '.', labelsAboveThousand: ',', labelsAboveBackground:'transparent', labelsAboveAngle: null, labelsAboveOffset: null, labelsAboveOffsetx: 0, labelsAboveOffsety: 0, labelsAboveUnitsPre: '', labelsAboveUnitsPost:'', labelsAboveFormatter:null, yaxis: false, 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', yaxisPosition: 'left', yaxisTitle: '', yaxisTitleAccessible: null, 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, xaxis: false, xaxisPosition: 'bottom', xaxisLinewidth: 1, xaxisColor: 'black', xaxisTickmarks: true, xaxisTickmarksLength: 3, xaxisTickmarksLastLeft: null, xaxisTickmarksLastRight: null, xaxisTickmarksCount: null, xaxisLabels: null, xaxisLabelsSize: null, xaxisLabelsFont: null, xaxisLabelsItalic: null, xaxisLabelsBold: null, xaxisLabelsColor: null, xaxisLabelsFormattedDecimals: 0, xaxisLabelsFormattedPoint: '.', xaxisLabelsFormattedThousand: ',', xaxisLabelsFormattedUnitsPre: '', xaxisLabelsFormattedUnitsPost: '', 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: null, xaxisTitleValign: null, textItalic: false, textBold: false, textColor: 'black', textSize: 12, textFont: 'Arial, Verdana, sans-serif', textAccessible: false, textAccessibleOverflow: 'visible', textAccessiblePointerevents: false, text: null, title: '', titleX: null, titleY: null, titleHalign: null, titleValign: null, titleFont: null, titleSize: null, titleColor: null, titleBold: true, titleItalic: null, titleOffsetx: 0, titleOffsety: 0, titleSubtitle: '', titleSubtitleSize: null, titleSubtitleColor: '#aaa', titleSubtitleFont: null, titleSubtitleBold: null, titleSubtitleItalic: null, titleSubtitleOffsetx: 0, titleSubtitleOffsety: 0, colorsStroke: 'transparent', colors: RGraph.getColors(), colorsSequential: false, colorsReverse: false, grouping: 'grouped', variant: 'bar', variantSketchVerticals: true, variantThreedXaxis: true, variantThreedYaxis: true, variantThreedAngle: 0.1, variantThreedOffsetx: 10, variantThreedOffsety: 5, variantThreedXaxisColor: '#ddd', variantThreedYaxisColor: '#ddd', variantDumbbellLinewidth: 8, variantDumbbellEndTop: true, variantDumbbellEndBottom: true, variantDumbbellEndRadius: 13, variantDumbbellEndTopRadius: null, variantDumbbellEndBottomRadius: null, shadow: false, shadowColor: '#aaa', shadowOffsetx: 0, shadowOffsety: 0, shadowBlur: 15, tooltips: null, tooltipsEffect: 'slide', tooltipsCssClass: 'RGraph_tooltip', tooltipsCss: null, tooltipsEvent: 'onclick', tooltipsHighlight: true, tooltipsPersistent: false, tooltipsHotspotXonly: false, tooltipsHotspotIgnore: 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, highlightStroke: 'transparent', highlightFill: 'rgba(255,255,255,0.7)', highlightFade: true, key: null, keyBackground: 'white', keyPosition: 'graph', keyShadow: false, keyShadowColor: '#666', keyShadowBlur: 3, keyShadowOffsetx: 2, keyShadowOffsety: 2, keyPositionMarginBoxed:false, keyPositionMarginHSpace: 0, keyPositionX: null, keyPositionY: null, keyInteractive: false, keyInteractiveHighlightChartLinewidth: 2, keyInteractiveHighlightChartStroke: 'black', keyInteractiveHighlightChartFill: 'rgba(255,255,255,0.7)', keyInteractiveHighlightLabel: 'rgba(255,0,0,0.2)', keyHalign: 'right', keyColorShape: 'square', keyRounded: true, keyLinewidth: 1, keyColors: null, keyLabelsColor: null, keyLabelsSize: null, keyLabelsFont: null, keyLabelsBold: null, keyLabelsItalic: null, keyLabelsOffsetx: 0, keyLabelsOffsety: 0, keyFormattedDecimals: 0, keyFormattedPoint: '.', keyFormattedThousand: ',', keyFormattedUnitsPre: '', keyFormattedUnitsPost: '', keyFormattedValueSpecific: null, keyFormattedItemsCount: null, contextmenu: null, crosshairs: false, crosshairsColor: '#333', crosshairsLinewidth: 1, crosshairsHline: true, crosshairsVline: true, crosshairsSnapToScale: false, linewidth: 1, annotatable: false, annotatableLinewidth: 1, annotatableColor: 'black', adjustable: false, adjustableOnly: null, beveled: false, errorbars: false, errorbarsColor: 'black', errorbarsCapped: true, errorbarsCappedWidth: 14, errorbarsLinewidth: 1, combinedEffect: null, combinedEffectOptions: null, combinedEffectCallback: null, corners: 'round', cornersRoundRadius: 5, cornersRoundLeft: true, cornersRoundRight: true, cornersRoundLeftRadius: null, cornersRoundRightRadius: null, responsive: null, clearto: 'transparent', style: 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', 'backgroundGridDashArray', 'backgroundGridHsize', 'backgroundGridVsize', 'backgroundImageX', 'backgroundImageY', 'backgroundImageW', 'backgroundImageH', 'backgroundBorderLinewidth', 'backgroundBorderDashArray', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'marginInner', 'marginInnerGrouped', 'labelsIngraphSize', 'labelsIngraphOffsetx', 'labelsIngraphOffsety', 'labelsAboveSize', 'labelsAboveOffset', 'labelsAboveOffsetx', 'labelsAboveOffsety', 'yaxisLinewidth', 'yaxisTickmarksLength', 'yaxisLabelsOffsetx', 'yaxisLabelsOffsety', 'yaxisLabelsSize', 'yaxisTitleSize', 'yaxisTitleX', 'yaxisTitleY', 'yaxisTitleOffsetx', 'yaxisTitleOffsety', 'xaxisLinewidth', 'xaxisTickmarksLength', 'xaxisLabelsSize', 'xaxisLabelsOffsetx', 'xaxisLabelsOffsety', 'xaxisTitleSize', 'xaxisTitleOffsetx', 'xaxisTitleOffsety', 'xaxisTitleX', 'xaxisTitleY', 'textSize', 'titleX', 'titleY', 'titleSize', 'titleOffsetx', 'titleOffsety', 'titleSubtitleSize', 'titleSubtitleOffsetx', 'titleSubtitleOffsety', 'variantThreedOffsetx', 'variantThreedOffsety', 'variantDumbbellLinewidth', 'variantDumbbellEndRadius', 'variantDumbbellEndTopRadius', 'variantDumbbellEndBottomRadius', 'shadowOffsetx', 'shadowOffsety', 'shadowBlur', 'tooltipsPointerOffsetx', 'tooltipsPointerOffsety', 'keyShadowBlur', 'keyShadowOffsetx', 'keyShadowOffsety', 'keyPositionX', 'keyPositionY', 'keyInteractiveHighlightChartLinewidth', 'keyLinewidth', 'keyLabelsSize', 'keyLabelsOffsetx', 'keyLabelsOffsety', 'crosshairsLinewidth', 'linewidth', 'annotatableLinewidth', 'errorbarsCappedWidth', 'errorbarsLinewidth', 'cornersRoundRadius', 'cornersRoundLeftRadius', 'cornersRoundRightRadius', 'variantThreedOffsetx', 'variantThreedOffsety' ]; // // 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('[BAR] No canvas support'); return; } // // Convert strings into numbers. Also converts undefined // elements to null // data = RGraph.stringsToNumbers(data); // // Determine whether the chart will contain stacked or // grouped bars // for (var i=0; i { // 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); }); // MUST be the second thing that's done!! // // 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