ComparisonBarChart

Bar chart that compares two labeled values

Configuration Options

barHeight

Type: number
Default: 30
Units: px

Height of the comparison bar.

chartName

Type: string
Default: "ComparisonBarChart"

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

generalWashoutColor

Type: color
Default: "#E4E5E5"

Color used to indicate elements that are not being highlighted

height

Type: number
Default: 100

Height of the chart.

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

labelColor

Type: color
Default: "#888888"

Color for chart labels

labelSize

Type: number
Default: 12

Font size of labels.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showAnimations

Type: boolean
Default: true

Whether or not to show animations

textFontFamily

Type: string
Default: "Open Sans"

textLabel

Type: function
Default: "function (d, i) {\n\t return _Chart.a('Label')(d) + ' ' + summaryNumber.summaryNumber(_Chart.a('Value')(d));\n\t }"

The function used for the text labels

title

Type: string
Default: "Tweets"

Title on the top of the chart.

titleColor

Type: color
Default: "#333"

Color for the title text.

titleSize

Type: number
Default: 24

Font size of the title.

titleWeight

Type: number
Default: 700

Font weight for the title text.

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 250
Units: px

Data Definition

Label

Type: string

Default validate:

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

Default accessor:

function (line) { return String(line[0]); }

Value

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0 && this.accessor(d); }

Default accessor:

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

Events

Dispatch Events

dispatch:mouseenter
dispatch:mouseleave

External Events

external:mouseover
external:mouseout

Example

//Setup some fake data
var data = [
  ['@BobBarker', 600000],
  ['@AdamWilder', 100000]
];

var aHeight = 500;
var aWidth = 500;

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: aHeight,
    width: aWidth
  })
  .append('g')
  // .attr('transform', 'translate(40,150)')
  .attr('transform', 'translate(0,20)')
  .chart('ComparisonBarChart')
  .c('width', 400)
  .c('barHeight', 50)
  .c('title', 'Tweets')
  .c('labelSize', 10)
  .c('titleSize', 24)
  .c({
    'width': 400,
    'title': 'Tweets'
  });

//Render the chart with data
chart._notifier.showMessage(false);
chart.draw(data);