| 내용 |
sse.jsp
<%@ page contentType="text/event-stream;charset=utf-8"%>
:데이터 갱신 주기를 설정합니다.
retry: <%= 1000 + new java.util.Random().nextInt(2000) %>
:데이터, 마지막에 빈 라인 두 개 포함시키세요
data: {"time": <%= new java.util.Date().getTime() %>, "count": <%= new java.util.Random().nextInt(200) %>}
chart.html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>챠트</title>
<style type="text/css">
#container, #container2, #container3 {
height: 400px;
margin: 0 auto
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
</style>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- high charts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="js/sand-signika.js"></script>
<script defer>
var dynamicChart;
$(function() {
dynamicChart = new Highcharts.Chart({
chart : {
renderTo : 'container2',
defaultSeriesType : 'spline',
borderColor : '#DDDDDD',
borderRadius : 5,
borderWidth : 1,
},
colors : [ 'cyan' ],
title : {
text : 'Dynamic Chart',
margin: 5,
style: {"fontSize": "1.2em"}
},
xAxis : {
type : 'datetime',
tickPixelInterval : 1000,
maxZoom : 10 * 100,
title : {
text: 'Time',
margin : 5,
}
},
yAxis : {
min: 0,
max: 110,
minPadding : 0.2,
maxPadding : 0.2,
title : {
text : 'Count',
margin : 5
}
},
series : [ {
name : 'Data',
data : []
} ]
});
});
var source = new EventSource("./sse.jsp");
source.addEventListener(
"message",
function(event) {
//console.log(event);
var shift = dynamicChart.series[0].data.length > 20;
var data = JSON.parse(event.data);
//console.log(data);
dynamicChart.series[0].addPoint([data.time, data.count], true, shift);
}
);
source.addEventListener("error", function(event) {
//console.log(event);
});
</script>
</head>
<body>
<div id="container" class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
<div id="container2" class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
<div id="container3" class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="loading">
<i class="icon-spinner icon-spin icon-large"></i>
Loading data from Google Spreadsheets...
</div>
</div>
<script type="text/javascript">
myChart = Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
});
</script>
</body>
</html>
|