대시보드 임시 그래프 추가 등
parent
741dd2b2bf
commit
25a8b4b38b
|
|
@ -48,7 +48,7 @@
|
||||||
<div class="card my-2">
|
<div class="card my-2">
|
||||||
<div class="card-body row">
|
<div class="card-body row">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<img src="/images/icon/icon_003.png" width="60" height="60" alt="">
|
<img src="/images/icon/icon_04.png" width="60" height="60" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<a href="/admin/fieldData?status0=1&status1=1&status2=1&status3=1&status4=0"
|
<a href="/admin/fieldData?status0=1&status1=1&status2=1&status3=1&status4=0"
|
||||||
|
|
@ -105,8 +105,8 @@
|
||||||
<div class="card my-2">
|
<div class="card my-2">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<p class="mb-0 text-black-50">-</p>
|
<p class="mb-0 text-black-50">빈자리 메꿀 그래프</p>
|
||||||
그래프
|
<div id="tempLineChart"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
$(function (){
|
$(function (){
|
||||||
google.charts.load('current', {packages: ['corechart', 'line']});
|
google.charts.load('current', {packages: ['bar']});
|
||||||
google.charts.setOnLoadCallback(drawMapUseFromDayChart);
|
google.charts.setOnLoadCallback(drawMapUseFromDayChart);
|
||||||
|
google.charts.load('current', {packages: ['corechart']});
|
||||||
google.charts.load("current", {packages:["corechart"]});
|
|
||||||
google.charts.setOnLoadCallback(drawAreaDonutChart);
|
google.charts.setOnLoadCallback(drawAreaDonutChart);
|
||||||
|
google.charts.load('current', {packages:['line']});
|
||||||
|
google.charts.setOnLoadCallback(drawTempChart);
|
||||||
})
|
})
|
||||||
|
|
||||||
function drawMapUseFromDayChart() {
|
function drawMapUseFromDayChart() {
|
||||||
|
|
@ -18,11 +19,11 @@ function drawMapUseFromDayChart() {
|
||||||
role: "annotation" }]);
|
role: "annotation" }]);
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
bar: {groupWidth: "95%"},
|
bar: {groupWidth: "80%"},
|
||||||
legend: { position: "bottom" },
|
legend: { position: "bottom" },
|
||||||
};
|
};
|
||||||
var chart = new google.visualization.ColumnChart(document.getElementById("mapUseFromDayChart"));
|
var chart = new google.charts.Bar(document.getElementById("mapUseFromDayChart"));
|
||||||
chart.draw(view, options);
|
chart.draw(view, google.charts.Bar.convertOptions(options));
|
||||||
|
|
||||||
/*$.ajax({
|
/*$.ajax({
|
||||||
url: "/admin/dayMapUseData",
|
url: "/admin/dayMapUseData",
|
||||||
|
|
@ -60,3 +61,39 @@ function drawAreaDonutChart() {
|
||||||
var chart = new google.visualization.PieChart(document.getElementById('areaDonutChart'));
|
var chart = new google.visualization.PieChart(document.getElementById('areaDonutChart'));
|
||||||
chart.draw(data, options);
|
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, 80.8],
|
||||||
|
[2, 30.9, 69.5],
|
||||||
|
[3, 25.4, 57],
|
||||||
|
[4, 11.7, 18.8],
|
||||||
|
[5, 11.9, 17.6],
|
||||||
|
[6, 8.8, 13.6],
|
||||||
|
[7, 7.6, 12.3],
|
||||||
|
[8, 12.3, 29.2],
|
||||||
|
[9, 16.9, 42.9],
|
||||||
|
[10, 12.8, 30.9],
|
||||||
|
[11, 5.3, 7.9],
|
||||||
|
[12, 6.6, 8.4],
|
||||||
|
[13, 4.8, 6.3],
|
||||||
|
[14, 4.2, 6.2]
|
||||||
|
]);
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
axes: {
|
||||||
|
x: {
|
||||||
|
0: {side: 'top'}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var chart = new google.charts.Line(document.getElementById('tempLineChart'));
|
||||||
|
|
||||||
|
chart.draw(data, google.charts.Line.convertOptions(options));
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue