| | |
|---|
| | | <script type="text/javascript"> |
|---|
| | | google.charts.load('current', {'packages':['line']}); |
|---|
| | | google.charts.setOnLoadCallback(drawChart); |
|---|
| | | |
|---|
| | | function drawChart() { |
|---|
| | | |
|---|
| | | var data = new google.visualization.DataTable(); |
|---|
| | | data.addColumn('number', '날짜'); |
|---|
| | | data.addColumn('number', '홈페이지 변조 탐지'); |
|---|
| | | data.addColumn('number', '경유지 탐지'); |
|---|
| | | data.addColumn('number', '일감 조회'); |
|---|
| | | |
|---|
| | | data.addRows([ |
|---|
| | | [1, 37.8, 80.8, 41.8], |
|---|
| | | [2, 30.9, 69.5, 32.4], |
|---|
| | | [3, 25.4, 57, 25.7], |
|---|
| | | [4, 11.7, 18.8, 10.5], |
|---|
| | | [5, 11.9, 17.6, 10.4], |
|---|
| | | [6, 8.8, 13.6, 7.7], |
|---|
| | | [7, 7.6, 12.3, 9.6], |
|---|
| | | [8, 12.3, 29.2, 10.6], |
|---|
| | | [9, 16.9, 42.9, 14.8], |
|---|
| | | [10, 12.8, 30.9, 11.6], |
|---|
| | | [11, 5.3, 7.9, 4.7], |
|---|
| | | [12, 6.6, 8.4, 5.2], |
|---|
| | | [13, 4.8, 6.3, 3.6], |
|---|
| | | [14, 4.2, 6.2, 3.4] |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | var options = { |
|---|
| | | chart: { |
|---|
| | | title: '일감 유형별 API 사용 현황', |
|---|
| | | subtitle: '최근 15일' |
|---|
| | | }, |
|---|
| | | width: 900, |
|---|
| | | height: 500 |
|---|
| | | }; |
|---|
| | | |
|---|
| | | var chart = new google.charts.Line(document.getElementById('linechart_material')); |
|---|
| | | |
|---|
| | | chart.draw(data, google.charts.Line.convertOptions(options)); |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <div class="row"> |
|---|
| | |
|---|
| | | </h6> |
|---|
| | | |
|---|
| | | <div class="element-box"> |
|---|
| | | <div id="linechart_material"></div> |
|---|
| | | <div> |
|---|
| | | <select class="form-control form-control-sm rounded width-30 d-inline-block mb-10" ng-model="vm.search.searchPeriod" ng-change="fn.changeSearchPeriod()"> |
|---|
| | | <option value="LAST_SEVEN_DAYS" translate="common.last7Days">최근 7일</option> |
|---|
| | | <option value="THIS_WEEK" translate="common.thisWeek">이번 주</option> |
|---|
| | | <option value="LAST_WEEK" translate="common.lastWeek">지난 주</option> |
|---|
| | | <option value="THIS_MONTH" translate="common.thisMonth">이번 달</option> |
|---|
| | | <option value="LAST_MONTH" translate="common.lastMonth">지난 달(1일~말일)</option> |
|---|
| | | <option value="LAST_THIRTY_DAYS" translate="common.last30Days">최근 30일</option> |
|---|
| | | <option value="CUSTOM_INPUT" translate="common.directInput">직접입력</option> |
|---|
| | | </select> |
|---|
| | | |
|---|
| | | <input type="text" |
|---|
| | | ng-show="vm.search.searchPeriod == 'CUSTOM_INPUT'" |
|---|
| | | class="form-control form-control-sm rounded col-md-4 d-inline-block input-readonly" |
|---|
| | | ng-model="vm.search.startEndDateRange" |
|---|
| | | modal-form-auto-scroll |
|---|
| | | parent-el="'#createdWidget'" |
|---|
| | | range-type="date" |
|---|
| | | onfocus="this.blur()" |
|---|
| | | style="height: 32px !important; padding: 0.25rem 0.5rem; font-size: 0.8rem; line-height: 1.5;" |
|---|
| | | date-range-picker> |
|---|
| | | <div class="row"> |
|---|
| | | <div class="col-xs-12"> |
|---|
| | | <div id="createdWidget" class="bootstrap-datepicker"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="no-cont1" |
|---|
| | | ng-if="vm.chartData.columns.length < 1" |
|---|
| | | translate="common.noRecord"> |
|---|
| | | 기록이 없습니다. |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div ng-if="vm.chartData.columns.length > 0"> |
|---|
| | | <google-chart |
|---|
| | | columns="vm.chartData.columns" |
|---|
| | | rows="vm.chartData.rows" |
|---|
| | | options="vm.chartData.options"> |
|---|
| | | |
|---|
| | | </google-chart> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
