소행성이야기

코드이그나이터 에서 amchart 전략패턴으로 사용하기

소행성왕자 2018. 7. 12. 14:37

코드이그나이터 에서 amchart  전략패턴으로 사용하기


이전에 포스트한 javascript chart amchart  을 코드이그나이터에서 third_part 로 사용해보록 하겠습니다.


보시면 아시겠지만 amchart 의 그래프의 종류가 워낙 많아서 

전략 패턴을 사용하여 작성 하였습니다.

아래는 소스 입니다.


third_party 폴더 구조 입니다.

그림1



파일 ruleLogGraph.php 생성합니다.

폴더 ruleLogGraph 생성합니다.


1
2
3
4
5
6
7
8
 
ruleLogGraph 하위에 아래 파일 생성합니다.
AutoLoader.php
ColumnChartWithImagesOnTop.php
DateBasedData.php
Donut3DChart.php
DonutWithRadialGradient.php
SmoothedLineChart.php
cs


여기까지 되었으면 그림1과 같은 구조가 완성이 됩니다.


helper 디렉토리에 rulegraph_helper.php 생성하여 코드이그나이터에서 헬퍼로 로드하여 사용합니다.

1
2

$this->load->helper('rulegraph');
cs


실제 controllers 에서는 아래와 같이 사용하면 됩니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?
// 항공사 group 
$arr = [];
$arr['type'] = 'DonutWithRadialGradient'; // DonutWithRadialGradient, Donut3DChart, ColumnChartWithImagesOnTop
$arr['rows'] = $airlineCdGroupCountList;
$logGraph = new ruleLogGraph($arr);
$airlineCdGroupGraphList = $logGraph->getGraph(new $arr['type']);
$this->assign('airlineCdGroupGraphList', $airlineCdGroupGraphList);
 
 
// date 로그
$arr = [];
$arr['type'] = 'SmoothedLineChart';     // DateBasedData, SmoothedLineChart
$arr['rows'] = $dayGroupCountList;
$logGraph = new ruleLogGraph($arr);
$dayGroupGraphList = $logGraph->getGraph(new $arr['type']);
$this->assign('dayGroupGraphList', $dayGroupGraphList);
 
cs


이제부터는 실제 파일 소스 입니다.

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
<?
//ruleLogGraph.php
 
if (!defined('PACKAGE_ROOT')) {
    define('PACKAGE_ROOT', dirname(__FILE__) . '/');
    require(PACKAGE_ROOT . 'ruleLogGraph/Autoloader.php');
}
 
 
interface ruleLogGraphStrategy
{
    public function getGraph(array $arr);
}
 
 
class ruleLogGraph
{
    private $strategy;
    private $arr;
 
    public function __construct(array $arr) {
        $this->arr = $arr;
    }
 
    public function getGraph($ts) {
 
        $this->strategy = $ts;
        $graph = $this->strategy->getGraph($this->arr);
        return $graph;
    }
 
}
cs


1
2
3
4
5
6
7
8
9
10
11
12
<?php 
//rulegraph_helper.php
 
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
require_once APPPATH."/third_party/ruleLogGraph.php";
 
class Rulegraph extends RuleLogGraph {
    public function __construct() {
        parent::__construct();
    }
}
?>
cs


1
2
3
4
5
6
7
8
9
<?
//Autoloader.php
 
function __autoload($className){
    include $className . '.php';
}
 
spl_autoload_register('__autoload');
 
cs


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
<?
//ColumnChartWithImagesOnTop.php
 
class ColumnChartWithImagesOnTop implements ruleLogGraphStrategy
{
 
 
    public function getGraph(array $arr) {
 
 
        $tmpArr = [];
        $cnt=0;
        foreach($arr['rows'] as $arr) {
            if($arr['pl_airlinecd']) {
                $tmpArr[$cnt]['airlineCd'] = $arr['pl_airlinecd'];
                $tmpArr[$cnt]['value'] = $arr['cnt'];
                $tmpArr[$cnt]['bullet'] = 'http://xxx.com/xxx/'.$arr['pl_airlinecd'].'.gif';
                $tmpArr[$cnt]['color'] = '#7F8DA9';
                $cnt++;
            }
        }
 
        $script = '
        <!-- Chart code  https://www.amcharts.com/demos/3d-pie-chart/ -->
        <script>
            var chart = AmCharts.makeChart("chartdiv2",
            {
                "type": "serial",
                "theme": "light",
                "dataProvider": '.json_encode($tmpArr).',
                "valueAxes": [{
                    "maximum": 80,
                    "minimum": 0,
                    "axisAlpha": 0,
                    "dashLength": 4,
                    "position": "left"
                }],
                "startDuration": 1,
                "graphs": [{
                    "balloonText": "<span style=\'font-size:13px;\'>[[category]]: <b>[[value]]</b></span>",
                    "bulletOffset": 10,
                    "bulletSize": 20,
                    "colorField": "color",
                    "cornerRadiusTop": 8,
                    "customBulletField": "bullet",
                    "fillAlphas": 0.8,
                    "lineAlpha": 0,
                    "type": "column",
                    "valueField": "value"
                }],
                "marginTop": 0,
                "marginRight": 0,
                "marginLeft": 0,
                "marginBottom": 0,
                "autoMargins": false,
                "categoryField": "airlineCd",
                "categoryAxis": {
                    "axisAlpha": 0,
                    "gridAlpha": 0,
                    "inside": true,
                    "tickLength": 0
                },
                "export": {
                    "enabled": true
                 }
            });
            </script>
        <div id="chartdiv2" class="chartdiv"></div>
        ';
 
        return $script;
    }
 
}
cs


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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<?
//DateBasedData.php
 
