BestTimeLine

A heatmap for hours of the day.

Configuration Options

biggerIsBetter

Type: select
Default: {"name":"Bigger Is Good Color","value":true}

Set what color to display based on the value

bubbleStrokeGoodColor

Type: color
Default: "function () {\n\t return _Chart.c('firstGoodColor');\n\t }"

undefined

chartName

Type: string
Default: "BestTimeLine"

Name of chart for reporting

chartScale

Type: number
Default: 1

The size of the chart based on the scale

firstBadColor

Type: color
Default: "#e4584f"

Fill for the worst values

firstGoodColor

Type: color
Default: "#46988A"

Fill for the best values

height

Type: number
Default: 130.48
Units: px

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.

lineColor

Type: color
Default: "#E3E3E3"

Line color for the axes

secondBadColor

Type: color
Default: "#f68d35"

Fill for the bad values

secondGoodColor

Type: color
Default: "#8fd1bc"

Fill for the good values

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

strokeColor

Type: color
Default: "#FFFFFF"

Border color for each component

textColor

Type: color
Default: "#888888"

Font color for the text

textFontFamily

Type: string
Default: "Open Sans"

Font type for the text

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 466
Units: px

Width of the widget

Data Definition

Hour

Type: number

Default validate:

function (d) {
	                    return typeof this.accessor(d) === 'number' &&
	                        !isNaN(this.accessor(d)) &&
	                        this.accessor(d) >= 0 && this.accessor(d) < 24;
	                }

Default accessor:

function (line) {
	                    if (line[1] === '') {
	                        return NaN;
	                    }
	                    return Number(line[0]);
	                }

Value

Type: number

Default validate:

function (d) {
	                    return typeof this.accessor(d) === 'number' && !isNaN(this.accessor(d)) &&
	                        this.accessor(d) >= 0;
	                }

Default accessor:

function (line) {
	                    if (line[1] === '') {
	                        return NaN;
	                    }
	                    return Number(line[1]);
	                }

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  [0, 211],
  [1, 815],
  [2, 770],
  [3, 322],
  [4, 387],
  [5, 379],
  [6, 669],
  [7, 137],
  [8, 834],
  [9, 149],
  [10, 405],
  [11, 324],
  [12, 798],
  [13, 600],
  [14, 813],
  [15, 994],
  [16, 731],
  [17, 449],
  [18, 499],
  [19, 405],
  [20, 864],
  [21, 417],
  [22, 906],
  [23, 712],
];

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


var chart = svg
  .attr({
    height: '500px',
    width: '500px',
  })
  .append("g")
  .attr('transform', 'translate(10, 170)')
  .chart("BestTimeLine")
  .c({
    width: 515,
    biggerIsBetter: true,
  });

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