//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//!    See how a network changes over time.
import KeyLines from "keylines";
import { data } from "./chartfilter-data.js";

let chart;
let timebar;

async function initialiseTimebarAndChart() {
  // Fit all dates inside timebar to set the initial range
  await timebar.zoom("fit", { animate: false });
  // set the initial layout of the chart
  await chart.layout("organic", { packing: "circle" });
  // When the timebar is next scrolled or zoomed
  timebar.on("change", filterAndLayout);
}

async function filterAndLayout() {
  // Filter the chart to only show items in the time bar
  await chart.filter(timebar.inRange, { animate: false, type: "link" });
  // and then adjust the chart's layout
  await chart.layout("organic", {
    mode: "adaptive",
    animate: true,
    time: 400,
    easing: "linear",
  });
}

async function loadKeyLines() {
  const options = {
    logo: { u: "/images/Logo.png" },
    overview: { icon: false, shown: false },
    histogram: {
      colour: "#05D1E8",
      highlightColour: "#CACED5",
    },
  };
  [chart, timebar] = await KeyLines.create([
    { container: "klchart", options },
    { container: "kltimebar", type: "timebar", options },
  ]);
  timebar.load(data);
  chart.load(data);
  // set up the time bar and chart layout & interactions
  initialiseTimebarAndChart();
}

window.addEventListener("DOMContentLoaded", loadKeyLines);

<!DOCTYPE html>
<html lang="en" style="background-color: #2d383f;">
  <head>
    <meta charset="UTF-8">
    <title>Time Bar Basics</title>
    <link rel="stylesheet" type="text/css" href="/css/keylines.css">
    <link rel="stylesheet" type="text/css" href="/css/minimalsdk.css">
    <link rel="stylesheet" type="text/css" href="/css/sdk-layout.css">
    <link rel="stylesheet" type="text/css" href="/css/demo.css">
    <script src="/vendor/jquery.js" defer type="text/javascript"></script>
    <script id="keylines" src="/public/keylines.umd.cjs" defer type="text/javascript"></script>
    <script src="/chartfilter.js" crossorigin="use-credentials" defer type="module"></script>
  </head>
  <body>
    <div class="chart-wrapper demo-cols">
      <div class="tab-content-panel flex1" id="lhs" data-tab-group="rhs">
        <div class="toggle-content is-visible" id="lhsVisual" style="width:100%; height: 100%;">
          <div class="klchart klchart-timebar" id="klchart">
          </div>
          <div class="kltimebar" id="kltimebar">
          </div>
        </div>
      </div>
      <div class="rhs citext closed" id="demorhscontent">
        <div class="title-bar">
          <svg viewBox="0 0 360 60" style="max-width: 360px; max-height: 60px; font-size: 24px; font-family: Raleway; flex: 1;">
            <text x="0" y="38" style="width: 100%;">Time Bar Basics</text>
          </svg>
        </div>
        <div class="tab-content-panel" data-tab-group="rhs">
          <div class="toggle-content is-visible tabcontent" id="controlsTab">
            <p>A time bar example demonstrating how to filter chart items.</p>
            <form autocomplete="off" onsubmit="return false" id="rhsForm">
              <div class="cicontent">
                <fieldset>
                  <legend>Interaction</legend>
                  <p>Zoom in using the time bar controls to investigate how the network changes over time.</p>
                  <p>Chart items are hidden or shown depending on the active time bar range.</p>
                </fieldset>
                <fieldset> 
                  <legend>Data Format</legend>
                  <p>
                     The time bar data format 
                    is similar to that used for the chart. It is possible to pass the same data object to both components.
                  </p>
                </fieldset>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div id="moreParent">
      <div id="moreContainer">
      </div>
    </div>
    <div id="lazyScripts">
    </div>
  </body>
</html>
Loading source