| | |
| | | <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> |
| | | <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> |
| | | |
| | | |
| | | <google-chart |
| | | columns="vm.chartData.columns" |
| | | rows="vm.chartData.rows" |
| | | options="vm.chartData.options"> |
| | | |
| | | </google-chart> |
| | | </div> |
| | | </div> |
| | | </div> |