Bars

Configuration Options

barPadding

Type: number
Default: 0.25

Padding between the bars

chartLabelColor

Type: color
Default: #888888

Color for chart labels

chartName

Type: string
Default: Bars

Name of chart for Reporting

chartPrimarySeriesColors

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

color

Type: color
Default: ``

Color for the bars

colors

Type: array
Default: null

Specified colors to be used in color scale

domainOffsetPadding

Type: number
Default: 35

Multiple of the pixel ratio of to add suffienct padding to the bars and edge of the chart

endFillColor

Type: color
Default: #73B0D7

Color for the Vertical Waterfall end bars

exposeLabels

Type: select
Default: [object Object]

If true, each bar's value will always be visible

fillByValue

Type: boolean
Default: false

Determines if the fill bar colors by series or by value

generalSeparatorColor

Type: color
Default: #FFFFFF

Color is used to to distinguish bar segments that are filled with the washout color

generalWashoutColor

Type: color
Default: #E4E5E5

Color is used to fill bar segments that are not being highlighted on events such as mouse hover

hasSeriesData

Type: boolean
Default: false

Determines if the chart should have just one color or multiple. Used primarily with single layout

height

Type: number
Default: 250
Units: px

highlightKey

Type: string
Default: series

The key on which to highlight the bar on mouseover. Valid keys are "label", "series", or "value"

labelFormat

Type: function
Default: function (d) { return i18n.summaryNumber(d.value); }

Format for the bar labels

labelPosition

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.

layout

Type: string
Default: single

Determines if the chart is stacked or grouped, waterfall or single bars

minimumBarWidth

Type: number
Default: 3

The minimum width for the bars. Used to check the number of data points

negativeFillColor

Type: color
Default: #E4584F

Color for the Vertical Waterfall negative value bars

orientation

Type: string
Default: vertical

Determines if the orientation is vertical or horizontal

positiveFillColor

Type: color
Default: #80C25D

Color for the Vertical Waterfall positive value bars

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showBarLabels

Type: boolean
Default: true

Determines whether the bar label should be displayed on hover

showClip

Type: boolean
Default: true

Hide bars that extend past chart bounds

showMeridian

Type: boolean
Default: false

Determines whether to show the center

showTooltip

Type: boolean
Default: true

textFontFamily

Type: string
Default: Open Sans

textSize

Type: number
Default: 12
Units: px

tooltipBackgroundColor

Type: color
Default: #555555

Background color of the tooltip

tooltipContent

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.

tooltipFontFamily

Type: string
Default: Open Sans

Font family for the tooltip

tooltipTextColor

Type: color
Default: #FFFFFF

Color of the tooltip text

tooltipTextSize

Type: number
Default: 12
Units: px

Size of the tooltip text

transitionDelay

Type: function
Default: function (d, i) { return i * (_Chart.c('transitionDuration') / _labels.length); }

The delay function for the transitions

transitionDuration

Type: number
Default: 300

The duration for the transitions

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 100

The plot area width

Data Definition

ExtraData

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);
	        }

Label

Type: string

Default validate:

function (row) { return this.accessor(row) !== undefined; }

Default accessor:

function (row) { return row[0] && row[0] !== '' ? String(row[0]) : undefined; }

Series

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);
	        }

Value

Type: number

Default validate:

function (row) { return !isNaN(this.accessor(row)); }

Default accessor:

function (row) { return Number(row[1]); }

Events

Dispatch Events

dispatch:mouseover
dispatch:mouseout
dispatch:click

External Events

external:mouseover
external:mouseout
external:highlight
external:unhighlight

Example

//----------------------------------------------------------------------------------
// 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;
}