I'm trying to show charts getting data from database. And I want the graph to be dynamic. I'm currently using mysql workbench and whenever I insert or delete any data from mysql workbench I want the chart to change automatically without refreshing the page. please check my code below First of all Controller class I passing my database data with model.addAttribute and will use in dailyUpdate.html
Controller.java
@RequiredArgsConstructor
@Controller
public class Controller {
private final StatusService statusService;
@GetMapping("/")
public String getData(Model model){
model.addAttribute("statusDTO", statusService.getFacilityStatus());
return "daily/dailyUpdate";
}
}
Below is my dailyUpdate.html code
dailyUpdate.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="~{/layout/basic :: setContent(~{this::content} )}">
<th:block th:fragment="content">
<div class="container">
<span>
<div id="buildingStatus">
</div>
<table id="datatable">
<thead>
<tr>
<th></th>
<th>In</th>
<th>Out</th>
</tr>
</thead>
<tbody>
<th:block th:each="num: ${#numbers.sequence(0,9)}">
<tr>
<th>[[${statusDTO.getBName()[num]}]]</th>
<td>[[${statusDTO.getIn()[num]}]]</td>
<td>[[${statusDTO.getOut()[num]}]]</td>
</tr>
</th:block>
</tbody>
</table>
</span>
</div>
<script th:inline="javascript">
Highcharts.chart('buildingStatus', {
data: {
table: 'datatable'
},
chart: {
type: 'column',
},
title: {
text: '건물 출입 현황'
},
yAxis: {
allowDecimals: false,
title: {
text: '명수'
}
},
credits:{
enabled:false
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
}
});
</script>
</th:block>
</th:block>
and if i run the app it will show this view of the app after running
now What I want to do actually is that whenever the database data changes(like if I change insert or delete data into mysql workbench as it shows in below picture) I want the bar chart to change automatically without refreshing the page. Can you tell me how to do this?.. I'm really having a hard time making this work. Please help me
