일자별 데이터 라인차트를 그리고 bar를 통해 확대 축소를 할 수 있다.
50~57라인 위 data.addRows 에 임의값을 넣어 만든 예제(주석처리됨)
나는 여기서 기존의 소스에서 php를 이용해서 DB조회를 해서 불러온 값을 기반으로 그래프를 그렸다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Line_Controls_Chart</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- google charts -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<h4>활성화된 사용자 VM 그래프</h4>
<div id="Line_Controls_Chart">
<!-- 라인 차트 생성할 영역 -->
<div id="lineChartArea" style="padding:0px 20px 0px 0px;"></div>
<!-- 컨트롤바를 생성할 영역 -->
<div id="controlsArea" style="padding:0px 20px 0px 0px;"></div>
</div>
</body>
<script>
var chartDrowFun = {
chartDrow : function(){
var chartData = '';
//날짜형식 변경하고 싶으시면 이 부분 수정하세요.
var chartDateformat = 'yyyy년MM월dd일';
//라인차트의 라인 수
var chartLineCount = 10;
//컨트롤러 바 차트의 라인 수
var controlLineCount = 10;
function drawDashboard() {
var data = new google.visualization.DataTable();
//그래프에 표시할 컬럼 추가
data.addColumn('datetime' , '날짜');
data.addColumn('number' , '활성 샤용자 VM');
//그래프에 표시할 데이터
var dataRow = [];
/*for(var i = 0; i <= 29; i++){ //랜덤 데이터 생성
var total = Math.floor(Math.random() * 300) + 1;
var man = Math.floor(Math.random() * total) + 1;
var woman = total - man;
dataRow = [new Date('2017', '09', i , '10'), man, woman , total];
data.addRow(dataRow);
}*/
data.addRows([
<?php
require('./lib/db.php');
$sql="select substr(daytime,1,4) as yy , substr(daytime,6,2) as mm, substr(daytime,9,2) as dd, server_cnt from liveserver_stat;";
$query= mysqli_query($conn2,$sql);
while($row=mysqli_fetch_array($query)){
echo"[new Date($row[yy],$row[mm]-1,$row[dd]), $row[server_cnt]],";
}
?>
]);
var chart = new google.visualization.ChartWrapper({
chartType : 'LineChart',
containerId : 'lineChartArea', //라인 차트 생성할 영역
options : {
isStacked : 'percent',
focusTarget : 'category',
height : 500,
width : '100%',
legend : { position: "top", textStyle: {fontSize: 13}},
pointSize : 5,
tooltip : {textStyle : {fontSize:12}, showColorCode : true,trigger: 'both'},
hAxis : {format: chartDateformat, gridlines:{count:chartLineCount,units: {
years : {format: ['yyyy년']},
months: {format: ['MM월']},
days : {format: ['dd일']},
hours : {format: ['HH시']}}
},textStyle: {fontSize:12}},
vAxis : {minValue: 100,viewWindow:{min:0},gridlines:{count:-1},textStyle:{fontSize:12}},
animation : {startup: true,duration: 1000,easing: 'in' },
annotations : {pattern: chartDateformat,
textStyle: {
fontSize: 15,
bold: true,
italic: true,
color: '#871b47',
auraColor: '#d799ae',
opacity: 0.8,
pattern: chartDateformat
}
}
}
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'controlsArea', //control bar를 생성할 영역
options: {
ui:{
chartType: 'LineChart',
chartOptions: {
chartArea: {'width': '60%','height' : 80},
hAxis: {'baselineColor': 'none', format: chartDateformat, textStyle: {fontSize:12},
gridlines:{count:controlLineCount,units: {
years : {format: ['yyyy년']},
months: {format: ['MM월']},
days : {format: ['dd일']},
hours : {format: ['HH시']}}
}}
}
},
filterColumnIndex: 0
}
});
var date_formatter = new google.visualization.DateFormat({ pattern: chartDateformat});
date_formatter.format(data, 0);
var dashboard = new google.visualization.Dashboard(document.getElementById('Line_Controls_Chart'));
window.addEventListener('resize', function() { dashboard.draw(data); }, false); //화면 크기에 따라 그래프 크기 변경
dashboard.bind([control], [chart]);
dashboard.draw(data);
}
google.charts.setOnLoadCallback(drawDashboard);
}
}
$(document).ready(function(){
//google.charts.load('current', {'packages':['line','controls']});
google.charts.load('50', {'packages':['line','controls']});
chartDrowFun.chartDrow(); //chartDrow() 실행
});
</script>
</html>
반응형
'프로그래밍 > php' 카테고리의 다른 글
| [HTML] TABLE 테이블 첫 행 스크롤 고정 (0) | 2024.02.16 |
|---|---|
| [LINUX][PHP] 우분투 PHP Fatal error: Uncaught Error: Class 'mysqli' not found (0) | 2023.11.07 |
| [PHP] FILE UPLOAD DISABLE 파일 업로드 OFF (0) | 2022.07.28 |
댓글