Add simple way to adjust date ranges on the graphs page

This commit is contained in:
Tim 2015-06-24 20:02:20 +02:00
parent 9ca9b5e9ae
commit 54ee7f4c0d

View file

@ -25,8 +25,15 @@ from plexpy import helpers
<div class="wellbg">
<div class="wellheader">
<div class="dashboard-wellheader">
<div id="currentActivityHeader">
<h4>Daily Watch History (Past 30 days)</h4>
<div class="span12">
<div class="span8"><h4>Daily Watch History (Past <span class="days">30</span> days)</h4></div>
<div class="span4" style="text-align: right; padding-right: 30px;">
<h5>
<a href="javascript:void(0)" id="graph-30"> 30 days</a> |
<a href="javascript:void(0)" id="graph-90"> 90 days</a> |
<a href="javascript:void(0)" id="graph-365"> 1 year</a>
</h5>
</div>
</div>
</div>
</div>
@ -43,7 +50,7 @@ from plexpy import helpers
<div class="span6">
<div class="wellheader">
<div class="dashboard-wellheader">
<h4>Watches by day of week (Past 30 days)</h4>
<h4>Watches by day of week (Past <span class="days">30</span> days)</h4>
</div>
</div>
<div class="graphs-instance">
@ -55,7 +62,7 @@ from plexpy import helpers
<div class="span6">
<div class="wellheader">
<div class="dashboard-wellheader">
<h4>Watches by hour of day (Past 30 days)</h4>
<h4>Watches by hour of day (Past <span class="days">30</span> days)</h4>
</div>
</div>
<div class="graphs-instance">
@ -80,49 +87,77 @@ from plexpy import helpers
<script src="interfaces/default/js/graphs/plays_by_hourofday.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: "get_plays_by_date",
type: 'get',
data: { time_range: '30' },
dataType: "json",
cache: false,
success: function(data) {
var dateArray = [];
for (var i = 0; i < data.categories.length; i++) {
dateArray.push(moment(data.categories[i]).valueOf());
var current_range = 30;
function loadGraphs(time_range) {
$.ajax({
url: "get_plays_by_date",
type: 'get',
data: { time_range: time_range },
dataType: "json",
cache: false,
success: function(data) {
var dateArray = [];
for (var i = 0; i < data.categories.length; i++) {
dateArray.push(moment(data.categories[i]).valueOf());
}
hc_plays_by_day_options.yAxis.min = 0;
hc_plays_by_day_options.xAxis.categories = dateArray;
hc_plays_by_day_options.series = data.series;
var hc_plays_by_day = new Highcharts.Chart(hc_plays_by_day_options);
}
hc_plays_by_day_options.yAxis.min = 0;
hc_plays_by_day_options.xAxis.categories = dateArray;
hc_plays_by_day_options.series = data.series;
var hc_plays_by_day = new Highcharts.Chart(hc_plays_by_day_options);
}
});
$.ajax({
url: "get_plays_by_dayofweek",
type: 'get',
data: { time_range: time_range },
dataType: "json",
cache: false,
success: function(data) {
hc_plays_by_dayofweek_options.xAxis.categories = data.categories;
hc_plays_by_dayofweek_options.series = data.series;
var hc_plays_by_dayofweek = new Highcharts.Chart(hc_plays_by_dayofweek_options);
}
});
$.ajax({
url: "get_plays_by_hourofday",
type: 'get',
data: { time_range: time_range },
dataType: "json",
cache: false,
success: function(data) {
hc_plays_by_hourofday_options.xAxis.categories = data.categories;
hc_plays_by_hourofday_options.series = data.series;
var hc_plays_by_hourofday = new Highcharts.Chart(hc_plays_by_hourofday_options);
}
});
}
// Set initial state
loadGraphs(current_range);
$('#graph-30').click(function() {
current_range = 30;
$('.days').html(current_range);
loadGraphs(30);
});
$.ajax({
url: "get_plays_by_dayofweek",
type: 'get',
data: { time_range: '30' },
dataType: "json",
cache: false,
success: function(data) {
hc_plays_by_dayofweek_options.xAxis.categories = data.categories;
hc_plays_by_dayofweek_options.series = data.series;
var hc_plays_by_dayofweek = new Highcharts.Chart(hc_plays_by_dayofweek_options);
}
$('#graph-90').click(function() {
current_range = 90;
$('.days').html(current_range);
loadGraphs(90);
});
$.ajax({
url: "get_plays_by_hourofday",
type: 'get',
data: { time_range: '30' },
dataType: "json",
cache: false,
success: function(data) {
hc_plays_by_hourofday_options.xAxis.categories = data.categories;
hc_plays_by_hourofday_options.series = data.series;
var hc_plays_by_hourofday = new Highcharts.Chart(hc_plays_by_hourofday_options);
}
$('#graph-365').click(function() {
current_range = 365;
$('.days').html(current_range);
loadGraphs(365);
});
});
</script>
</%def>