조민지

Merge branch 'chart' into 'developing'

Chart Update



See merge request !1
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Highcharts Example</title>
<style type="text/css"></style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<div
id="container"
style="min-width: 310px; height: 400px; margin: 0 auto"
></div>
<script type="text/javascript">
var death = [3, 4, 3, 5, 4, 10, 12,1,2,3];
var temp = [1, 3, 10, 3, 11, 5, 8,4,5,6];
var chart = Highcharts.chart("container", {
chart: {
type: "areaspline"
},
title: {
text: "실시간 사망률"
},
legend: {
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
xAxis: {
categories: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
"Sunday",
"Sunday",
"Sunday"
],
plotBands: [
{
// 색칠되는 구간
from: 7.5,
to: 10.5,
color: "rgba(68, 170, 213, .2)"
}
]
},
yAxis: {
title: {
text: "Fruit units"
}
},
tooltip: {
shared: true,
valueSuffix: " %", //point mouseover 단위
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [
{
name: "사망률(%)",
data: []
},
{
name: "기온('C)",
data: []
}
]
});
death.shift();
temp.shift();
death.push(11);
temp.push(3);
chart.series[0].setData(death);
chart.series[1].setData(temp);
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Highcharts Example</title>
<style type="text/css"></style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<div
id="container"
style="min-width: 310px; height: 400px; margin: 0 auto"
></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'
},
series: [{
name: 'Rainfall',
type: 'areaspline',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}]
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'areaspline'
},
title: {
text: '실시간 사망률'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: '사망률',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: '기온',
data: [1, 3, 4, 3, 3, 5, 4]
}]
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Highcharts Example</title>
<style type="text/css"></style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<div
id="container1"
style="width:1260px; height: 400px; margin: 0 auto"
></div>
<div style="width:1275px; margin:0 auto;">
<div style="display: inline-block;">
<div
id="container2"
style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div style="display: inline-block;">
<div
id="container3"
style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div style="display: inline-block;">
<div
id="container4"
style="width:400px; height: 300px; padding:0; margin-left:0px;"
></div>
</div>
</div>
<script type="text/javascript">
Highcharts.chart("container1", {
chart: {
type: "areaspline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = 0.7 //여기에 새로 넣을 값
series.addPoint([x, y], true, true);
}, 1000); //1000=1초 -> 1분=60000
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container2", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container3", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container4", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
</script>
</body>
</html>