implement chartjs demo

3100cf1c · Hoai Viet Nguyen · b321c589 · 3100cf1c · 3100cf1c · 3100cf1c
Commit 3100cf1c authored 2 months ago by Hoai Viet Nguyen
--- a/src/main/kotlin/de/thk/gm/chartjsdemo/controllers/RandomDataController.kt
+++ b/src/main/kotlin/de/thk/gm/chartjsdemo/controllers/RandomDataController.kt
+package de.thk.gm.chartjsdemo.controllers
+import org.springframework.web.bind.annotation.GetMapping
+import org.springframework.web.bind.annotation.RestController
+import java.util.*
+@RestController
+class RandomDataController {
+    @GetMapping("/randomdata")
+    fun randomData(): IntArray {
+        val random = Random()
+        return intArrayOf(random.nextInt(100) , random.nextInt(100), random.nextInt(100), random.nextInt(100), random.nextInt(100), random.nextInt(100) )
+    }
+}
\ No newline at end of file
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+<canvas id="myChart"></canvas>
+<button type="button" onclick="getRandomData()">Get Random Data</button>
+<button type="button" onclick="getRandomDataAjax()">Get Random Data Ajax</button>
+<script src="/javascripts/chart.js">
+</script>
+<script>
+    const ctx = document.getElementById('myChart');
+    var chart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+            datasets: [{
+                label: '# of Votes',
+                data: [12, 19, 3, 5, 2, 3],
+                borderWidth: 1,
+                backgroundColor: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+    function  getRandomInt(max){
+        return Math.floor(Math.random() * max);
+    }
+    function getRandomData(){
+        var data = [getRandomInt(100),getRandomInt(100),getRandomInt(100),getRandomInt(100),getRandomInt(100),getRandomInt(100)]
+        chart.data.datasets[0].data = data;
+        chart.update()
+    }
+    function getRandomDataAjax() {
+        var xhr = new XMLHttpRequest()
+        xhr.open("GET","/randomdata")
+        xhr.send()
+        xhr.onreadystatechange = function (){
+            if(this.readyState == 4 && this.status == 200){
+                var data = JSON.parse(xhr.responseText)
+                chart.data.datasets[0].data = data;
+                chart.update()
+            }
+        }
+    }
+</script>
+</body>
+</html>
\ No newline at end of file
--- a/src/main/resources/static/javascripts/chart.js
+++ b/src/main/resources/static/javascripts/chart.js