113 lines
2.9 KiB
Plaintext
113 lines
2.9 KiB
Plaintext
|
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
||
|
|
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
|
||
|
|
<script src="http://code.highcharts.com/highcharts.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
graph_data = <%= raw @mac_log_graph.to_json %>;
|
||
|
|
plot_band_start_hour = 16;
|
||
|
|
plot_band_end_hour = 22;
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
$('#graph').highcharts({
|
||
|
|
chart: {
|
||
|
|
type: 'column',
|
||
|
|
zoomType : 'x'
|
||
|
|
},
|
||
|
|
colors: [
|
||
|
|
'#2980B9'
|
||
|
|
],
|
||
|
|
title: {
|
||
|
|
style : { fontSize: '10px' },
|
||
|
|
text: "Click and Drag to Zoom."
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
title : { text : "Days" },
|
||
|
|
type : 'datetime',
|
||
|
|
plotBands: generatePlotBands(graph_data[0][0], graph_data[graph_data.length-1][0]),
|
||
|
|
labels : { align : "left" }
|
||
|
|
},
|
||
|
|
yAxis : {
|
||
|
|
title : {
|
||
|
|
text : "# of Computers"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "Computers",
|
||
|
|
data: graph_data
|
||
|
|
},
|
||
|
|
],
|
||
|
|
plotOptions: {
|
||
|
|
spline: {
|
||
|
|
lineWidth: 4,
|
||
|
|
marker: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
pointInterval: 3600000, // one hour
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
Highcharts.setOptions({
|
||
|
|
global : {
|
||
|
|
useUTC : false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function generatePlotBands(start,end){
|
||
|
|
plotBands = new Array();
|
||
|
|
for (var d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
|
||
|
|
// weekends
|
||
|
|
if(d.getDay()%6==0){
|
||
|
|
// highlight the whole day
|
||
|
|
plotBands.push({
|
||
|
|
color: '#eee',
|
||
|
|
from: d.setHours(0),
|
||
|
|
to: d.setHours(23)
|
||
|
|
});
|
||
|
|
// weekend hours
|
||
|
|
plotBands.push({
|
||
|
|
color: '#94C9EC',
|
||
|
|
from: d.setHours(12),
|
||
|
|
to: d.setHours(18)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else if(d.getDay()==3){
|
||
|
|
// special wednesday hours
|
||
|
|
plotBands.push({
|
||
|
|
color: '#94C9EC',
|
||
|
|
from: d.setHours(12),
|
||
|
|
to: d.setHours(plot_band_end_hour)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// open hours
|
||
|
|
plotBands.push({
|
||
|
|
color: '#82DAC9',
|
||
|
|
from: d.setHours(plot_band_start_hour),
|
||
|
|
to: d.setHours(plot_band_end_hour)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return plotBands;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Daily Computer Graph</h2>
|
||
|
|
<p><em>Note: these numbers are not absolute. They are calculated and adjusted on-the-fly and thus may vary depending on the query parameters.</em></p>
|
||
|
|
<%= link_to 'Back to Computers', macs_path, :class => 'btn' %>
|
||
|
|
<%= link_to 'Download JSON', macs_history_path+".json", :class => 'btn' %>
|
||
|
|
<div id="graph" title="MAC Presence by Day" style="height: 400px; width: 100%;"></div>
|
||
|
|
|
||
|
|
<%= form_tag(nil, :method => :get) do %>
|
||
|
|
<label>Start Date
|
||
|
|
<input id="start" name="start" type="date" value="<%= @start_date.to_date.to_s %>" />
|
||
|
|
</label>
|
||
|
|
<label>End Date
|
||
|
|
<input id="end" name="end" type="date" value="<%= @end_date.to_date.to_s %>" />
|
||
|
|
</label>
|
||
|
|
<%= submit_tag("Change Date", :name => nil, :class => 'btn') %>
|
||
|
|
<% end %>
|