@domoinc/ca-icon-trends-with-text

CAIconTrendsWithText

Configuration Options

animationDuration

Type: number
Default: 2000
Units: ms

The duration of the line animation in ms.

chartName

Type: string
Default: "CAIconTrendsWithText"

Name of chart for Reporting.

drawFromCenter

Type: boolean
Default: true

Draws line chart from center of its height box

endPointRadius

Type: number
Default: 3
Units: px

Radius of the point at the end of the sparkline.

generalFillBadColor

Type: color
Default: "#E4584F"

Color meant to indicate the line is going down.

generalFillGoodColor

Type: color
Default: "#80C25D"

Color meant to indicate the line is going up.

generalStrokeBadColor

Type: color
Default: "#C92E25"

Stroke color meant to indicate the line is going down.

generalStrokeGoodColor

Type: color
Default: "#559E38"

Stroke color meant to indicate the line is going up.

height

Type: number
Default: 250

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.

lineWidth

Type: number
Default: 2
Units: px

Thickness of the sparkline

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 250

Width of the chart.

Data Definition

Date

Type: date

Default validate:

function (d) {
	          return new Date(this.accessor(d)) !== 'Invalid Date';
	        }

Default accessor:

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

Value

Type: number

Default validate:

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

Default accessor:

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

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  ["2014-01-01", 44.0234],
  ["2014-02-01", 40.2131],
  ["2014-03-01", 25.4532],
  ["2014-04-01", 53.0385],
  ["2014-05-01", 44.2341],
  ["2014-06-01", 40.4543],
  ["2014-07-01", 30.3234],
  ["2014-08-01", 44.2342],
  ["2014-09-01", 40.3423],
  ["2014-10-01", 56.4232]
];

//Initialze the widget
var container = d3.select('#vis');

var bBox = container.select("[id^=chartBounds]")
  .node()
  .getBBox();

var gWidgetGroup = container.select("[id^=DomoWidgetLockDomo]");

// Transform our chart's container to fit where the user placed the wiget
gWidgetGroup.attr("transform", "translate(" + bBox.x + "," + bBox.y + ")")
  .selectAll("*")
  .remove();

var chart = gWidgetGroup
  .chart('CAIconTrendsWithText')
  .c({
    width: bBox.width,
    height: bBox.height
  });

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

// setTimeout(function () { chart.draw();}, 10000);