class DateBasedData implements ruleLogGraphStrategy
{
 
 
    public function getGraph(array $arr) {
 
 
        $tmpArr = [];
        $cnt=0;
        foreach($arr['rows'] as $arr) {
            $tmpArr[$cnt]['date'] = $arr['pl_wdate'];
            $tmpArr[$cnt]['value'] = $arr['cnt'];
            $cnt++;
        }
 
        $script = '
        <!-- Chart code  https://www.amcharts.com/demos/3d-pie-chart/ -->
            <script>
            var chart = AmCharts.makeChart("chartdiv", {
                "type": "serial",
                "theme": "light",
                "marginRight": 40,
                "marginLeft": 40,
                "autoMarginOffset": 20,
                "mouseWheelZoomEnabled":true,
                "dataDateFormat": "YYYY-MM-DD",
                "valueAxes": [{
                    "id": "v1",
                    "axisAlpha": 0,
                    "position": "left",
                    "ignoreAxisWidth":true
                }],
                "balloon": {
                    "borderThickness": 1,
                    "shadowAlpha": 0
                },
                "graphs": [{
                    "id": "g1",
                    "balloon":{
                        "drop":true,
                        "adjustBorderColor":false,
                        "color":"#ffffff"
                    },
                    "bullet": "round",
                    "bulletBorderAlpha": 1,
                    "bulletColor": "#FFFFFF",
                    "bulletSize": 5,
                    "hideBulletsCount": 50,
                    "lineThickness": 2,
                    "title": "red line",
                    "useLineColorForBulletBorder": true,
                    "valueField": "value",
                    "balloonText": "<span style=\'font-size:18px;\'>[[value]]</span>"
                }],
                "chartScrollbar": {
                    "graph": "g1",
                    "oppositeAxis":false,
                    "offset":30,
                    "scrollbarHeight": 80,
                    "backgroundAlpha": 0,
                    "selectedBackgroundAlpha": 0.1,
                    "selectedBackgroundColor": "#888888",
                    "graphFillAlpha": 0,
                    "graphLineAlpha": 0.5,
                    "selectedGraphFillAlpha": 0,
                    "selectedGraphLineAlpha": 1,
                    "autoGridCount":true,
                    "color":"#AAAAAA"
                },
                "chartCursor": {
                    "pan": true,
                    "valueLineEnabled": true,
                    "valueLineBalloonEnabled": true,
                    "cursorAlpha":1,
                    "cursorColor":"#258cbb",
                    "limitToGraph":"g1",
                    "valueLineAlpha":0.2,
                    "valueZoomable":true
                },
                "valueScrollbar":{
                    "oppositeAxis":false,
                    "offset":50,
                    "scrollbarHeight":10
                },
                "categoryField": "date",
                "categoryAxis": {
                    "parseDates": true,
                    "dashLength": 1,
                    "minorGridEnabled": true,
                    "labelFunction": function(valueText, date, categoryAxis) {
                        return date.toLocaleDateString();
                    }
                },
                "export": {
                    "enabled": true
                },
                "dataProvider": '.json_encode($tmpArr).',
            });
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = true;
            categoryAxis.minPeriod = "DD";
            chart.addListener("rendered", zoomChart);
            zoomChart();
            function zoomChart() {
                chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
            }
        </script>
            <div id="chartdiv" class="chartdiv"></div>
        ';
 
        return $script;
    }
 
}
cs


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
<?
//Donut3DChart.php
 
class Donut3DChart implements ruleLogGraphStrategy
{
 
 
    public function getGraph(array $arr) {
 
 
        $tmpArr = [];
        $cnt=0;
        foreach($arr['rows'] as $arr) {
            if($arr['pl_airlinecd']) {
                $tmpArr[$cnt]['airlineCd'] = $arr['pl_airlinecd'];
                $tmpArr[$cnt]['value'] = $arr['cnt'];
                $cnt++;
            }
        }
 
        $script = '
        <!-- Chart code  https://www.amcharts.com/demos/3d-pie-chart/ -->
        <script>
            var chart = AmCharts.makeChart( "chartdiv2", {
                "type": "pie",
                "theme": "light",
                "dataProvider": '.json_encode($tmpArr).',
                "valueField": "value",
                "titleField": "airlineCd",
                "outlineAlpha": 0.4,
                "depth3D": 15,
                "balloonText": "[[title]]<br><span style=\'font-size:14px\'><b>[[value]]</b> ([[percents]]%)</span>",
                "angle": 30,
                "export": {
                    "enabled": true
                }
            } );
        </script>
        <div id="chartdiv2" class="chartdiv"></div>
        ';
 
        return $script;
    }
 
}
cs


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
<?
//DonutWithRadialGradient.php
 
