chartjs-v4-webcomponent/index.html at main · ngyewch/chartjs-v4-webcomponent · 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Chart.js Web Component Example</title>
    <script type="module" src="dist/chartjs-v4-webcomponent.js"></script>
    <!--
    <script type="module" src="https://cdn.jsdelivr.net/npm/@ngyewch/chartjs-v4-webcomponent@0.4.0/dist/chartjs-v4-webcomponent.js"></script>
    -->
</head>
<body>
    <chartjs-v4 id="test1">
        <script type="application/json">
            {
                "type": "bar",
                "data": {
                    "datasets": [
                        {
                            "label": "My First Dataset",
                            "data": [{"x": 0, "y": 1}, {"x": 1000, "y": 2}, {"x": 2000, "y": 3}]
                        }
                    ]
                },
                "options": {
                    "maintainAspectRatio": false,
                    "scales": {
                        "x": {
                            "type": "linear"
                        },
                        "y": {
                            "beginAtZero": true
                        }
                    }
                }
            }
        </script>
    </chartjs-v4>

    <script>
        setTimeout(() => {
            const config = {
                type: 'line',
                data: {
                    datasets: [{
                        label: 'Series 1',
                        data: [{x: 0, y: 1}, {x: 1000, y: 2}, {x: 2000, y: 3}],
                    }],
                },
                options: {
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            type: "time",
                            time: {
                                unit: 'second',
                                displayFormats: {
                                    second: 's',
                                },
                            },
                        },
                        y: {
                            beginAtZero: true,
                        },
                    }
                },
            };

            const el = document.createElement('script');
            el.type = 'application/json';
            el.innerText = JSON.stringify(config);

            const chartElement = document.getElementById('test1');
            for (let i = chartElement.children.length - 1; i >= 0; i--) {
                chartElement.removeChild(chartElement.children.item(i));
            }
            chartElement.appendChild(el);
        }, 3000);
    </script>
</body>
</html>