The time bar can show events that occur at a particular instant in time, as well as events that represent a period of time. To show how time periods work, this demo explores the changing relationships between nodes.
The example data contains links between entrepreneurs and the companies they're directors of. Switch between chart and time bar interactions to help you understand the data.
Once you’ve explored patterns of behaviour over time, it’s easy to spot trends. Notice how one serial entrepreneur, Gina Carlson, is frequently moving from one company to another. In contrast, Brooke Fields appears to be listed as a director of multiple companies simultaneously. By filtering with the time bar, we can distinguish between these two kinds of entrepreneur, who at first glance might seem to have similar characteristics within the network.
A time period doesn't need to have a start and end date - it can have one or the other.Notice that there is no resignation date for an entrepreneur who is currently still director of a company.
For more information, see the Time Period object type in the API Reference.
Key functions used:
- chart.layout
- chart.graph().neighbours
- chart.graph().degrees
- timebar.inRange
- timebar.selection
- Chart Events
- Time bar Events
import KeyLines from "keylines";
import data from "./data.js";
let chart;
let timebar;
const selectionColours = [
["rgb(252, 0, 0)", "rgb(253, 141, 60)"],
["rgb(0, 0, 255)", "rgb(0, 191, 255)"],
["rgb(0, 128, 0)", "rgb(50,205,50)"],
];
const greyColours = ["rgb(105, 105, 105)", "rgb(192, 192, 192)"];
const tooltip = document.getElementById("tooltip");
const tooltipStart = document.getElementById("tooltip-start");
const tooltipEnd = document.getElementById("tooltip-end");
// Runs an organic layout
async function doLayout(mode = "adaptive") {
await chart.layout("organic", { time: 400, easing: "linear", mode });
}
function getDate(timestamp) {
if (!timestamp) {
return "n/a";
}
const date = new Date(timestamp);
return date.toDateString().slice(4);
}
function closeTooltip() {
tooltip.classList.add("hidden");
}
function showTooltip({ id, x, y, type, pointerType }) {
// only handle hover and touch + pen
if (type === "pointer-down" && pointerType === "mouse") return;
// null for the background
const item = chart.getItem(id);
// hovering over a link
if (item && item.type === "link") {
// fill-in tooltip
tooltipStart.innerHTML = getDate(item.dt[0].dt1);
tooltipEnd.innerHTML = getDate(item.dt[0].dt2);
// position it relative to the event
if (chart.viewOptions().width > x + 250) {
tooltip.style.top = `${y - 28}px`;
tooltip.style.left = `${x + 20}px`;
tooltip.classList.remove("right");
} else {
tooltip.style.top = `${y - 28}px`;
tooltip.style.left = `${x - 230}px`;
tooltip.classList.add("right");
}
// show the tooltip
tooltip.classList.remove("hidden");
} else {
// if not selecting a link, then close tooltip
closeTooltip();
}
}
function buildItemStyling(item, width, colour, border = false) {
if (item.type === "node") {
return {
id: item.id,
fi: {
c: colour,
t: item.d.type === "person" ? "fas fa-user" : "fas fa-building",
},
b: border ? colour : null,
};
}
// else it is a link
return { id: item.id, w: width || 3, c: colour };
}
function showSelection() {
// clear all selections
timebar.selection([]);
const timebarSelection = [];
const chartProperties = {};
// set default colouring
chart.each({ type: "all" }, (item) => {
chartProperties[item.id] = buildItemStyling(
item,
3,
item.type === "node" ? greyColours[0] : greyColours[1]
);
});
// we only colour the first few items of the selection
let selectedIds = chart.selection();
if (selectedIds.length > selectionColours.length) {
selectedIds = selectedIds.slice(0, selectionColours.length);
}
chart.selection(selectedIds);
selectedIds.forEach((id, index) => {
let neighbouringNodes = [];
let links = [];
const item = chart.getItem(id);
const colour = index < selectionColours.length ? selectionColours[index][0] : greyColours[1];
if (item.type === "node") {
// note we use all: true so that we apply styles also to
// hidden nodes and links that aren't in the current time range
const neighbours = chart.graph().neighbours(id, { all: true });
links = neighbours.links;
neighbouringNodes = neighbours.nodes;
// colour node
chartProperties[id] = buildItemStyling(item, 3, colour, true);
} else {
// it is a link
links.push(id);
neighbouringNodes.push(item.id1, item.id2);
// colour link
chartProperties[id] = buildItemStyling(item, 5, colour);
}
// colour neighbouring nodes
neighbouringNodes.forEach((neighbourId) => {
if (chartProperties[neighbourId].fi.c === greyColours[0] && index < selectionColours.length) {
chartProperties[neighbourId] = buildItemStyling(
chart.getItem(neighbourId),
3,
selectionColours[index][1]
);
}
});
// and select in the timebar
timebarSelection.push({
id: links,
index,
c: colour,
});
});
timebar.selection(timebarSelection);
chart.setProperties(Object.keys(chartProperties).map((key) => chartProperties[key]));
}
function resizePeopleByDegree() {
function normalize(max, min, value) {
return max === min ? min : (value - min) / (max - min);
}
const values = chart.graph().degrees();
const ids = Object.keys(values);
const valuesArray = Object.keys(values).map((key) => values[key]);
const max = Math.max.apply(null, valuesArray);
const min = Math.min.apply(null, valuesArray);
const resizedNodes = ids.map((id) => {
const item = chart.getItem(id);
const resizeValue = item.d.type === "person" ? normalize(max, min, values[id]) : 0;
return { id, e: 2 * resizeValue + 1 };
});
chart.setProperties(resizedNodes);
}
function initialiseInteractions() {
chart.on("hover", showTooltip);
chart.on("pointer-down", showTooltip);
chart.on("selection-change", showSelection);
const layoutButton = document.getElementById("layout");
layoutButton.addEventListener("click", () => {
doLayout("full");
});
timebar.on("change", async () => {
// filter the chart to show only items in the new range
await chart.filter(timebar.inRange, { animate: false, type: "link" });
// and then adjust the chart's layout
resizePeopleByDegree();
doLayout();
});
}
async function loadData() {
data.items.forEach((element) => {
if (element.type === "node") {
element.fi = {
c: greyColours[0],
t: element.d.type === "person" ? "fas fa-user" : "fas fa-building",
};
}
});
// load the data (defined in separate js file) into both the chart and time bar
timebar.load(data);
timebar.zoom("fit", { animate: false });
chart.load(data);
resizePeopleByDegree();
await doLayout();
initialiseInteractions();
}
async function loadKeyLines() {
const options = {
selectedNode: {},
selectedLink: {},
handMode: true,
logo: "/images/Logo.png",
overview: { icon: false },
hover: 5,
iconFontFamily: "Font Awesome 5 Free",
};
const tbOptions = { minScale: { units: "day" } };
const components = await KeyLines.create([
{ container: "klchart", type: "chart", options },
{ container: "kltimebar", type: "timebar", options: tbOptions },
]);
chart = components[0];
timebar = components[1];
loadData();
}
function loadFonts() {
document.fonts.load('24px "Font Awesome 5 Free"').then(loadKeyLines);
}
window.addEventListener("DOMContentLoaded", loadFonts);const data = {
type: "LinkChart",
items: [
{
type: "node",
id: "Brooke Fields",
t: "Brooke Fields",
d: {
type: "person",
},
},
{
type: "node",
id: "Gina Carlson",
t: "Gina Carlson",
d: {
type: "person",
},
},
{
type: "node",
id: "Guillermo Vaughn",
t: "Guillermo Vaughn",
d: {
type: "person",
},
},
{
type: "node",
id: "Rose Ingram",
t: "Rose Ingram",
d: {
type: "person",
},
},
{
type: "node",
id: "Jeannie Wolfe",
t: "Jeannie Wolfe",
d: {
type: "person",
},
},
{
type: "node",
id: "Dave Rice",
t: "Dave Rice",
d: {
type: "person",
},
},
{
type: "node",
id: "Paul Watts",
t: "Paul Watts",
d: {
type: "person",
},
},
{
type: "node",
id: "Danny Matthews",
t: "Danny Matthews",
d: {
type: "person",
},
},
{
type: "node",
id: "Anthony Mitchell",
t: "Anthony Mitchell",
d: {
type: "person",
},
},
{
type: "node",
id: "Alfred Hicks",
t: "Alfred Hicks",
d: {
type: "person",
},
},
{
type: "node",
id: "Adrian Mcdaniel",
t: "Adrian Mcdaniel",
d: {
type: "person",
},
},
{
type: "node",
id: "Kerry Waters",
t: "Kerry Waters",
d: {
type: "person",
},
},
{
type: "node",
id: "Felix Floyd",
t: "Felix Floyd",
d: {
type: "person",
},
},
{
type: "node",
id: "Noel Luna",
t: "Noel Luna",
d: {
type: "person",
},
},
{
type: "node",
id: "Tami Lindsey",
t: "Tami Lindsey",
d: {
type: "person",
},
},
{
type: "node",
id: "Damon Douglas",
t: "Damon Douglas",
d: {
type: "person",
},
},
{
type: "node",
id: "Diana Greene",
t: "Diana Greene",
d: {
type: "person",
},
},
{
type: "node",
id: "Gary King",
t: "Gary King",
d: {
type: "person",
},
},
{
type: "node",
id: "Phantom Corporation",
t: "Phantom Corporation",
d: {
type: "company",
},
},
{
type: "node",
id: "Melon Arts",
t: "Melon Arts",
d: {
type: "company",
},
},
{
type: "node",
id: "Green",
t: "Green",
d: {
type: "company",
},
},
{
type: "node",
id: "Marblightning",
t: "Marblightning",
d: {
type: "company",
},
},
{
type: "node",
id: "Cycloration",
t: "Cycloration",
d: {
type: "company",
},
},
{
type: "node",
id: "Bluetronics",
t: "Bluetronics",
d: {
type: "company",
},
},
{
type: "node",
id: "Summitechnologies",
t: "Summitechnologies",
d: {
type: "company",
},
},
{
type: "node",
id: "Cloudwalk",
t: "Cloudwalk",
d: {
type: "company",
},
},
{
type: "node",
id: "Jettechs",
t: "Jettechs",
d: {
type: "company",
},
},
{
type: "node",
id: "Quadbridge",
t: "Quadbridge",
d: {
type: "company",
},
},
{
type: "node",
id: "Crow Navigations",
t: "Crow Navigations",
d: {
type: "company",
},
},
{
type: "node",
id: "Grasshopper Co.",
t: "Grasshopper Co.",
d: {
type: "company",
},
},
{
type: "node",
id: "Daydream Security",
t: "Daydream Security",
d: {
type: "company",
},
},
{
type: "node",
id: "Joytechs",
t: "Joytechs",
d: {
type: "company",
},
},
{
type: "node",
id: "Dwarfoods",
t: "Dwarfoods",
d: {
type: "company",
},
},
{
type: "node",
id: "Cliffoods",
t: "Cliffoods",
d: {
type: "company",
},
},
{
type: "node",
id: "Vinedustries",
t: "Vinedustries",
d: {
type: "company",
},
},
{
type: "node",
id: "Bansheewares",
t: "Bansheewares",
d: {
type: "company",
},
},
{
type: "node",
id: "Moonshine",
t: "Moonshine",
d: {
type: "company",
},
},
{
type: "node",
id: "Mapleway",
t: "Mapleway",
d: {
type: "company",
},
},
{
type: "node",
id: "Diamond Aviation",
t: "Diamond Aviation",
d: {
type: "company",
},
},
{
type: "node",
id: "Grotto Corp",
t: "Grotto Corp",
d: {
type: "company",
},
},
{
type: "node",
id: "Root Aviation",
t: "Root Aviation",
d: {
type: "company",
},
},
{
type: "node",
id: "White Wolfoods",
t: "White Wolfoods",
d: {
type: "company",
},
},
{
type: "node",
id: "Greenetworks",
t: "Greenetworks",
d: {
type: "company",
},
},
{
type: "node",
id: "Honeytelligence",
t: "Honeytelligence",
d: {
type: "company",
},
},
{
type: "node",
id: "Tempestechnologies",
t: "Tempestechnologies",
d: {
type: "company",
},
},
{
type: "node",
id: "Phoenixland",
t: "Phoenixland",
d: {
type: "company",
},
},
{
type: "node",
id: "Crystalsun",
t: "Crystalsun",
d: {
type: "company",
},
},
{
type: "link",
id: "Brooke Fields-Phantom Corporation",
id1: "Brooke Fields",
id2: "Phantom Corporation",
dt: [
{
dt1: 1339014193119,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Brooke Fields-Melon Arts",
id1: "Brooke Fields",
id2: "Melon Arts",
dt: [
{
dt1: 1247271160185,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Brooke Fields-Green",
id1: "Brooke Fields",
id2: "Green",
dt: [
{
dt1: 1237397195464,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Brooke Fields-Marblightning",
id1: "Brooke Fields",
id2: "Marblightning",
dt: [
{
dt1: 1268721087691,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Brooke Fields-Cycloration",
id1: "Brooke Fields",
id2: "Cycloration",
dt: [
{
dt1: 1310952185992,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gina Carlson-Bluetronics",
id1: "Gina Carlson",
id2: "Bluetronics",
dt: [
{
dt1: 1191238914316,
dt2: 1270569157085,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gina Carlson-Summitechnologies",
id1: "Gina Carlson",
id2: "Summitechnologies",
dt: [
{
dt1: 1276109390365,
dt2: 1348661017536,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gina Carlson-Cloudwalk",
id1: "Gina Carlson",
id2: "Cloudwalk",
dt: [
{
dt1: 1348270245074,
dt2: 1412908707443,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gina Carlson-Jettechs",
id1: "Gina Carlson",
id2: "Jettechs",
dt: [
{
dt1: 1415551838802,
dt2: 1465786744438,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gina Carlson-Quadbridge",
id1: "Gina Carlson",
id2: "Quadbridge",
dt: [
{
dt1: 1459806246849,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Guillermo Vaughn-Crow Navigations",
id1: "Guillermo Vaughn",
id2: "Crow Navigations",
dt: [
{
dt1: 1418792877334,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Rose Ingram-Grasshopper Co.",
id1: "Rose Ingram",
id2: "Grasshopper Co.",
dt: [
{
dt1: 1383109469104,
dt2: 1498149360662,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Rose Ingram-Daydream Security",
id1: "Rose Ingram",
id2: "Daydream Security",
dt: [
{
dt1: 1236890263269,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Jeannie Wolfe-Joytechs",
id1: "Jeannie Wolfe",
id2: "Joytechs",
dt: [
{
dt1: 1266649394407,
dt2: 1418563289105,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Dave Rice-Dwarfoods",
id1: "Dave Rice",
id2: "Dwarfoods",
dt: [
{
dt1: 1435235563645,
dt2: 1439593633782,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Paul Watts-Cliffoods",
id1: "Paul Watts",
id2: "Cliffoods",
dt: [
{
dt1: 1348460379175,
dt2: 1430497186231,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Paul Watts-Vinedustries",
id1: "Paul Watts",
id2: "Vinedustries",
dt: [
{
dt1: 1342980716145,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Danny Matthews-Bansheewares",
id1: "Danny Matthews",
id2: "Bansheewares",
dt: [
{
dt1: 1212592504689,
dt2: 1506411552619,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Anthony Mitchell-Moonshine",
id1: "Anthony Mitchell",
id2: "Moonshine",
dt: [
{
dt1: 1294680086436,
dt2: 1513775556429,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Anthony Mitchell-Mapleway",
id1: "Anthony Mitchell",
id2: "Mapleway",
dt: [
{
dt1: 1404224388156,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Alfred Hicks-Diamond Aviation",
id1: "Alfred Hicks",
id2: "Diamond Aviation",
dt: [
{
dt1: 1302567304700,
dt2: 1435579135260,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Adrian Mcdaniel-Grotto Corp",
id1: "Adrian Mcdaniel",
id2: "Grotto Corp",
dt: [
{
dt1: 1275605687635,
dt2: 1302441510735,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Kerry Waters-Root Aviation",
id1: "Kerry Waters",
id2: "Root Aviation",
dt: [
{
dt1: 1357157613919,
dt2: 1497198217881,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Kerry Waters-White Wolfoods",
id1: "Kerry Waters",
id2: "White Wolfoods",
dt: [
{
dt1: 1186565644914,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Felix Floyd-Greenetworks",
id1: "Felix Floyd",
id2: "Greenetworks",
dt: [
{
dt1: 1281749075420,
dt2: 1425911470613,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Noel Luna-Honeytelligence",
id1: "Noel Luna",
id2: "Honeytelligence",
dt: [
{
dt1: 1428549346398,
dt2: 1497935675353,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Tami Lindsey-Tempestechnologies",
id1: "Tami Lindsey",
id2: "Tempestechnologies",
dt: [
{
dt1: 1345276788162,
dt2: 1402559251417,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Tami Lindsey-Phoenixland",
id1: "Tami Lindsey",
id2: "Phoenixland",
dt: [
{
dt1: 1272650321596,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Damon Douglas-Crystalsun",
id1: "Damon Douglas",
id2: "Crystalsun",
dt: [
{
dt1: 1439239127664,
dt2: 1446474483161,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Damon Douglas-Phantom Corporation",
id1: "Damon Douglas",
id2: "Phantom Corporation",
dt: [
{
dt1: 1432259515171,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Diana Greene-Melon Arts",
id1: "Diana Greene",
id2: "Melon Arts",
dt: [
{
dt1: 1250937080868,
dt2: 1272043917343,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Diana Greene-Green",
id1: "Diana Greene",
id2: "Green",
dt: [
{
dt1: 1388980546097,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gary King-Marblightning",
id1: "Gary King",
id2: "Marblightning",
dt: [
{
dt1: 1341532138270,
dt2: 1348971910953,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Brooke Fields-Cycloration",
id1: "Brooke Fields",
id2: "Cycloration",
dt: [
{
dt1: 1252224410783,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Brooke Fields-Bluetronics",
id1: "Brooke Fields",
id2: "Bluetronics",
dt: [
{
dt1: 1327698610449,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Brooke Fields-Summitechnologies",
id1: "Brooke Fields",
id2: "Summitechnologies",
dt: [
{
dt1: 1176476394850,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Brooke Fields-Cloudwalk",
id1: "Brooke Fields",
id2: "Cloudwalk",
dt: [
{
dt1: 1343570952015,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Brooke Fields-Jettechs",
id1: "Brooke Fields",
id2: "Jettechs",
dt: [
{
dt1: 1183735407623,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gina Carlson-Quadbridge",
id1: "Gina Carlson",
id2: "Quadbridge",
dt: [
{
dt1: 1203779987419,
dt2: 1286114861583,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gina Carlson-Crow Navigations",
id1: "Gina Carlson",
id2: "Crow Navigations",
dt: [
{
dt1: 1252864333111,
dt2: 1332066374345,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gina Carlson-Grasshopper Co.",
id1: "Gina Carlson",
id2: "Grasshopper Co.",
dt: [
{
dt1: 1318370099782,
dt2: 1367155178043,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gina Carlson-Daydream Security",
id1: "Gina Carlson",
id2: "Daydream Security",
dt: [
{
dt1: 1445086054970,
dt2: 1494164214919,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gina Carlson-Joytechs",
id1: "Gina Carlson",
id2: "Joytechs",
dt: [
{
dt1: 1508949404869,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Guillermo Vaughn-Dwarfoods",
id1: "Guillermo Vaughn",
id2: "Dwarfoods",
dt: [
{
dt1: 1439419710533,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Rose Ingram-Cliffoods",
id1: "Rose Ingram",
id2: "Cliffoods",
dt: [
{
dt1: 1447743740784,
dt2: 1475561870381,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Jeannie Wolfe-Vinedustries",
id1: "Jeannie Wolfe",
id2: "Vinedustries",
dt: [
{
dt1: 1302350026690,
dt2: 1362601707946,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Jeannie Wolfe-Bansheewares",
id1: "Jeannie Wolfe",
id2: "Bansheewares",
dt: [
{
dt1: 1283669644884,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Dave Rice-Moonshine",
id1: "Dave Rice",
id2: "Moonshine",
dt: [
{
dt1: 1232018923653,
dt2: 1509860168360,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Paul Watts-Mapleway",
id1: "Paul Watts",
id2: "Mapleway",
dt: [
{
dt1: 1210590359697,
dt2: 1274000597065,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Danny Matthews-Diamond Aviation",
id1: "Danny Matthews",
id2: "Diamond Aviation",
dt: [
{
dt1: 1440723155554,
dt2: 1503407220276,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Danny Matthews-Grotto Corp",
id1: "Danny Matthews",
id2: "Grotto Corp",
dt: [
{
dt1: 1411610571654,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Anthony Mitchell-Root Aviation",
id1: "Anthony Mitchell",
id2: "Root Aviation",
dt: [
{
dt1: 1412918383186,
dt2: 1433401731854,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Anthony Mitchell-White Wolfoods",
id1: "Anthony Mitchell",
id2: "White Wolfoods",
dt: [
{
dt1: 1303392645020,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Alfred Hicks-Greenetworks",
id1: "Alfred Hicks",
id2: "Greenetworks",
dt: [
{
dt1: 1245395749674,
dt2: 1343518747478,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Adrian Mcdaniel-Honeytelligence",
id1: "Adrian Mcdaniel",
id2: "Honeytelligence",
dt: [
{
dt1: 1244519754341,
dt2: 1398795162709,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Adrian Mcdaniel-Tempestechnologies",
id1: "Adrian Mcdaniel",
id2: "Tempestechnologies",
dt: [
{
dt1: 1293685825988,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Kerry Waters-Phoenixland",
id1: "Kerry Waters",
id2: "Phoenixland",
dt: [
{
dt1: 1286331465363,
dt2: 1321863520043,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Felix Floyd-Crystalsun",
id1: "Felix Floyd",
id2: "Crystalsun",
dt: [
{
dt1: 1404871089274,
dt2: 1435383669902,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Felix Floyd-Phantom Corporation",
id1: "Felix Floyd",
id2: "Phantom Corporation",
dt: [
{
dt1: 1239896796491,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Noel Luna-Melon Arts",
id1: "Noel Luna",
id2: "Melon Arts",
dt: [
{
dt1: 1232612229592,
dt2: 1489184683838,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Noel Luna-Green",
id1: "Noel Luna",
id2: "Green",
dt: [
{
dt1: 1179384154182,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Tami Lindsey-Marblightning",
id1: "Tami Lindsey",
id2: "Marblightning",
dt: [
{
dt1: 1352564813420,
dt2: 1365113284879,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Tami Lindsey-Cycloration",
id1: "Tami Lindsey",
id2: "Cycloration",
dt: [
{
dt1: 1408263996000,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Damon Douglas-Bluetronics",
id1: "Damon Douglas",
id2: "Bluetronics",
dt: [
{
dt1: 1365560827793,
dt2: 1455292661790,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Damon Douglas-Summitechnologies",
id1: "Damon Douglas",
id2: "Summitechnologies",
dt: [
{
dt1: 1371837671366,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Diana Greene-Cloudwalk",
id1: "Diana Greene",
id2: "Cloudwalk",
dt: [
{
dt1: 1368713370177,
dt2: 1505960116022,
},
],
a2: true,
w: 3,
},
{
type: "link",
id: "Gary King-Jettechs",
id1: "Gary King",
id2: "Jettechs",
dt: [
{
dt1: 1212476185184,
dt2: 1303569548447,
},
],
a2: true,
w: 3,
},
],
};
export default data;<!doctype html>
<html lang="en" style="background-color: #2d383f">
<head>
<meta charset="utf-8" />
<title>Time Periods</title>
<link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/keylines.css" />
<link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/minimalsdk.css" />
<link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/sdk-layout.css" />
<link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/demo.css" />
<link
rel="stylesheet"
type="text/css"
href="@fortawesome/[email protected]/css/fontawesome.css"
/>
<link
rel="stylesheet"
type="text/css"
href="@fortawesome/[email protected]/css/solid.css"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="klchart" class="klchart klchart-timebar">
<div class="hidden" id="tooltip">
<table class="table-condensed">
<tbody>
<tr>
<td style="text-align: right"><strong>Appointed on:</strong></td>
<td id="tooltip-start">{{start}}</td>
</tr>
<tr>
<td style="text-align: right"><strong>Resigned on:</strong></td>
<td id="tooltip-end">{{end}}</td>
</tr>
</tbody>
</table>
<div class="arrow"></div>
</div>
</div>
<div id="kltimebar" class="kltimebar"></div>
<script type="module" src="./code.js"></script>
</body>
</html>#tooltip {
position: absolute;
float: left;
border: 1px solid #ccc;
background-color: #fff;
z-index: 1;
width: 208px;
}
#layout {
text-align: center;
margin-top: 18px;
}
.arrow {
position: absolute;
top: 20px;
left: -9px;
border-width: 0px 0px 1px 1px;
border-style: solid;
border-color: #ccc;
background-color: #fff;
transform: rotateZ(45deg);
height: 15px;
width: 15px;
}
.right .arrow {
left: 199px;
transform: rotateZ(225deg);
}