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);