highcharts series data push example
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" charset="euc-kr"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<!-- JQUERY -->
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- font-awesome ICON -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!-- bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript">
var chart_obj = null;
var xx = 1585324560000;
function chart_test()
{
/*
var data = [
{
1522675800000,
166.64,
168.94,
164.47,
166.68
},
{
1522762200000,
167.64,
168.75,
164.88,
168.39
},
{
1522848600000,
164.88,
172.01,
164.77,
171.61
}
];
*/
var chartdata = [];
chartdata.push({
"x" : 1585324440000,
"open" : 2.02168,
"high" : 2.02174,
"low" : 2.01833,
"close" : 2.01865
});
chartdata.push({
"x" : 1585324500000,
"open" : 2.02168,
"high" : 2.02174,
"low" : 2.01833,
"close" : 2.01865
});
chartdata.push({
"x" : 1585324560000,
"open" : 2.0184,
"high" : 2.01887,
"low" : 2.01346,
"close" : 2.01658
});
console.log(chartdata);
chart_obj = Highcharts.stockChart('chart_div', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: chartdata,
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
}
}]
});
}
function chart_push()
{
xx = xx + 60000;
var add_array = {
"x" : xx,
"open" : 2.0284,
"high" : 2.02887,
"low" : 2.02346,
"close" : 2.02658
};
chart_obj.series[0].addPoint(add_array);
}
$(document).ready(function(){
chart_test();
});
</script>
<button type="button" onclick="chart_push();">추가</button>
<div id="chart_div" style="height: 400px; min-width: 310px"></div>
</body>
</html>
