Ken Johnson
112 lines
3.1 KiB
Plaintext
112 lines
3.1 KiB
Plaintext
<div class="dashboard-wrapper">
|
|
<div class="main-container">
|
|
<!-- Begin DP-->
|
|
<div class="row-fluid">
|
|
<div class="span6">
|
|
<div class="widget">
|
|
<div class="widget-header">
|
|
<div class="title">
|
|
<span class="fs1" aria-hidden="true" data-icon=""></span> Schedule PTO
|
|
</div>
|
|
</div>
|
|
<div class="widget-body">
|
|
<form class="form-horizontal" action="#">
|
|
|
|
<div class="control-group">
|
|
<label class="control-label" for="date_range1">
|
|
Date Range Input
|
|
</label>
|
|
<div class="controls">
|
|
<div class="input-append">
|
|
<input type="text" name="date_range1" id="date_range1" class="span8 date_picker" placeholder="Select Date"/>
|
|
<span class="add-on">
|
|
<i class="icon-calendar"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End DP-->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="widget">
|
|
<div class="widget-header">
|
|
<div class="title">
|
|
<span class="fs1" aria-hidden="true" data-icon=""></span> Column Chart
|
|
</div>
|
|
</div>
|
|
<div class="widget-body">
|
|
<div id="column_chart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Google Visualization JS -->
|
|
<script type="text/javascript" src="https://www.google.com/jsapi">
|
|
</script>
|
|
<script type="text/javascript">
|
|
|
|
//Dropdown
|
|
$('.dropdown-toggle').dropdown();
|
|
|
|
//Date picker
|
|
$('.date_picker').daterangepicker({
|
|
opens: 'right'
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
drawChart3()
|
|
});
|
|
|
|
google.load("visualization", "1", {
|
|
packages: ["corechart"]
|
|
});
|
|
|
|
function drawChart3() {
|
|
var data = google.visualization.arrayToDataTable([
|
|
['Year', 'Visitors', 'Orders', 'Income', 'Expenses'],
|
|
['2007', 300, 800, 900, 300],
|
|
['2008', 1170, 860, 1220, 564],
|
|
['2009', 260, 1120, 2870, 2340],
|
|
['2010', 1030, 540, 3430, 1200],
|
|
['2011', 200, 700, 1700, 770],
|
|
['2012', 1170, 2160, 3920, 800], ]);
|
|
|
|
var options = {
|
|
width: 'auto',
|
|
height: '160',
|
|
backgroundColor: 'transparent',
|
|
colors: ['#b5799e', '#579da9', '#e26666', '#1e825e', '#dba26b'],
|
|
tooltip: {
|
|
textStyle: {
|
|
color: '#666666',
|
|
fontSize: 11
|
|
},
|
|
showColorCode: true
|
|
},
|
|
legend: {
|
|
textStyle: {
|
|
color: 'black',
|
|
fontSize: 12
|
|
}
|
|
},
|
|
chartArea: {
|
|
left: 60,
|
|
top: 10,
|
|
height: '80%'
|
|
},
|
|
};
|
|
|
|
var chart = new google.visualization.ColumnChart(document.getElementById('column_chart'));
|
|
chart.draw(data, options);
|
|
}
|
|
|
|
</script> |