@domoinc/daily-trend-timeline
v1.0.3
Published
DailyTrendTimeline - Domo Widget
Downloads
16
Readme
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);