statical/example.html at main · SCToolsOrg/statical · 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://d3js.org/d3.v7.min.js"></script>
  </head>
  <body>
    <div id="count">0</div>
    <div id="chart"></div>
  </body>
  <script src="./statical.js"></script>
  <script>
    const data = {
      dates: [
        "2022-01-01",
        "2023-01-01",
        "2024-01-01",
        "2025-01-01",
        "2026-01-01",
        "2027-01-01",
        "2028-01-01",
      ],
      count: [1, 5, 10, 15, 20, 25, 30],
    };

    var dates = data.dates.map((date) => new Date(date));
    var DPMS = (5 * 1000) / dates.length;
    var charts = {
      chart: {
        style: {
          width: 920,
          height: 105,
          marginLeft: 25,
          marginTop: 10,
          marginBottom: 25,
          marginRight: 25,
        },
        lines: {
          color: "black",
        },
      },
    };
    var valueTypes = {
      count: (val) => val.toLocaleString(),
    };

    function update() {
      animateValue("count", data.count[pastIndex], data.count[index]);
    }

    function animateCharts() {
      updateChart("chart", parseInt(getText("count")));
    }
  </script>
</html>