patternfly-timeline
A time based/event series interactive visualization using d3.js. Use drag and zoom to navigate in time. View the demo here.
Based on the EventDrops timeline.
Usage
Include the src/timeline.js
script in your page after d3:
<script src="path/to/d3.js"></script>
<script src="src/timeline.js"></script>
In the HTML source, create a new timeline chart, bind data to a DOM element, then call the chart on the element. Important: In order for the zoom slider to work correctly, the placeholder element must have position: relative
or position: absolute
styling.
var timelineChart = d3.chart.timeline();
d3.select('#chart_placeholder')
.datum(data)
.call(timelineChart);
The data must be an array of named time series with an optional details payload. For instance:
var json = [
{
"name":"Power Activity",
"data":[
{"date": "2016-04-08T15:07:37.374Z", "details": {"event": "vmPowerOn", "object": "vmName"}},
{"date": "2016-04-08T15:07:37.374Z", "details": {"event": "vmPowerOn", "object": "vmName"}},
{"date": "2016-04-15T21:04:16.247Z", "details": {"event": "vmPowerOn", "object": "vmName"}}
]
},
{
"name":"Alarm/Error",
"data":[
{"date": "2016-04-21T01:06:19.126Z", "details": {"event": "vmPowerOn", "object": "vmName"}},
{"date": "2016-04-16T13:07:15.205Z", "details": {"event": "vmPowerOff", "object": "hostName"}},
{"date": "2016-04-07T22:35:41.145Z", "details": {"event": "vmPowerOff", "object": "hostName"}}
]
}
];
Configuration
Patternfly-timeline follows the d3.js reusable charts pattern to let you customize the chart at will:
var timelineChart = d3.chart.timeline()
.width(1200)
.context(false)
Configurable values:
start
: start date of the scale. Defaults tonew Date(0)
.end
: end date of the scale. Defaults tonew Date()
minScale
: The minimum scaling (zoom out), default to0
.maxScale
: The maximum scaling (zoom in), default toInfinity
.width
: width of the chart in pixels. Responsive by default.padding
: paddings of the graph in pixels. Defaults to{ top: 30, left: 40, bottom: 40, right: 40 }
lineHeight
: The height of each row in the chart, default to40
.contextHeight
: The height of the context viewport below the char, default to50
.locale
: locale used for the X axis labels. See d3.locale for the expected format. Defaults tonull
(i.e. d3 default locale).axisFormat
: function receiving the d3 axis object, to customize tick number and size.tickFormat
: tickFormat for the X axis. See d3.timeFormat.multi() for expected format.eventHover
: function to be called when hovering an event in the chart. Receives the DOM element hovered (uses event delegation).eventZoom
: function to be called when done zooming on the chart. Receives the d3 scale at the end of the zoom.eventClick
: function to be called on click event of data-point (circle). Receives the DOM element hovered (uses event delegation).eventLineColor
: The color of the event line. Accepts a color (color name or#ffffff
notation), or a function receiving the eventData and returning a color.eventColor
: The color of the event. Accepts a color (color name or#ffffff
notation), or a function receiving the eventData and returning a color. Defaults to null. EventLineColor will be ignored if this is used.eventShape
: The shape of the event. Accepts unicode characters, including icon fonts.eventPopover
: The contents of the event's popover.marker
:true
by default. Enable current time/date marker under mouse pointer.context
:true
by default. Enable context viewport beneath chart.slider
:true
by default. Enable zoom slider and buttons to right of chart.eventGrouping
:60000
(one minute) by default. The number of milliseconds within which events will be considered to have happened at the same time.
Styling
You can style all elements of the chart in CSS. Check the source to see the available selectors.
Extending / Development
First, install the dependencies:
npm install
For development purpose, you can use the following command:
npm start
It serves the demo at http://localhost:8080.
When your changes are done, ensure that all tests pass with:
npm test
Finally, if everything is fine, you can rebuild the library using:
npm run build
License
Patternfly Timeline is released under the MIT License