구글챠트 생성

>>구글챠트<<

https://private.tistory.com/67
	column chart

 

 

 

<!-- 1.구틀챠트 js import -->

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

 

 

$(document).ready(function() {

 

doSearch();

}

 

 

// 2.구글챠트 배열 데이터 선언

var chartDataArr = []; //구글챠트 데이터

var doSearch = function() {

 

comm.ajaxPost({url : "/web/sms/getListSendLogStats.asn", data : newObj}, function(resultData) {

 

var dataSetItem = {

"sendDt" : {"rowKey" : true}

, "unitId" : {"rowKey" : true, hidden:true}

, "unitName" : {"rowKey" : true}

, "smsCnt" : {}

, "lmsMmsCnt" : {}

, "kakaoCnt" : {}

};

bootDataTable.setData($("#"+category+"Grid"), dataSetItem, resultData.data);

 

 

//3.구글챠트 데이터 배열 조작

chartDataArr = []; //구글챠트 데이터

chartDataArr.push(["Title", "SMS", "LMS·MMS", "KAKAO"]);

 

var dataArr;

$.each( resultData.data, function(key, value){

//console.log(key, ":", value);

dataArr = [];

$.each(value, function(sKey, sValue){

if(sKey=="sendDt") {

dataArr.push(sValue);

}

if(sKey=="smsCnt") {

dataArr.push(sValue*1);

}

if(sKey=="lmsMmsCnt") {

dataArr.push(sValue*1);

}

if(sKey=="kakaoCnt") {

dataArr.push(sValue*1);

}

});

 

chartDataArr.push(dataArr);

 

});

 

//4.구글챠트 생성 함수 호출 : 위치가 데이터 조작하는 위치여야함

if(dataArr!=null && dataArr.length>0) google.charts.setOnLoadCallback(schedulerSuccessAndFailChart);

 

});

}

<script>

 

//5.구글챠트생성함수

function schedulerSuccessAndFailChart() {

 

var data = google.visualization.arrayToDataTable(chartDataArr);

 

var barChartOption = {

title:'발송통계',

bars: 'vertical',

//height :'100%', // 적용안됌

height :'1000',

width :'650',

chartArea : { top:0},

//legend: { position: 'top' }, // top magine 지나치게 적용됨

isStacked: false,

tooltip:{textStyle : {fontSize:12}, showColorCode : true},

animation: { //차트가 뿌려질때 실행될 애니메이션 효과

startup: true,

duration: 1000,

easing: 'linear' },

annotations: {

textStyle: {

fontSize: 15,

bold: true,

italic: true,

color: '#871b47',

auraColor: '#d799ae',

opacity: 0.8

}

}

};

 

//구글챠트생성

var chart = new google.visualization.BarChart(document.getElementById('barChartDiv'));

 

chart.draw(data, barChartOption);

//반응형 그래프 출력 - 반응형 그래프를 원하지 않을 시 제거하거나 주석처리 하세요.

window.addEventListener('resize', function() { chart.draw(data, barChartOption); }, false);

}

 

</script>

 

 

<div class="row" style="margin-bottom:100px; float:left;" ><!-- float:left 챠트를 그리드 옆에 그리기 위함 -->

<div>

<div class="panel panel-default">

<div class="panel-body" style="overflow-x:scroll;overflow-y:scroll; width:650px;">

<table id="sendLogStatsGrid" class="table table-striped table-bordered table-hover" style="table-layout:fixed; word-break:break-all;">

<colgroup>

<col width="120" />

<col width="120" />

<col width="130" />

<col width="130" />

<col width="130" />

</colgroup>

<thead class="thead-dark">

<tr>

<th class="text-center">날짜</th>

<th class="text-center">Unit명</th>

<th class="text-center">SMS발송건수</th>

<th class="text-center">LMS·MMS발송건수</th>

<th class="text-center">KAKAO발송건수</th>

</tr>

</thead>

<tbody></tbody>

</table>

</div>

</div>

</div>

 

<!-- 챠트 영역 -->

<div id="chartDiv" class="ml-5" style="width:650px;height:100%;">

<div id="barChartDiv"></div>

</div>

</div>