CountDateClock

Configuration Options

chartName

Type: string
Default: "CountDateClock"

Name of chart for reporting

clockSplitChart

Type: string
Default: ":"

The character used to determine the start position for each label

countDown

Type: boolean
Default: true

Toggle whether clock should count down (true) or count up (false)

dateTimeFormat

Type: string
Default: "YYYY-MM-DD HH:mm:ss"

The format of the date in the data coming in

dayLabel

Type: string
Default: "DAY(S)"

The label under the day value

displayFormat

Type: function
Default: "function (milliseconds) {\n\t var diff = moment.duration(Math.abs(milliseconds));\n\t return pad(Math.floor(diff.asDays())) + ':' + pad(diff.hours()) + ':' + pad(diff.minutes()) + ':' + pad(diff.seconds());\n\t }"

Function used to format how time is displayed

height

Type: number
Default: 250
Units: px

hourLabel

Type: string
Default: "HR(S)"

The label under the hour value

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.

labelVerticalPos

Type: undefined
Default: 23

The vertical placement of the labels

minuteLabel

Type: string
Default: "MIN(S)"

The label under the minute value

secondLabel

Type: string
Default: "SEC(S)"

The label under the second value

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textColor

Type: color
Default: "#333"

The font color of the clock labels

textFontFamily

Type: string
Default: "Open Sans"

timerColor

Type: color
Default: "#f68c35"

The primary font color of the clock 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

Date

Type: date

Default validate:

function (d) {
	          return moment(d[1], _Chart.c('dateTimeFormat'), true).isValid();
	        }

Default accessor:

function (line) {
	          return moment(line[1], _Chart.c('dateTimeFormat'), true).toDate();
	        }

Label

Type: string

Default validate:

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

Default accessor:

function (line) {
	          return line[0] === undefined ? undefined : String(line[0]);
	        }

Events

Dispatch Events

External Events

Example

//Setup some fake data
// var sampleDate = moment().add(2, 'days').format('YYYY-MM-DD HH:mm:ss');
var sampleDate = '2020-01-01 00:00:00';
var data = [['DomoPalooza', sampleDate]];

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr({
    height: '500px',
    width: '500px'
  })
  .append("g")
  .chart("CountDateClock")
  .c({
    width: 500,
    height: 500
  });

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