Timeline

The LemonadeJS JavaScript Timeline is a framework-agnostic plugin designed for timeline creation, supporting Vue, React, and Angular integration. It facilitates the construction of logs, event timelines, and roadmaps, providing options for customization such as color adjustments, content modification, and control over point positioning. The plugin includes features for automatically grouping events by month and navigation controls, aiding in organizing and displaying timeline data. plugin's documentation .

Styling Attributes

Preview

const timeline1 = document.getElementById("timeline-1");
Timeline(timeline1, {
  data: [
    {
      title: "Issue Identification",
      date: new Date(2022, 6, 1),
    },
    {
      title: "Root Cause Analysis",
      date: new Date(2022, 6, 2),
    },
    {
      title: "Implementation of Solution",
      date: new Date(2022, 6, 3),
      borderColor: "#808000",
      borderStyle: "dashed",
    },
    {
      title: "Implementation of Solution",
      date: new Date(2022, 6, 4),
    },
  ],
  align: "left",
});

<html>
  <script src="/app/libs/lemonadejs/dist/lemonade.js"></script>
  <script src="/app/libs/@lemonadejs/timeline/dist/index.js"></script>
  <link rel="stylesheet" href="/app/libs/@lemonadejs/timeline/dist/style.css" />

  <div id="timeline-1"></div>

  <script>
    const timeline1 = document.getElementById("timeline-1");

    Timeline(timeline1, {
      data: [
        {
          title: "Issue Identification",
          date: new Date(2022, 6, 1),
        },
        {
          title: "Root Cause Analysis",
          date: new Date(2022, 6, 2),
        },
        {
          title: "Implementation of Solution",
          date: new Date(2022, 6, 3),
          borderColor: "#808000",
          borderStyle: "dashed",
        },
        {
          title: "Implementation of Solution",
          date: new Date(2022, 6, 4),
        },
      ],
      align: "left",
    });
  </script>
</html>

Positioning Options

Preview

Choose a position to align:

const timeline2 = document.getElementById("timeline-2");
const dropdown = document.getElementById("dropdown");

const tml = Timeline(timeline2, {
  data: [
    { title: "Issue Identification", date: new Date(2022, 6, 1) },
    { title: "Root Cause Analysis", date: new Date(2022, 6, 2) },
    { title: "Implementation of Solution", date: new Date(2022, 6, 3) },
  ],
});

dropdown.addEventListener("change", (e) => {
  tml.align = e.target.value;
});

<html>
  <script src="/app/libs/lemonadejs/dist/lemonade.js"></script>
  <script src="/app/libs/@lemonadejs/timeline/dist/index.js"></script>
  <link rel="stylesheet" href="/app/libs/@lemonadejs/timeline/dist/style.css" />

  <label for="dropdown">Choose a position to align:</label>
  <select id="dropdown">
    <option value="left">Left</option>
    <option value="right">Right</option>
    <option value="top">Top</option>
    <option value="bottom">Bottom</option>
  </select>
  <div id="timeline-2"></div>

  <script>
    const timeline2 = document.getElementById("timeline-2");
    const dropdown = document.getElementById("dropdown");

    const tml = Timeline(timeline2, {
      data: [
        { title: "Issue Identification", date: new Date(2022, 6, 1) },
        { title: "Root Cause Analysis", date: new Date(2022, 6, 2) },
        { title: "Implementation of Solution", date: new Date(2022, 6, 3) },
      ],
    });

    dropdown.addEventListener("change", (e) => {
      tml.align = e.target.value;
    });
  </script>
</html>

Sorting

Preview

Choose a sorting order:

const timeline3 = document.getElementById("timeline-3");
const dropdown1 = document.getElementById("dropdown-order");

const tml1 = Timeline(timeline3, {
  data: [
    { title: "Issue Identification", date: new Date(2022, 6, 1) },
    { title: "Root Cause Analysis", date: new Date(2022, 6, 2) },
    { title: "Implementation of Solution", date: new Date(2022, 6, 3) },
  ],
});

dropdown1.addEventListener("change", (e) => {
  tml1.order = e.target.value;
});

<html>
  <script src="/app/libs/lemonadejs/dist/lemonade.js"></script>
  <script src="/app/libs/@lemonadejs/timeline/dist/index.js"></script>
  <link rel="stylesheet" href="/app/libs/@lemonadejs/timeline/dist/style.css" />

  <label for="dropdown">Choose a sorting order:</label>
  <select id="dropdown-order">
    <option value="asc">Asc</option>
    <option value="desc">Desc</option>
  </select>

  <div id="timeline-3"></div>

  <script>
    const timeline3 = document.getElementById("timeline-3");
    const dropdown1 = document.getElementById("dropdown-order");

    const tml1 = Timeline(timeline3, {
      data: [
        { title: "Issue Identification", date: new Date(2022, 6, 1) },
        { title: "Root Cause Analysis", date: new Date(2022, 6, 2) },
        { title: "Implementation of Solution", date: new Date(2022, 6, 3) },
      ],
    });

    dropdown1.addEventListener("change", (e) => {
      tml1.order = e.target.value;
    });
  </script>
</html>

About Privacy Contact