JS - highcharts 차트 라이브러리 사용

마스터욱 0 23 0 0 2019-01-18 23:49:06

캔들차트를 만들일이 있어 구글링으로 알아본 결과 highcharts 가 쓸만한 것 같아 사용해 보았습니다.

1분마다, 로컬 데이터베이스에 접속해서 데이터를 가져와 차트를 갱신합니다.

만약 새로 갱신된 데이터가 있다면 차트에 반영을 하게 해뒀습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div>
    <style>
        /*.highcharts-range-selector-group { display:none; }*/
    </style>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/stock/themes/grid-light.js"></script>
    <div id="candle_chart" style="width:100%;height:700px;"></div>
    <script type="text/javascript">
        /*
        [{"date":1455710400,"high":0.00978987,"low":0.0089,"open":0.009716,"close":0.00933999,"volume":2860.36726244,"quoteVolume":307623.36565991,"weightedAverage":0.00929827},{"date":1455724800,"high":0.0103898,"low":0.00930001,"open":0.00933999,"close":0.0094,"volume":2919.83796807,"quoteVolume":298145.85276802,"weightedAverage":0.00979332},
        JSON
        date : 1455710400
        high : 0.00978987
        low : 0.0089
        open : 0.009716
        close : 0.00933999
        volume : 2860.36726244
        quoteVolume : 307623.36565991
        weightedAverage : 0.00929827
        */
        var chartdata = [];
        var chart = null;
        var chart_load = false;
        function draw3()
        {
            //console.log(chartdata);
            chart_load = true;
 
            Highcharts.setOptions({
                global : { 
                    //useUTC : false
                    timezoneOffset: -9 * 60
                }
            }); 
 
            chart = Highcharts.stockChart('candle_chart',{
                title: {
                    text: 'GBP/AUD'
                },
                plotOptions: {
                    candlestick: {
                        downColor: 'blue',
                        upColor: 'red'
                    }
                },
                series: [{
                    name: 'GBP/AUD',
                    type: 'candlestick',
                    data: chartdata,
                    tooltip: {
                        valueDecimals: 5
                    }
                }]
            });
            //console.log(chartdata);
            //console.log(chart.series[0].groupedData);
        }
 
        function getpo()
        {
            /*
            $.getJSON('https://poloniex.com/public?command=returnChartData&currencyPair=BTC_ETH&start=1455699200&end=9999999999&period=14400', function (data) {
                $.each(data, function(i, item){
                    chartdata.push([item.date*1000, item.open, item.high, item.low, item.close]);
                });
            });
            */
            var arg = {
                "csrf_test_name" : "<?php echo $this->security->get_csrf_hash(); ?>",
            };
            $.post("/get_realdata_minute", arg, function(res){
                if(res.result)
                {
                    //console.log(chart);
                    //console.log(res.item);
                    var item = res.item;
                    chartdata = [];
                    var last_data = null;
                    for(var key in item)
                    {
                        var row = item[key];
                        //console.log(row['trade_time']);
                        var time = parseFloat(row.time)*1000;
                        chartdata.push([time, parseFloat(row.start_price), parseFloat(row.high_price), parseFloat(row.low_price), parseFloat(row.end_price)]);
                    }
 
                    if(chart_load){
                        chart.series[0].setData(chartdata);
                    }
                    else{
                        draw3();
                    }
                }
                if(res.msg){
                    alert(res.msg);
                }
            }, "json");
        }
 
        $(document).ready(function(){
            getpo();
            setInterval(getpo, 1000 * 10);
        });
    </script>
</div>
Colored by Color Scripter
cs

0
0

개발 경험 Tip Javascript

JS - highcharts 차트 라이브러리 사용

비밀번호 확인

댓글수정