내용

글번호 691
작성자 heojk
작성일 2017-06-16 12:45:05
제목 SSE를 이용한 변하는 차트 만들기
내용 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>