// 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 horizontal bar chart constructor. The horizontal bar is a minor variant // on the bar chart. If you have big labels, this may be useful as there is usually // more space available for them. // RGraph.HBar = function (conf) { // // Allow for object config style // var id = conf.id, canvas = document.getElementById(id), data = conf.data; this.id = id; this.canvas = canvas; this.context = this.canvas.getContext ? this.canvas.getContext("2d", {alpha: (typeof id === 'object' && id.alpha === false) ? false : true}) : null; this.canvas.__object__ = this; this.data = data; this.type = 'hbar'; 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.coords2 = []; this.coordsText = []; this.coordsLines = []; this.coordsSpline = []; this.original_colors = []; this.firstDraw = true; // After the first draw this will be false this.stopAnimationRequested = false;// Used to control the animations this.yaxisLabelsSize = 0; // Used later when the margin is auto calculated this.yaxisTitleSize = 0; // Used later when the margin is auto calculated this.max = 0; this.stackedOrGrouped = false; // Default properties this.properties = { marginLeft: 75, marginLeftAuto: true, marginRight: 35, marginTop: 35, marginBottom: 35, marginInner: 2, marginInnerGrouped: 2, backgroundBarsCount: null, backgroundBarsColor1: 'transparent', backgroundBarsColor2: 'transparent', backgroundGrid: true, backgroundGridColor: '#eee', backgroundGridLinewidth: 1, backgroundGridHsize: 25, backgroundGridVsize: 25, backgroundGridHlines: false, backgroundGridVlines: true, backgroundGridBorder: false, backgroundGridAutofit: true, backgroundGridAutofitAlign:true, backgroundGridHlinesCount: null, backgroundGridVlinesCount: 5, backgroundGridDashed: false, backgroundGridDotted: false, backgroundColor: null, backgroundBorder: false, backgroundBorderLinewidth: 1, backgroundBorderColor: '#aaa', backgroundBorderDashed: false, backgroundBorderDotted: false, backgroundBorderDashArray: null, linewidth: 1, title: '', titleBold: true, titleItalic: null, titleFont: null, titleSize: 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, textSize: 12, textColor: 'black', textFont: 'Arial, Verdana, sans-serif', textBold: false, textItalic: false, textAngle: 0, textAccessible: false, textAccessibleOverflow: 'visible', textAccessiblePointerevents: false, text: null, colors: RGraph.getColors(), colorsSequential: false, colorsStroke: 'transparent', xaxis: false, xaxisLinewidth: 1, xaxisColor: 'black', xaxisPosition: 'top', xaxisTickmarks: true, xaxisTickmarksLength: 3, xaxisTickmarksLastLeft: null, xaxisTickmarksLastRight: null, xaxisTickmarksCount: null, xaxisLabels: true, xaxisLabelsCount: 5, xaxisLabelsBold: null, xaxisLabelsItalic: null, xaxisLabelsFont: null, xaxisLabelsSize: null, xaxisLabelsColor: null, xaxisLabelsSpecific: null, xaxisLabelsAngle: 0, xaxisLabelsOffsetx: 0, xaxisLabelsOffsety: 0, xaxisLabelsHalign: null, xaxisLabelsValign: null, xaxisLabelsPosition: 'edge', xaxisLabelsSpecificAlign:'left', xaxisScale: true, xaxisScaleUnitsPre: '', xaxisScaleUnitsPost: '', xaxisScaleMin: 0, xaxisScaleMax: 0, xaxisScalePoint: '.', xaxisScaleThousand: ',', xaxisScaleDecimals: null, xaxisScaleZerostart: true, xaxisTitle: '', xaxisTitleBold: null, xaxisTitleItalic: null, xaxisTitleSize: null, xaxisTitleFont: null, xaxisTitleColor: null, xaxisTitleX: null, xaxisTitleY: null, xaxisTitleOffsetx: 0, xaxisTitleOffsety: 0, xaxisTitlePos: null, xaxisTitleHalign: null, xaxisTitleValign: null, yaxis: false, yaxisLinewidth: 1, yaxisColor: 'black', yaxisTickmarks: true, yaxisTickmarksCount: null, yaxisTickmarksLastTop: null, yaxisTickmarksLastBottom: null, yaxisTickmarksLength: 3, yaxisScale: false, yaxisLabels: null, yaxisLabelsCount: null, // Not used by the HBar yaxisLabelsOffsetx: 0, yaxisLabelsOffsety: 0, yaxisLabelsHalign: null, yaxisLabelsValign: null, yaxisLabelsFont: null, yaxisLabelsSize: null, yaxisLabelsColor: null, yaxisLabelsBold: null, yaxisLabelsItalic: null, yaxisLabelsPosition: 'section', yaxisLabelsFormattedDecimals: 0, yaxisLabelsFormattedPoint: '.', yaxisLabelsFormattedThousand: ',', yaxisLabelsFormattedUnitsPre: '', yaxisLabelsFormattedUnitsPost: '', yaxisPosition: 'left', yaxisTitle: 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, labelsAbove: false, labelsAboveDecimals: 0, labelsAboveSpecific: null, labelsAboveUnitsPre: '', labelsAboveUnitsPost: '', labelsAboveColor: null, labelsAboveFont: null, labelsAboveSize: null, labelsAboveBold: null, labelsAboveItalic: null, labelsAboveOffsetx: 0, labelsAboveOffsety: 0, labelsAboveBackground: 'transparent', labelsInbar: false, labelsInbarHalign: 'center', labelsInbarValign: 'center', labelsInbarFont: null, labelsInbarSize: null, labelsInbarBold: null, labelsInbarItalic: null, labelsInbarColor: null, labelsInbarBackground: null, labelsInbarBackgroundPadding: 0, labelsInbarUnitsPre: null, labelsInbarUnitsPost: null, labelsInbarPoint: null, labelsInbarThousand: null, labelsInbarFormatter: null, labelsInbarDecimals: null, labelsInbarOffsetx: 0, labelsInbarOffsety: 0, labelsInbarSpecific: null, labelsInbarFormatter: null, contextmenu: null, key: null, keyBackground: 'white', keyPosition: 'graph', keyHalign: 'right', keyShadow: false, keyShadowColor: '#666', keyShadowBlur: 3, keyShadowOffsetx: 2, keyShadowOffsety: 2, keyPositionMarginBoxed: false, keyPositionMarginHSpace: 0, keyPositionX: null, keyPositionY: null, keyColorShape: 'square', keyRounded: true, keyLinewidth: 1, keyColors: null, keyInteractive: false, keyInteractiveHighlightChartLinewidth: 2, keyInteractiveHighlightChartStroke: 'black', 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, unitsIngraph: false, shadow: false, shadowColor: '#666', shadowBlur: 3, shadowOffsetx: 3, shadowOffsety: 3, grouping: 'grouped', tooltips: null, tooltipsEvent: 'onclick', tooltipsEffect: 'slide', tooltipsCssClass: 'RGraph_tooltip', tooltipsCss: null, tooltipsHighlight: true, 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, tooltipsHotspotYonly: false, tooltipsHotspotIgnore: null, tooltipsHotspotShape: 'rect', highlightFill: 'rgba(255,255,255,0.7)', highlightStroke: 'transparent', highlightStyle: null, highlightFade: true, annotatable: false, annotatableColor: 'black', annotatableLinewidth: 1, redraw: true, variant: 'hbar', variantThreedAngle: 0.1, variantThreedOffsetx: 10, variantThreedOffsety: 5, variantThreedXaxis: true, variantThreedYaxis: true, variantThreedXaxisColor: '#ddd', variantThreedYaxisColor: '#ddd', variantDumbbellLinewidth: 8, variantDumbbellEndLeft: true, variantDumbbellEndRight: true, variantDumbbellEndRadius: 13, variantDumbbellEndLeftRadius: null, variantDumbbellEndRightRadius: null, adjustable: false, adjustableOnly: null, crosshairs: false, crosshairsColor: '#333', crosshairsLinewidth: 1, crosshairsHline: true, crosshairsVline: true, crosshairsSnapToScale: false, corners: 'round', cornersRoundRadius: 5, cornersRoundTop: true, cornersRoundBottom: true, cornersRoundTopRadius: null, cornersRoundBottomRadius: null, line: false, lineColor: 'black', lineLinejoin: 'round', lineLinecap: 'round', lineLinewidth: 1, lineShadow: false, lineShadowColor: '#666', lineShadowBlur: 2, lineShadowOffsetx: 2, lineShadowOffsety: 2, lineSpline: false, lineTickmarksStyle: null, lineTickmarksSize: 5, lineTickmarksDrawNull: false, lineTickmarksDrawNonNull: false, lineFilled: false, lineFilledColor: null, animationTraceClip: 1, clearto: 'rgba(0,0,0,0)', 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', 'linewidth', 'tickmarksLinewidth', 'tickmarksSize', 'tickmarksStyleDotLinewidth', 'tickmarksStyleImageOffsetx', 'tickmarksStyleImageOffsety', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'marginInner', 'marginInnerGrouped', 'textSize', 'titleSize', 'titleX', 'titleY', 'titleOffsetx', 'titleOffsety', 'titleSubtitleSize', 'titleSubtitleOffsetx', 'titleSubtitleOffsety', 'shadowOffsetx', 'shadowOffsety', 'shadowBlur', 'tooltipsHotspotSize', 'highlightPointRadius', 'highlightDatasetLinewidth', 'keyShadowBlur', 'keyShadowOffsetx', 'keyShadowOffsety', 'keyPositionMarginHSpace', 'keyPositionX', 'keyPositionY', 'keyLinewidth', 'keyLabelsSize', 'crosshairsLinewidth', 'annotatableLinewidth', 'variantThreedOffsetx', 'variantThreedOffsety', 'variantDumbbellLinewidth', 'variantDumbbellEndRadius', 'variantDumbbellEndLeftRadius', 'variantDumbbellEndRightRadius', 'cornersRoundRadius', 'cornersRoundTopRadius', 'cornersRoundBottomRadius', 'labelsInbarSize', 'labelsInbarBackgroundPadding', 'labelsInbarOffsetx', 'labelsInbarOffsety', 'lineLinewidth', 'lineShadowBlur', 'lineShadowOffsetx', 'lineShadowOffsety', 'lineTickmarksSize' ]; // // 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('[HBAR] No canvas support'); return; } // // Allow the data to be given as a string // this.data = RGraph.stringsToNumbers(this.data); // This loop is used to check for stacked or grouped charts and now // also to convert strings to numbers. And now also undefined values // (29/07/2016 for (i=0,len=this.data.length; i { // 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