@domoinc/daily-trend-timeline v1.0.3

DailyTrendTimeline

A heatmap timeline with an area graph

Configuration Options

areaFillColor

Type: color
Default: "#DAEAF8"

Secondary fill color for each component

areaStrokeColor

Type: color
Default: "#73B0D7"

Primary fill color for each component

barHeight

Type: number
Default: 5
Units: px

Height of the heat map bar

chartName

Type: string
Default: "DailyTrendTimeline"

Name of chart for Reporting.

dateFormat

Type: select
Default: {"name":"Days","value":"ddd"}

The time scale used under the bars (ie: days, months, years)

height

Type: number
Default: 400
Units: px

Height of the widget

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device.

labelTextColor

Type: color
Default: "#888888"

labelTextSize

Type: number
Default: 14
Units: px

undefined

mapRangeColorsTheme

Type: select
Default: {"name":"Blue","value":["#31689B","#90c4e4"]}

undefined

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: "Open Sans"

textSize

Type: number
Default: 12
Units: px

tooltipBackground

Type: color
Default: "#555555"

tooltipFontColor

Type: color
Default: "#FFFFFF"

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 400
Units: px

Width of the widget

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 Number(line[1]); }

Events

Dispatch Events

External Events

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  ['2015-01-01', 3],
  ['2015-01-02', 5],
  ['2015-01-03', 4],
  ['2015-01-04', 2],
  ['2015-01-05', 3],
  ['2015-01-06', 6],
  ['2015-01-07', 5],
];

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr({
    height: '500px',
    width: '600px'
  })
  .append("g")
  .attr('transform', 'translate(0,110)')
  .chart("DailyTrendTimeline")
  .c({
    width: 500,
    height: 206,
    dateFormat: {name: 'Days', value: 'ddd'},
    // dateFormat: {name: 'Months', value: 'MMM'},
    // dateFormat: {name: 'Years', value: 'YYYY'},
  });

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