120 lines
3.3 KiB
JavaScript
120 lines
3.3 KiB
JavaScript
const smSize = 575;
|
|
let beforeSize;
|
|
window.onresize = function (){
|
|
const nowWidth = this.innerWidth;
|
|
if(beforeSize>smSize&&nowWidth<smSize){
|
|
loadChart(nowWidth)
|
|
}else if(beforeSize<smSize&&nowWidth>smSize){
|
|
loadChart(nowWidth)
|
|
}else if(beforeSize+100<nowWidth){
|
|
loadChart(nowWidth)
|
|
}else if(beforeSize>nowWidth+100){
|
|
loadChart(nowWidth)
|
|
}
|
|
}
|
|
$(function (){
|
|
loadChart(window.innerWidth)
|
|
})
|
|
function loadChart(nowWidth){
|
|
beforeSize = nowWidth;
|
|
google.charts.load('current', {packages: ['bar']});
|
|
google.charts.setOnLoadCallback(drawMapUseFromDayChart);
|
|
google.charts.load('current', {packages: ['corechart']});
|
|
google.charts.setOnLoadCallback(drawAreaDonutChart);
|
|
google.charts.load('current', {packages:['line']});
|
|
google.charts.setOnLoadCallback(drawTempChart);
|
|
}
|
|
|
|
function drawMapUseFromDayChart() {
|
|
var dataHeader = [['날짜', '사용량']];
|
|
var chartData = google.visualization.arrayToDataTable(dataHeader.concat(dayMapUseDataList));
|
|
|
|
var view = new google.visualization.DataView(chartData);
|
|
view.setColumns([0, 1,
|
|
{ calc: "stringify",
|
|
sourceColumn: 1,
|
|
type: "string",
|
|
role: "annotation" }]);
|
|
|
|
var options = {
|
|
bar: {groupWidth: "80%"},
|
|
legend: { position: "bottom" },
|
|
};
|
|
var chart = new google.charts.Bar(document.getElementById("mapUseFromDayChart"));
|
|
chart.draw(view, google.charts.Bar.convertOptions(options));
|
|
|
|
/*$.ajax({
|
|
url: "/admin/dayMapUseData",
|
|
type: "GET",
|
|
data:{
|
|
searchStartDate:"2022-02-18",
|
|
searchEndDate:"2022-03-04"
|
|
},
|
|
dataType:"json",
|
|
success : function(data, textStatus, jqXHR) {
|
|
console.log(data);
|
|
// ajax 반환 데이터가 {empty: false}로 나온다. 이유를 모르겠다.
|
|
var dataHeader = [['날짜', '사용량']];
|
|
var chartData = google.visualization.arrayToDataTable(dataHeader.concat(data));
|
|
var options = {
|
|
legend: { position: 'bottom' }
|
|
};
|
|
var chart = new google.visualization.LineChart(document.getElementById('mapUseFromDayChart'));
|
|
chart.draw(chartData, options);
|
|
},
|
|
error: function (request, status, error) {
|
|
|
|
}
|
|
});*/
|
|
}
|
|
|
|
function drawAreaDonutChart() {
|
|
var dataHeader = [['지역', '수집 건 수']];
|
|
var data = google.visualization.arrayToDataTable(dataHeader.concat(areaDataList));
|
|
|
|
var options = {
|
|
pieHole: 0.4,
|
|
};
|
|
|
|
var chart = new google.visualization.PieChart(document.getElementById('areaDonutChart'));
|
|
chart.draw(data, options);
|
|
}
|
|
|
|
function drawTempChart() {
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('number', 'param01');
|
|
data.addColumn('number', 'value01');
|
|
data.addColumn('number', 'value02');
|
|
|
|
data.addRows([
|
|
[1, 37.8, 55.8],
|
|
[2, 30.9, 42.5],
|
|
[3, 25.4, 37],
|
|
[4, 11.7, 18.8],
|
|
[5, 11.9, 17.6],
|
|
[6, 8.8, 13.6],
|
|
[7, 7.6, 12.3],
|
|
[8, 12.3, 21.2],
|
|
[9, 16.9, 32.9],
|
|
[10, 12.8, 23.9],
|
|
[11, 5.3, 7.9],
|
|
[12, 6.6, 8.4],
|
|
[13, 4.8, 6.3],
|
|
[14, 4.2, 6.2]
|
|
]);
|
|
|
|
var options = {
|
|
// chart: {
|
|
// title: '빈자리 메꿀 그래프',
|
|
// },
|
|
// axes: {
|
|
// x: {
|
|
// 0: {side: 'top'}
|
|
// }
|
|
// }
|
|
};
|
|
|
|
var chart = new google.charts.Line(document.getElementById('tempLineChart'));
|
|
|
|
chart.draw(data, google.charts.Line.convertOptions(options));
|
|
} |