<%@ 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
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
></
script
>
<
link
rel
=
"stylesheet"
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
>
<
script
src
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
></
script
>
<
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
>