Row Charts

  • Methods
  • elasticX
  • fixedBarHeight
  • gap
  • labelOffsetX
  • labelOffsetY
  • renderTitleLabel
  • titleLabelOffsetX
  • x
  • xAxis
  • Accepts
  • Boolean
  • Number
  • Number
  • Number
  • Number
  • Boolean
  • Number
  • d3.scale
  • d3.axis
  • Method Descriptions
  • x axis will rescale to auto-fit the data range when filtered.
  • set fixed bar height
  • set vertical gap space between rows on a particular row chart instance
  • set x offset (horz space to top left corner of a row) for labels on a particular row chart
  • set y offset (vert space to top left corner of a row) for labels on a particular row chart
  • Turn on/off Title label rendering (values) using SVG style of text-anchor 'end'
  • set x offset (horizontal space between right edge of row and right edge or text
  • set x scale
  • set x axis for the row chart instance
050100150200250300350400450500MaleMale: 508FemaleFemale: 492

rowChart01
  .dimension(genderDimension)
  .group(genderGroup)
  .width($(rowChart01.anchor()).parent().width())
  .height(200);
..
- Basic row chart
050100150200250300350400450500falsefalse: 518truetrue: 482

rowChart01
  .dimension(genderDimension)
  .group(genderGroup)
  .width($(rowChart01.anchor()).parent().width())
  .height(200)
  .elasticX(true)
  .gap(20);
elasticX
- x axis will rescale to auto-fit the data range
gap
- set the vertical gap space between rows
050100150200250300350jcbjcb: 368mastercardmastercard: 106no datano data: 99maestromaestro: 53americanexpressamericanexpress: 47switchswitch: 45visa-electronvisa-electron: 45diners-club-carte-blanchediners-club-carte-blanche: 41bankcardbankcard: 40china-unionpaychina-unionpay: 39diners-club-enroutediners-club-enroute: 34laserlaser: 21visavisa: 18instapaymentinstapayment: 13diners-club-us-cadiners-club-us-ca: 12solosolo: 12diners-club-internationaldiners-club-international: 7

rowChart01
  .dimension(genderDimension)
  .group(genderGroup)
  .width($(rowChart01.anchor()).parent().width())
  .height(200);
..
- Basic row chart
02040608010012014016018020030's'30's': 20560's'60's': 20150's'50's': 19740's'40's': 19170's'70's': 11120's'20's': 95

rowChart01
  .dimension(genderDimension)
  .group(genderGroup)
  .width($(rowChart01.anchor()).parent().width())
  .height(200);
..
- Basic row chart
050100150200250300350400450500MaleMale: 508FemaleFemale: 492

rowChart05
  .dimension(genderDimension)
  .group(genderGroup)
  .width($(rowChart01.anchor()).parent().width())
  .height(200)
  .labelOffsetX(50)
  .labelOffsetY(50);
.labelOffsetX()
- set the x offset for the labels in the row
.labelOffsetY()
- set the y offset for the labels in the row
050100150200250300350400450500falsefalse: 518false: 518truetrue: 482true: 482

rowChart06
  .dimension(maritalDimension)
  .group(maritalDimension.group())
  .width($(rowChart01.anchor()).parent().width())
  .height(200)
  .renderTitleLabel(true)
  .titleLabelOffsetX(20);
renderTitleLabel
- show labels on the bars
titleLabelOffsetX
- offset the labels left
050100150200250300350jcbjcb: 368mastercardmastercard: 106no datano data: 99maestromaestro: 53americanexpressamericanexpress: 47switchswitch: 45visa-electronvisa-electron: 45OthersOthers: 237

rowChart07
  .dimension(creditCardDimension)
  .group(creditCardGroup)
  .width($(rowChart01.anchor()).parent().width())
  .height(200)
  .cap(7);
cap()
- max number of rows
124816326412820's'20's': 9530's'30's': 20540's'40's': 19150's'50's': 19760's'60's': 20170's'70's': 111

rowChart08
  .dimension(ageGroupDimension)
  .group(ageGroupDimension.group())
  .width($(rowChart01.anchor()).parent().width())
  .height(200)
  .fixedBarHeight(13)
  .ordering(d =>  d.key )
  .colors(["#66c2a4", "#a04a4a"])
  .x(d3.scaleLog().base(2).domain([1, 200]).range([0,300]));
fixedBarHeight
- sets the height for the bars
ordering
- set the ordering of the bars
colors
- set colors for the bar
x
- set the scale for the x axis. Set to Log scale above