KronoGraph accepts data in the form of a JSON object. Each item is defined as a property on either the entities or events object.
Events need to have an associated entity that they act on, defined in their entityIds property.
See also:
import { createTimeline } from "kronograph";
import data from "./data";
const timeline = createTimeline("my-timeline");
timeline.set(data);
timeline.fit();export default {
entities: {
"smith-johnathan-151": {
label: "John Smith",
},
"west-josephine-126": {
label: "Josephine West",
},
"roberts-nathaniel-023": {
label: "Nathan Roberts",
},
},
events: {
"email login 1": { entityIds: ["smith-johnathan-151"], time: new Date(2025, 7, 14, 7) },
"HR login 1": { entityIds: ["smith-johnathan-151"], time: new Date(2025, 7, 14, 8, 30) },
"finance login 1": { entityIds: ["smith-johnathan-151"], time: new Date(2025, 7, 14, 10) },
"HR logout 1": { entityIds: ["smith-johnathan-151"], time: new Date(2025, 7, 14, 13, 15) },
"finance logout 1": {
entityIds: ["smith-johnathan-151"],
time: new Date(2025, 7, 14, 17),
},
"email logout 1": { entityIds: ["smith-johnathan-151"], time: new Date(2025, 7, 14, 21) },
"finance login 2": {
entityIds: ["west-josephine-126"],
time: new Date(2025, 7, 14, 9, 30),
},
"email login 2": { entityIds: ["west-josephine-126"], time: new Date(2025, 7, 14, 13) },
"email logout 2": { entityIds: ["west-josephine-126"], time: new Date(2025, 7, 14, 19) },
"finance logout 2": {
entityIds: ["west-josephine-126"],
time: new Date(2025, 7, 14, 17, 45),
},
"email login 3": {
entityIds: ["roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 8, 45),
},
"email logout 3": {
entityIds: ["roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 16, 20),
},
},
};<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div id="my-timeline" style="height: 100vh"></div>
<script type="module" src="./code.js"></script>
</body>
</html>import React from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import data from "./data";
export const Demo = () => <Timeline entities={data.entities} events={data.events} />;
const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);export default {
entities: {
"smith-johnathan-151": {
label: "John Smith",
},
"west-josephine-126": {
label: "Josephine West",
},
"roberts-nathaniel-023": {
label: "Nathan Roberts",
},
},
events: {
"email login 1": { entityIds: ["smith-johnathan-151"], time: new Date(2025, 7, 14, 7) },
"HR login 1": { entityIds: ["smith-johnathan-151"], time: new Date(2025, 7, 14, 8, 30) },
"finance login 1": { entityIds: ["smith-johnathan-151"], time: new Date(2025, 7, 14, 10) },
"HR logout 1": { entityIds: ["smith-johnathan-151"], time: new Date(2025, 7, 14, 13, 15) },
"finance logout 1": {
entityIds: ["smith-johnathan-151"],
time: new Date(2025, 7, 14, 17),
},
"email logout 1": { entityIds: ["smith-johnathan-151"], time: new Date(2025, 7, 14, 21) },
"finance login 2": {
entityIds: ["west-josephine-126"],
time: new Date(2025, 7, 14, 9, 30),
},
"email login 2": { entityIds: ["west-josephine-126"], time: new Date(2025, 7, 14, 13) },
"email logout 2": { entityIds: ["west-josephine-126"], time: new Date(2025, 7, 14, 19) },
"finance logout 2": {
entityIds: ["west-josephine-126"],
time: new Date(2025, 7, 14, 17, 45),
},
"email login 3": {
entityIds: ["roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 8, 45),
},
"email logout 3": {
entityIds: ["roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 16, 20),
},
},
};<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div id="my-timeline" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>