Documentation IntroductionData Visualization can be understood as a graphical presentation of data to uncover the underlying information that it holds and allow the users to identify the patterns present in it. By delivering information in a vibrant and interactive structure it facilitates users to make quick decisions based upon their roles. What makes a data visualization even more powerful is its ability to process data in real time allowing immediacy in making a decision. On contrary to batch or event-driven visualization real-time analytics is the state of the art tool for any individual or organisation who must take tactical or operational decisions on the fly.
With support for more than 20 different basic and advanced visualizations, the users can view the data from various dimensions whether it be for distribution analytics, relationship analytics or comparison analytics. The Flair BI visualization library is completely open source, allowing any data enthusiasts to use it to create their own custom Business Intelligence tool or simply use the visualizations in their personal projects.
InstallationFlair-Visualizations can be installed via npm or bower. It is recommended to get Flair-Visualizations this way.
npmnpm install flair-visualizations bowerbower install flair-visualizations Global_Config Body Properties (These are common for all visualizations)Property Name Config Property Name Description Default Value Possible Values Show X Axis showXaxis Boolean that says if x axis should be shown TRUE True Show Y Axis showYaxis Boolean that says if y axis should be shown TRUE True X Axis Colour xAxisColor Colour of X axis #676a6c Y Axis Colour yAxisColor Colour of Y axis #676a6c Show X Axis Label showXaxisLabel Boolean that says if x axis label should be shown TRUE True Show Y Axis Label showYaxisLabel Boolean that says if y axis label should be shown TRUE True Show Legend showLegend Boolean that says if legend should be shown TRUE True Legend position legendPosition Legend position with sides Top Top Show Grid showGrid Boolean to Show Grid or not TRUE True Stacked stacked Boolean that says if chart is stacked TRUE True
Charts CLUSTERED_VERTICAL_BAR_CHARTType Required Optional Dimensions 1 0 Measures 1 4
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname
MeasuresProperty Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9
CLUSTERED_HORIZONTAL_BAR_CHART Type Required Optional Dimensions 1 0 Measures 1 4
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname
MeasuresProperty Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9
STACKED_HORIZONTAL_BAR_CHARTType Required Optional Dimensions 1 0 Measures 1 4
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname
MeasuresProperty Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9
STACKED_VERTICAL_BAR_CHARTType Required Optional Dimensions 1 0 Measures 1 4
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname
MeasuresProperty Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9
LINE_CHARTType Required Optional Dimensions 1 0 Measures 1 4
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname
MeasuresProperty Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9 Line Chart Point type pointType Type of points Circle Circle,Cross,CrossRot,Dash,Line,Rect,RectRounded,RectRot,Star,Triangle Line Type lineType Types of line charts Line Area/Line
COMBO_CHARTType Required Optional Dimensions 1 0 Measures 1 4
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname
MeasuresProperty Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9 Line Chart Point type pointType Type of points Circle Circle,Cross,CrossRot,Dash,Line,Rect,RectRounded,RectRot,Star,Triangle Line Type lineType Types of line charts Line Area/Line Combo chart type comboChartType line or bar Bar Bar/Line
PIE_CHARTType Required Optional Dimensions 1 0 Measures 1 0
Configuration Properties Viz PropertiesProperty Name Config Property Name Description Default Value Possible Values Show value as valueAs show labels as option in piece lable Label Label/Percentage/Value Value as Arc valueAsArc Boolean that says value on the segment should be in arc or not TRUE true/false Value position valuePosition Position of value outside or inside pie segment Border Border/Outside
DOUGHNUT_CHARTType Required Optional Dimensions 1 0 Measures 1 0
Configuration Properties Viz PropertiesProperty Name Config Property Name Description Default Value Possible Values Show value as valueAs show labels as option in piece lable Label Label/Percentage/Value Value as Arc valueAsArc Boolean that says value on the segment should be in arc or not TRUE true/false Value position valuePosition Position of value outside or inside pie segment Border Border/Outside
DimensionsProperty Name Config Property Name Description Default Value Possible Values Display name dimensionDisplayName A Display name for Dimension Displayname Display name measureDisplayName A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Text colour fontColor The text colour #617c8c Font size fontSize Size of fonts 9
GAUGE_CHARTType Required Optional Dimensions 0 0 Measures 2 0
Configuration Properties Viz PropertiesProperty Name Config Property Name Description Default Value Possible Values Gauge Type gaugeType Type of gauges Half Circle Half Circle/Radial
DimensionsProperty Name Config Property Name Description Default Value Possible Values Value on Points targetShowValues Show value on points for Target Measure FALSE True Display name targetDisplayName A Display name for Target Measure Displayname Font style targetFontStyle Style of fonts for Target Measure Normal Normal/Italique/Oblique Font weight targetFontWeight Weight of fonts for Target Measure Normal Normal/Bold/100-900 Number format targetNumberFormat Possible number formats for Target Measure Actual K,M,B,Actual Text colour targetTextColor The text colour for Target Measure #617c8c Display colour targetDisplayColor An display colour for Target Measure null Value on Points showValues Show value on points FALSE True Display name displayName A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Enable Gradient Color isGradient Enable Gradient Color for Source Measure FALSE True
TABLEType Required Optional Dimensions 1 9 Measures 1 9
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Display name displayNameForDimension A Display name for Dimension Displayname Font style fontStyleForDimension Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeightForDimension Weight of fonts for Dimension Normal Normal/Bold/100-900 Text colour textColorForDimension The text colour for Dimension #617c8c Font size fontSizeForDimension Size of fonts for Dimension 9 Cell colour cellColorForDimension Cell colour for table cells for Dimension rgba(255, 255, 255, 1) Text colour expression textColorExpressionForDimension The text colour expression for Dimension null Text alignment textAlignmentForDimension Alignment of text for Dimension Center Center/Left/Right
MeasuresProperty Name Config Property Name Description Default Value Possible Values Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyleForMeasure Style of fonts for Measure Normal Normal/Italique/Oblique Font weight fontWeightForMeasure Weight of fonts for Measure Normal Normal/Bold/100-900 Text colour textColorForMeasure The text colour for Measure #617c8c Font size fontSizeForMeasure Size of fonts for Measure 9 Cell colour cellColorForMeasure Cell colour for table cells for Measure rgba(255, 255, 255, 1) Text colour expression textColorExpressionForMeasure The text colour expression for Measure null Cell colour expression cellColorExpressionForMeasure Expression to customize cell colour of table cells null Icon name iconNameForMeasure An icon name for Measure null Icon Expression iconExpressionForMeasure An icon expression for Measure null Text alignment textAlignmentForMeasure Alignment of text for Measure Center Center/Left/Right Icon position iconPositionForMeasure An icon position for Measure Center Center/Left/Right Number format numberFormatForMeasure Possible number formats for Measure Actual K,M,B,Actual
PIVOTTABLEType Required Optional Dimensions 1 4 Measures 1 9
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Display name displayNameForDimension A Display name for Dimension Displayname Font style fontStyleForDimension Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeightForDimension Weight of fonts for Dimension Normal Normal/Bold/100-900 Text colour textColorForDimension The text colour for Dimension #617c8c Font size fontSizeForDimension Size of fonts for Dimension 9 Cell colour cellColorForDimension Cell colour for table cells for Dimension rgba(255, 255, 255, 1) Text colour expression textColorExpressionForDimension The text colour expression for Dimension null Text alignment textAlignmentForDimension Alignment of text for Dimension Center Center/Left/Right Pivot isPivoted Pivot the dimension FALSE true/false
MeasuresProperty Name Config Property Name Description Default Value Possible Values Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyleForMeasure Style of fonts for Measure Normal Normal/Italique/Oblique Font weight fontWeightForMeasure Weight of fonts for Measure Normal Normal/Bold/100-900 Text colour textColorForMeasure The text colour for Measure #617c8c Font size fontSizeForMeasure Size of fonts for Measure 9 Cell colour cellColorForMeasure Cell colour for table cells for Measure rgba(255, 255, 255, 1) Text colour expression textColorExpressionForMeasure The text colour expression for Measure null Cell colour expression cellColorExpressionForMeasure Expression to customize cell colour of table cells null Icon name iconNameForMeasure An icon name for Measure null Icon Expression iconExpressionForMeasure An icon expression for Measure null Text alignment textAlignmentForMeasure Alignment of text for Measure Center Center/Left/Right Icon position iconPositionForMeasure An icon position for Measure Center Center/Left/Right Number format numberFormatForMeasure Possible number formats for Measure Actual K,M,B,Actual Icon Font weight iconFontWeight Weight of icon fonts Normal Normal/Bold/100-900 Icon colour iconColor An Icon colour null
MAPType Required Optional Dimensions 1 1 Measures 1 1
Configuration Properties DimensionsConfig Property Name Description Default Value Possible Values numberFormat Possible number formats Actual K,M,B,Actual displayColor An display colour null
MeasuresProperty Name Config Property Name Description Default Value Possible Values Border colour borderColor An border colour null
TREEMAPType Required Optional Dimensions 1 1 Measures 1 0
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Show Labels showLabelForDimension Boolean to show labels TRUE true/false Colour of labels labelColorForDimension Label colours null null Display colour displayColor An display colour null null Font style fontStyleForDimension Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeightForDimension Weight of fonts for Dimension Normal Normal/Bold/100-900 Font size fontSizeForDimension Size of fonts for Dimension 9
MeasuresProperty Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points FALSE true/false Font size fontSizeForMes Size of fonts 9 Font style fontStyleForMes Style of fonts Normal Normal/Italique/Oblique Font weight fontWeightForMes Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour valueTextColour The text colour #617c8c Color Pattern colorPattern Color pattern to vizualizations null Single/Gradient/Unique
HEATMAPType Required Optional Dimensions 1 1 Measures 1 0
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Colour of labels dimLabelColor Label colours null null Display name displayName A Display name Displayname Font style fontStyleForDimension Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeightForDimension Weight of fonts for Dimension Normal Normal/Bold/100-900 Font size fontSizeForDimension Size of fonts for Dimension 9
MeasuresProperty Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points FALSE True/False Number format numberFormat Possible number formats Actual K,M,B,Actual Show Icon showIcon Boolean to show icons TRUE true/false Color Coding colourCoding Conditional coloring null Display name displayNameForMeasure A Display name for Dimension Displayname Font style fontStyleForMeasure Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeightForMeasure Weight of fonts for Dimension Normal Normal/Bold/100-900 Text colour valueTextColour The text colour for Dimension #617c8c Font size fontSizeForMeasure Size of fonts for Dimension 9 Alignment valuePosition an alignment Left Center/Left/Right Icon name iconNameForMeasure An icon name for Measure null Icon position iconPositionForMeasure An icon position for Measure Center Center/Left/Right Icon Font weight iconFontWeight Weight of icon fonts Normal Normal/Bold/100-900 Icon colour iconColor An Icon colour null
BOXPLOT_CHARTType Required Optional Dimensions 1 0 Measures 5 0
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Number format numberFormat Possible number formats Actual K,M,B,Actual Show Labels showLabel Boolean to show labels TRUE true/false Colour of labels labelColor Label colours null null
MeasuresProperty Name Config Property Name Description Default Value Possible Values Display colour displayColor An display colour null
BOXPLOT_CHARTType Required Optional Dimensions 1 0 Measures 2 0
Configuration Properties Chart PropertiesProperty Name Config Property Name Description Default Value Possible Values Orientation orientation Orientation of Bullet Chart Horizontal Horizontal/Vertical Segments segments No of Segments 1 1 to 5 Segment Color Coding segmentInfo Segment Color Coding null
DimensionsProperty Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points FALSE true/false Font size fontSizeForMes Size of fonts 9 Font style fontStyleForMes Style of fonts Normal Normal/Italique/Oblique Font weight fontWeightForMes Weight of fonts Normal Normal/Bold/100-900
MeasuresProperty Name Config Property Name Description Default Value Possible Values Target colour targetColor Target colour #676a6c null Display colour displayColor An display colour null Number format measureNumberFormat Possible number formats Actual K,M,B,Actual Number format targetNumberFormat Possible number formats Actual K,M,B,Actual
SANKEY_CHARTType Required Optional Dimensions 2 3 Measures 1 0
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Font style fontStyle Style of fonts for Dimension Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts for Dimension Normal Normal/Bold/100-900 Font size fontSize Size of fonts for Dimension 9 Text colour textColor The text colour for Target Measure #617c8c Value on Points showValues Show value on points FALSE True/False
MeasuresProperty Name Config Property Name Description Default Value Possible Values Number format numberFormat Possible number formats Actual K,M,B,Actual Color Pattern colorPattern Color pattern to vizualizations null Single/Gradient/Unique Display colour displayColor An display colour null Border colour borderColor An border colour null
SCATTER_PLOT_CHARTType Required Optional Dimensions 1 0 Measures 2 1
Configuration Properties DimensionsProperty Name Config Property Name Description Default Value Possible Values Display name displayName A Display name Displayname
Measures
Property Name Config Property Name Description Default Value Possible Values Value on Points showValues Show value on points false true/false Display name displayNameForMeasure A Display name for Measure Displayname Font style fontStyle Style of fonts Normal Normal/Italique/Oblique Font weight fontWeight Weight of fonts Normal Normal/Bold/100-900 Number format numberFormat Possible number formats Actual K,M,B,Actual Text colour textColor The text colour #617c8c Display colour displayColor An display colour null Border colour borderColor An border colour null Font size fontSize Size of fonts 9