class DonutWithRadialGradient implements ruleLogGraphStrategy
{
 
 
    public function getGraph(array $arr) {
 
 
        $tmpArr = [];
        $cnt=0;
        foreach($arr['rows'] as $arr) {
            if($arr['pl_airlinecd']) {
                $tmpArr[$cnt]['airlineCd'] = $arr['pl_airlinecd'];
                $tmpArr[$cnt]['value'] = $arr['cnt'];
                $cnt++;
            }
        }
 
        $script = '
        <!-- Chart code  https://www.amcharts.com/demos/3d-pie-chart/ -->
        <script>
        var chart = AmCharts.makeChart("chartdiv2", {
            "type": "pie",
            "theme": "light",
            "innerRadius": "40%",
            "gradientRatio": [-0.4, -0.4, -0.4, -0.4, -0.4, -0.4, 0, 0.1, 0.2, 0.1, 0, -0.2, -0.5],
            "dataProvider": '.json_encode($tmpArr).',
            "balloonText": "[[value]]",
            "valueField": "value",
            "titleField": "airlineCd",
            "balloon": {
                "drop": true,
                "adjustBorderColor": false,
                "color": "#FFFFFF",
                "fontSize": 16
            },
            "export": {
                "enabled": true
            }
        });
        </script>
        <div id="chartdiv2" class="chartdiv"></div>
        ';
 
        return $script;
    }
 
}
cs


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
<?
//SmoothedLineChart.php
 
class SmoothedLineChart implements ruleLogGraphStrategy
{
 
 
    public function getGraph(array $arr) {
 
 
        $tmpArr = [];
        $cnt=0;
        foreach($arr['rows'] as $arr) {
            $tmpArr[$cnt]['date'] = $arr['pl_wdate'];
            $tmpArr[$cnt]['value'] = $arr['cnt'];
            $cnt++;
        }
 
        $script = '
        <!-- Chart code  https://www.amcharts.com/demos/3d-pie-chart/ -->
            <script src="https://www.amcharts.com/lib/3/serial.js"></script>
            <script>
                var chart = AmCharts.makeChart("chartdiv", {
                    "type": "serial",
                    "theme": "light",
                    "marginTop":0,
                    "marginRight": 80,
                    "dataProvider": '.json_encode($tmpArr).',
                    "valueAxes": [{
                        "axisAlpha": 0,
                        "position": "left"
                    }],
                    "graphs": [{
                        "id":"g1",
                        "balloonText": "[[category]]<br><b><span style=\'font-size:14px;\'>[[value]]</span></b>",
                        "bullet": "round",
                        "bulletSize": 8,
                        "lineColor": "#d1655d",
                        "lineThickness": 2,
                        "negativeLineColor": "#637bb6",
                        "type": "smoothedLine",
                        "valueField": "value"
                    }],
                    "chartScrollbar": {
                        "graph":"g1",
                        "gridAlpha":0,
                        "color":"#888888",
                        "scrollbarHeight":55,
                        "backgroundAlpha":0,
                        "selectedBackgroundAlpha":0.1,
                        "selectedBackgroundColor":"#888888",
                        "graphFillAlpha":0,
                        "autoGridCount":true,
                        "selectedGraphFillAlpha":0,
                        "graphLineAlpha":0.2,
                        "graphLineColor":"#c2c2c2",
                        "selectedGraphLineColor":"#888888",
                        "selectedGraphLineAlpha":1
                    },
                    "chartCursor": {
                        "categoryBalloonDateFormat": "YYYY-MM-DD",
                        "cursorAlpha": 0,
                        "valueLineEnabled":true,
                        "valueLineBalloonEnabled":true,
                        "valueLineAlpha":0.5,
                        "fullWidth":true
                    },
                    "dataDateFormat": "YYYY-MM-DD",
                    "categoryField": "date",
                    "categoryAxis": {
                        "parseDates": true,
                        "minorGridAlpha": 0.1,
                        "minorGridEnabled": true,
                        "labelFunction": function(valueText, date, categoryAxis) {
                        return date.toLocaleDateString();
                    }
                    },
                    "export": {
                        "enabled": true
                    }
                });
                chart.addListener("rendered", zoomChart);
                if(chart.zoomChart){
                    chart.zoomChart();
                }
                function zoomChart(){
                    chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
                }
            </script>
            <div id="chartdiv" class="chartdiv"></div>
        ';
 
        return $script;
    }
 
}
cs



'소행성이야기' 카테고리의 다른 글

python3 가상환경(Virtual environment) 설치  (0) 2018.07.13
CentOS7 Python3 yum으로 설치  (0) 2018.07.13
화려한 자바스크리트 차트 amchart  (0) 2018.07.12
[디자인패턴] PHP 템플릿 메소드 패턴(Template Method Pattern)  (0) 2018.07.11
logstash json 파일 input 방법  (0) 2018.07.10

'소행성이야기'의 다른글

  • 현재글코드이그나이터 에서 amchart 전략패턴으로 사용하기

관련글

댓글

티스토리툴바