timelineChart/index.html at main · hrajwade96/timelineChart · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
    <script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
    <link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="timeline.js" defer></script>
    <style>

    </style>
          <input type="file" id="upload" accept=".json"/>
</head>

<body>
    <textarea id="jsonData" placeholder="Paste your JSON data here..."></textarea>
    <button onclick="loadData()">Load Data</button>
    <div class="example">
        <p> Sample input :</p>
        <pre><code>
            [
            {
              "id": 0,
              "content": "ProcessA",
              "start": 1696932687462,
              "end": 1696932687574
            },
            {
              "id": 1,
              "content": "ProcessB",
              "start": 1696932687462,
              "end": 1696932687600
            }
          ]
        </code></pre>
    </div>
    <div id="visualization"></div>
</body>
</html>