@domoinc/axis

Axis

<img src=media/widget.png height=500 width=500>

Configuration Options

addBaseline

Type: boolean
Default: false

Adds the baseline path above the labels

addGridlines

Type: boolean
Default: false

Flag to show vertical or horizontal grid lines.

addLabels

Type: boolean
Default: true

Flag to show the text labels on the axis

addTicks

Type: boolean
Default: false

Flag to show the tick lines on the axis.

addZeroline

Type: boolean
Default: false

Makes the gridline corresponding to the zero tick show, and have increased stroke width

axesLabelColor

Type: color
Default: #888

Color of all the labels on the axes

axesLabelFontFamily

Type: string
Default: Open Sans

Font family for axes labels

axesLabelLetterSpacing

Type: number
Default: 0
Units: px

Letter spacing for the axes labels.

axesLabelSize

Type: number
Default: 11
Units: px

Size of the labels

axesLineColor

Type: color
Default: #E3E3E3

Color of all lines found in the axes

chartName

Type: string
Default: Axis

Name of chart for Reporting.

duration

Type: number
Default: 750
Units: ms

Duration of the animation

height

Type: number
Default: 250
Units: px

intelligentTicks

Type: boolean
Default: true

Try and show an appropriate number of ticks given available space.

intelligentTrunc

Type: boolean
Default: true

Truncate the labels so they do not over lap.

maxLegendSpace

Type: number
Default: 50

orient

Type: string
Default: bottom

Sets the orientation of the axis. Options: bottom, top, left, right

scale

Type: scale
Default: function scale(x) { return output(x); }

d3 scale object for the axis.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showTooltip

Type: boolean
Default: false

undefined

textFontFamily

Type: string
Default: Open Sans

tickFormat

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

Label format function for the tick labels.

tickPadding

Type: number
Default: 7

Padding between the tick line and text.

tickSize

Type: number
Default: 5

Size of the tick line.

tickSpacing

Type: number
Default: 40

Space between each tick.

tooltipBackgroundColor

Type: color
Default: #555555

tooltipTextColor

Type: color
Default: #FFFFFF

tooltipTextSize

Type: number
Default: 14
Units: px

undefined

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 250
Units: px

x

Type: number
Default: 0

The x coordinate for the axis.

y

Type: number
Default: 0

The y coordinate for the axis.

Data Definition

Events

Dispatch Events

External Events

Example

var aHeight = 400;
var aWidth = 400;

// var ascale = d3.scale.ordinal().domain(d3.range(0, 1000)).rangePoints([0,aWidth], 0);
// var ascale = d3.scale.linear().domain([-1000, 1000]).range([0, aWidth]);
var ascale = d3.time.scale().domain([new Date('2014-01-11'), new Date('2014-12-29')]).range([0,500]);
// var ascale = d3.scale.ordinal().domain(['A','B','C']).rangeRoundBands([0, aWidth], 0.25);

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr('width', 500)
  .attr('height', 500)
  .append("g")
  .attr("transform", "translate(50,250)")
  .chart("Axis")
  .c({
    'width': aWidth,
    'height': aHeight,
    'scale': ascale,

    //'addGridlines': true,
    // 'addGridlines': false,
    //'addZeroline': true,
    // 'addZeroline': false,
    //'addTicks': true,
    // 'addTicks': false,

    //'addBaseline': true,
    // 'addBaseline': false,
    //'tickSize': 5,

    // 'orient': 'top',
    'orient': 'bottom',
    // 'orient': 'top',
    // 'orient': 'right',

    showTooltip: true,
  })


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


// var orient = 'top';
// var orient = 'bottom';
// var orient = 'left';
var orient = 'right';

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': true,
//     'addTicks': true,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': true,
//     'addZeroline': false,
//     'addTicks': true,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': true,
//     'addZeroline': true,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': false,
//     'addTicks': true,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': true,
//     'addZeroline': false,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': true,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': false,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)