@domoinc/bars
Advanced tools
<img src=media/widget.png height=500 width=500>
Type: number
Default: 0.25
Padding between the bars
Type: color
Default: #888888
Color for chart labels
Type: string
Default: Bars
Name of chart for Reporting
Type: colorArray
Default: #D9EBFD,#B7DAF5,#90c4e4,#73B0D7,#4E8CBA,#31689B,#DDF4BA,#BBE491,#A0D771,#80C25D,#559E38,#387B26,#FDECAD,#FCCF84,#FBAD56,#FB8D34,#E45621,#A43724,#F3E4FE,#DDC8EF,#C5ACDE,#B391CA,#8F6DC0,#7940A1,#FCD7E6,#FBB6DD,#F395CD,#EE76BF,#CF51AC,#A62A92,#D8F4DE,#ABE4CA,#8DD5BE,#68BEA8,#46998A,#227872,#FDDDDD,#FCBCB7,#FD9A93,#FD7F76,#e45850,#c92e25
The primary colors used to represent series data
Type: color
Default: ``
Color for the bars
Type: array
Default: null
Specified colors to be used in color scale
Type: number
Default: 35
Multiple of the pixel ratio of to add suffienct padding to the bars and edge of the chart
Type: color
Default: #73B0D7
Color for the Vertical Waterfall end bars
Type: select
Default: [object Object]
If true, each bar's value will always be visible
Type: boolean
Default: false
Determines if the fill bar colors by series or by value
Type: color
Default: #FFFFFF
Color is used to to distinguish bar segments that are filled with the washout color
Type: color
Default: #E4E5E5
Color is used to fill bar segments that are not being highlighted on events such as mouse hover
Type: boolean
Default: false
Determines if the chart should have just one color or multiple. Used primarily with single layout
Type: number
Default: 250
Units: px
Type: string
Default: series
The key on which to highlight the bar on mouseover. Valid keys are "label", "series", or "value"
Type: function
Default: function (d) { return i18n.summaryNumber(d.value); }
Format for the bar labels
Type: string
Default: inline
When orientation is 'horizontal', this config will be used to place labels inline with the bars, or on top of the bar.Valid options are: inline and top. inline is the default.
Type: string
Default: single
Determines if the chart is stacked or grouped, waterfall or single bars
Type: number
Default: 3
The minimum width for the bars. Used to check the number of data points
Type: color
Default: #E4584F
Color for the Vertical Waterfall negative value bars
Type: string
Default: vertical
Determines if the orientation is vertical or horizontal
Type: color
Default: #80C25D
Color for the Vertical Waterfall positive value bars
Type: boolean
Default: true
Flag for turning off data validation
Type: boolean
Default: true
Determines whether the bar label should be displayed on hover
Type: boolean
Default: true
Hide bars that extend past chart bounds
Type: boolean
Default: false
Determines whether to show the center
Type: boolean
Default: true
Type: string
Default: Open Sans
Type: number
Default: 12
Units: px
Type: color
Default: #555555
Background color of the tooltip
Type: function
Default: function (d) { return { value: i18n.summaryNumber(d.value), label: d.series }; }
Format for the Tooltip content. Valid option requires an object with a value and a label.
Type: string
Default: Open Sans
Font family for the tooltip
Type: color
Default: #FFFFFF
Color of the tooltip text
Type: number
Default: 12
Units: px
Size of the tooltip text
Type: function
Default: function (d, i) { return i * (_Chart.c('transitionDuration') / _labels.length); }
The delay function for the transitions
Type: number
Default: 300
The duration for the transitions
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
Type: number
Default: 100
The plot area width
Type: string
Default validate:
function (row) { return _Chart.c('hasSeriesData') ? this.accessor(row) !== undefined : true; }
Default accessor:
function (row) {
return !_Chart.c('hasSeriesData') ?
row[2] && row[2] !== '' ? String(row[2]) : undefined : _Chart.a('Label')(row);
}
Type: string
Default validate:
function (row) { return this.accessor(row) !== undefined; }
Default accessor:
function (row) { return row[0] && row[0] !== '' ? String(row[0]) : undefined; }
Type: string
Default validate:
function (row) { return _Chart.c('hasSeriesData') ? this.accessor(row) !== undefined : true; }
Default accessor:
function (row) {
return _Chart.c('hasSeriesData') ?
row[2] && row[2] !== '' ? String(row[2]) : undefined : _Chart.a('Label')(row);
}
Type: number
Default validate:
function (row) { return !isNaN(this.accessor(row)); }
Default accessor:
function (row) { return Number(row[1]); }
dispatch:mouseover
dispatch:mouseout
dispatch:click
external:mouseover
external:mouseout
external:highlight
external:unhighlight
//----------------------------------------------------------------------------------
// Setup some fake data
//----------------------------------------------------------------------------------
var data1 = [
['a', 2, 'z'],
['a', 3, 'y'],
['b', 4, 'z'],
['b', 5, 'y'],
['c', 6, 'z'],
['c', 7, 'y']
];
var data3 = [
['a', 2, 'z'],
['a', 3, 'y'],
['a', 4, 'x'],
['b', -2, 'z'],
['b', -4, 'y'],
['b', -6, 'x'],
['c', 6, 'z'],
['c', 7, 'y'],
['c', 8, 'x'],
['d', 8, 'z'],
['d', 7, 'y'],
['d', 6, 'x'],
];
var data2 = [
['a', 2],
['b', 4],
['d', 4],
['e', 4],
['f', 4],
['g', 4],
['h', 4],
['c', 6],
];
var data4 = [
['a', -2],
['b', 4],
['c', 8],
['d', 6]
];
var data5 = [
['a', 2, 'series A'],
['b', 4, 'series A'],
['d', 4, 'series A'],
['e', 4, 'series B'],
['f', 4, 'series B'],
['g', 4, 'series B'],
['h', 4, 'series C'],
['c', 6, 'series C'],
];
var data6 = [
['a', 2, 'series A'],
['b', 4, 'series B'],
['c', 8, 'series C'],
['d', 6, 'series D']
];
var data7 = [
['LY',2000, '$153,769'],
['TRAFFIC',400, '%'],
['CONVERSION',1000, 'ppt'],
['UPT',3000, '+'],
['AUR',-6000, '%'],
['TY',400, '$']
];
var data8 = [
['LY',42,'$'],
['TRAFFIC',-5,'%'],
['CONVERSION',-3,'ppt'],
['UPT',-1.6,'+'],
['AUR',1,'%'],
['TY',33.4,'$']
];
var data9 = [
['LY',22, '$'],
['TRAFFIC',-1, '%'],
['CONVERSION',8, 'ppt'],
['UPT',1.5, '+'],
['AUR',2, '%'],
['TY',32.5, '$']
];
var data10 = [
['LY',20, '$'],
['TRAFFIC',-25, '%'],
['CONVERSION',15, 'ppt'],
['UPT',5, '+'],
['AUR',5, '%'],
['TY',20, '$']
];
// var data10 = [
// ['LY SALES',84445.86, '$'],
// ['TRAFFIC',681.6293711, '%'],
// ['CONVERSION',1550.822813, 'ppt'],
// ['UPT',-6409.666028, '+'],
// ['AUR',7716.013844, '%'],
// ['TY SALES',87984.66, '$']
// ];
var varianceData = [
['week 1', 2],
['week 2', -2],
['week 3', 4],
['week 4', -4],
['week 5', 6],
['week 6', -6],
['week 7', 8],
['week 8', -8]
];
//----------------------------------------------------------------------------------
// Initialze the widget
//----------------------------------------------------------------------------------
var textSize = 18;
var horizontalStackedChart = d3.select("#vis")
.append("svg")
.attr({'width': 350, 'height': 350})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Bars")
.c({
'width': 250,
'height': 250,
'orientation': 'horizontal',
'layout': 'stacked',
'textSize': textSize
});
var horizontalGroupedChart = d3.select("#vis")
.append("svg")
.attr({'width': '350px', 'height': '350px'})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Bars")
.c({
'width': 250,
'height': 250,
'orientation': 'horizontal',
'layout': 'grouped',
'textSize': textSize
});
var horizontalChart = d3.select("#vis")
.append("svg")
.attr({'width': 350, 'height': 350})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Bars")
.c({
'width': 250,
'height': 250,
'orientation': 'horizontal',
'layout': 'single',
'textSize': textSize,
'color': 'red'
});
setTimeout(function() {
horizontalChart.c('color', 'green').draw(data2);
}, 1000);
var horizontalSeriesChart = d3.select("#vis")
.append("svg")
.attr({'width': 350, 'height': 350})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Bars")
.c({
'width': 250,
'height': 250,
'orientation': 'horizontal',
'layout': 'single',
'hasSeriesData': true,
'textSize': textSize
});
var stackedChart = d3.select("#vis")
.append("svg")
.attr({'width': 350, 'height': 350})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Bars")
.c({
'width': 250,
'height': 250,
'layout': 'stacked',
'textSize': textSize
});
var stackedChartH = d3.select("#vis")
.append("svg")
.attr({'width': 350, 'height': 350})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Bars")
.c({
'width': 250,
'height': 250,
'layout': 'stacked',
'textSize': textSize,
'orientation': 'horizontal'
});
var groupedChart = d3.select("#vis")
.append("svg")
.attr({'width': 350, 'height': 350})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Bars")
.c({
'width': 250,
'height': 250,
'layout': 'grouped',
'textSize': textSize
});
var waterfallChart = d3.select("#vis")
.append("svg")
.attr({'width': 350, 'height': 350})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Bars")
.c({
'width': 250,
'height': 250,
'layout': 'waterfall',
'textSize': textSize,
'hasSeriesData': false,
'exposeLabels': {name: 'Show', value: true},
// 'labelFormat': function(d){
// return i18n.summaryNumber(d.extraData);
// },
'showTooltip': {name: 'Show', value: true},
// 'tooltipContent': function(d){
// return {
// value: d.value < 0 ? '-$' + i18n.summaryNumber(Math.abs(d.value)): '$' + i18n.summaryNumber(Math.abs(d.value)),
// label: d.label
// }
// }
});
var singleSeriesChart = d3.select("#vis")
.append("svg")
.attr({'width': 350, 'height': 350})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Bars")
.c({
'width': 250,
'height': 250,
'hasSeriesData': true,
'layout': 'single',
'textSize': textSize
});
var singleChart = d3.select("#vis")
.append("svg")
.attr({'width': 350, 'height': 350})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Bars")
.c({
'width': 250,
'height': 250,
'layout': 'single',
'textSize': textSize
});
var varianceChart = d3.select("#vis")
.append("svg")
.attr({'width': 350, 'height': 350})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Bars")
.c({
'width': 250,
'height': 250,
'layout': 'single',
'textSize': textSize,
'fillByValue': true,
'showBarLabels': false,
})
.colorScale(d3.scale.threshold().domain([0]).range(['red', 'green']));
//----------------------------------------------------------------------------------
// Render the chart with data
//----------------------------------------------------------------------------------
var c1, c2, c3, c4, c5, c6, c7, c8, c9;
c1 = c2 = c3 = c4 = c5 = c6 = c7 = c8 = c9 = 0;
varianceChart.draw(varianceData);
horizontalGroupedChart.draw(data3);
horizontalStackedChart.draw(data1);
horizontalChart.draw(data2);
horizontalSeriesChart.draw(data5);
stackedChart.draw(data3);
stackedChartH.draw(data3);
groupedChart.draw(data3);
waterfallChart.draw(data7);
singleSeriesChart.draw(data5);
singleChart.draw(data4);
var drawLoop = false;
if (drawLoop) {
// horizontal
setInterval(function () {
var drawData = (c1 % 2) ? data1 : data3;
horizontalStackedChart.draw(drawData);
++c1;
}, 3000);
setInterval(function () {
var drawData = (c2 % 2) ? data1 : data3;
horizontalGroupedChart.draw(drawData);
++c2;
}, 2500);
setInterval(function () {
var drawData = (c7 % 2) ? data5 : data6;
horizontalSeriesChart.draw(drawData);
++c7;
}, 2500);
// vertical
setInterval(function () {
var drawData = (c3 % 2) ? data1 : data3;
stackedChart.draw(drawData);
++c3;
}, 3000);
setInterval(function () {
var drawData = (c4 % 2) ? data1 : data3;
groupedChart.draw(drawData);
++c4;
}, 3500);
setInterval(function () {
var drawData = c9 === 0 ? data7: (c9 === 1? data8 : (c9 === 2? data9: data10));
c9++
if (c9 > 3) {
c9 = 0;
}
waterfallChart.draw(drawData);
}, 2000);
setInterval(function () {
var drawData = (c5 % 2) ? data5 : data6;
singleSeriesChart.draw(drawData);
++c5;
}, 3500);
setInterval(function () {
var drawData = (c8 % 2) ? data2 : data4;
singleChart.draw(drawData);
++c8;
}, 2000);
}
//----------------------------------------------------------------------------------
// Data Generation / Helper Functions
//----------------------------------------------------------------------------------
function generateSeriesData(numOfRows, numOfLabels, numOfSeries) {
// var start = new Date().getTime();
var data = [];
var labelsArr = generateRandomArrayOfStringsWithPrefix('Label', numOfLabels);
var seriesArr = generateRandomArrayOfStringsWithPrefix('Series', numOfSeries);
var label;
var value;
var series;
while (numOfRows) {
label = chooseRandomValueFromArray(labelsArr);
value = getRandomInt(1, 100);
series = chooseRandomValueFromArray(seriesArr);
data.push([label, value, series]);
numOfRows--;
}
// var end = new Date().getTime();
// var time = end - start;
// console.log('Data Generation Execution time: ' + time);
return data;
}
function generateRandomArrayOfStringsWithPrefix(prefix, numOfRows) {
var data = [];
while (numOfRows) {
data.push(prefix + numOfRows);
numOfRows--;
}
return data;
}
function chooseRandomValueFromArray(arr) {
var randomIndex = Math.floor(Math.random() * arr.length);
return arr[randomIndex];
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
FAQs
Bars - Domo Widget
We found that @domoinc/bars demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers discovered nine malicious NuGet packages that use time-delayed payloads to crash applications and corrupt industrial control systems.
Security News
Socket CTO Ahmad Nassri discusses why supply chain attacks now target developer machines and what AI means for the future of enterprise security.
Security News
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.