CountdownClockCircle

Counts down to a particular data and time.

Configuration Options

_daysRemaining

Type: number
Default: 0

Days remaining in the countdown

_hoursRemaining

Type: number
Default: 0

Hours remaining in the countdown

_minutesRemaining

Type: number
Default: 0

Minutes remaining in the countdown

_secondsRemaining

Type: number
Default: 0

Seconds remaining in the countdown

chartPrimarySeriesColors

Type: colorArray
Default: [["#D9EBFD","#B7DAF5","#90c4e4","#73B0D7","#4E8CBA","#31689B"],["#DDF4BA","#BBE491","#A0D771","#80C25D","#559E38","#387B26"],["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"],["#F3E4FE","#DDC8EF","#C5ACDE","#B391CA","#8F6DC0","#7940A1"],["#FCD7E6","#FBB6DD","#F395CD","#EE76BF","#CF51AC","#A62A92"],["#D8F4DE","#ABE4CA","#8DD5BE","#68BEA8","#46998A","#227872"],["#FDDDDD","#FCBCB7","#FD9A93","#FD7F76","#e45850","#c92e25"]]

The primary colors used to represent series data

dateTimeFormat

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

Format that the date and time are coming in

generalNotFilledColor

Type: color
Default: "#E4E5E5"

Color used to indicate no data

height

Type: undefined
Default: 0

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.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textColor

Type: color
Default: "#333"

Color for the clock labels

textFontFamily

Type: string
Default: "Open Sans"

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 830
Units: px

Width of the chart

Data Definition

date

Type: date

Default validate:

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

Default accessor:

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

name

Type: string

Default validate:

function (d) { return typeof d !== 'undefined'; }

Default accessor:

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

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [['DateTime', '4122-10-23 14:04']];

var aWidth = 400;

//Initialize the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: 1000,
    width: 1000
  })
  .append('g')
  .attr('transform', 'translate(' + 50 + ',' + 200 + ')')
  .chart('CountdownClockCircle')
  .c('width', aWidth);

chart._notifier.showMessage(true);
chart.draw(data);

//**********************************************************************************
//START INTERVAL
//**********************************************************************************
var tmp = null;
tmp = setInterval(function () {

  if (chart.daysRemaining() === 0 &&
    chart.hoursRemaining() === 0 &&
    chart.minutesRemaining() === 0 &&
    chart.secondsRemaining() === 0) {
    clearInterval(tmp);
  }
  else {
    chart.draw(data);
  }

}, 1000);