You can now click a graph point on the daily graph to view which items were viewed for that day.

data/interfaces/default/graphs.html

@@ -51,6 +51,8 @@
                         </div>
                     </div>
                 </div>
+                <div class="modal fade" id="history-modal" tabindex="-1" role="dialog" aria-labelledby="history-modal">
+                </div>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="padded-header">
@@ -121,7 +123,6 @@
                     </div>
                 </div>
             </div>
-
         </div>
     </div>
 </div>
@@ -131,6 +132,34 @@
 <script src="interfaces/default/js/moment-with-locale.js"></script>
 <script src="interfaces/default/js/moment-duration-format.js"></script>
 <script src="interfaces/default/js/highcharts/js/highcharts.js"></script>
+<script>
+    // Modal popup dialog
+    function selectHandler(selectedDate) {
+
+        try
+        {
+            var dateValue = new Date(selectedDate);
+            var d = dateValue.getDate();
+            var m = dateValue.getMonth() + 1;
+            var y = dateValue.getFullYear();
+            var dateString = '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
+
+            $.ajax({
+                "url": "history_table_modal",
+                type: 'post',
+                data:  { 'start_date': dateString },
+                complete: function(xhr, status) {
+                    $("#history-modal").html(xhr.responseText);
+                    $('#history-modal').modal('show');
+                }
+            });
+        }
+        catch(err)
+        {
+          console.log("Failed to retrieve data");
+        }
+    }
+</script>
 <script src="interfaces/default/js/graphs/plays_by_day.js"></script>
 <script src="interfaces/default/js/graphs/plays_by_dayofweek.js"></script>
 <script src="interfaces/default/js/graphs/plays_by_hourofday.js"></script>

data/interfaces/default/history_table_modal.html

@@ -0,0 +1,69 @@
+% if data:
+<link rel="stylesheet" href="interfaces/default/css/dataTables.bootstrap.css">
+<link rel="stylesheet" href="interfaces/default/css/plexpy-dataTables.css">
+
+<div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
+            <h4 class="modal-title" id="myModalLabel">
+                <strong><span id="modal_header_ip_address">
+                    <i class="fa fa-history"></i> History for ${data}
+                </span></strong>
+            </h4>
+        </div>
+        <div class="modal-body" id="modal-text">
+            <table class="display" id="history_table" width="100%">
+                <thead>
+                <tr>
+                    <th align='left' id="started">Started</th>
+                    <th align='left' id="stopped">Stopped</th>
+                    <th align='left' id="friendly_name">User</th>
+                    <th align='left' id="platform">Platform</th>
+                    <th align='left' id="title">Title</th>
+                </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+        </div>
+        <div class="modal-footer"></div>
+    </div>
+</div>
+
+<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
+<script src="interfaces/default/js/dataTables.bootstrap.min.js"></script>
+<script src="interfaces/default/js/dataTables.bootstrap.pagination.js"></script>
+<script src="interfaces/default/js/tables/history_table_modal.js"></script>
+
+<script>
+    $(document).ready(function() {
+        history_table_modal_options.ajax = {
+            "url": "get_history",
+            type: "post",
+            data: function ( d ) {
+                return { 'json_data': JSON.stringify( d ),
+                         'start_date': '${data}'
+                       };
+            }
+        }
+
+        history_table = $('#history_table').DataTable(history_table_modal_options);
+    });
+</script>
+% else:
+<div class="modal-dialog" role="document">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
+            <h4 class="modal-title">
+                <strong><i class="fa fa-history"></i> History</strong>
+            </h4>
+        </div>
+        <div class="modal-body">
+            <h3>No data.</h3>
+        </div>
+        <div class="modal-footer"></div>
+    </div>
+</div>
+% endif

data/interfaces/default/js/graphs/plays_by_day.js

@@ -23,6 +23,18 @@ var hc_plays_by_day_options = {
     credits: {
         enabled: false
     },
+    plotOptions: {
+        series: {
+            cursor: 'pointer',
+            point: {
+                events: {
+                    click: function() {
+                        selectHandler(this.category);
+                    }
+                }
+            }
+        }
+    },
     colors: ['#F9AA03', '#FFFFFF'],
     xAxis: {
             type: 'datetime',

data/interfaces/default/js/tables/history_table_modal.js

@@ -0,0 +1,108 @@
+var date_format = 'YYYY-MM-DD';
+var time_format = 'hh:mm a';
+
+$.ajax({
+    url: 'get_date_formats',
+    type: 'GET',
+    success: function(data) {
+        date_format = data.date_format;
+        time_format = data.time_format;
+    }
+});
+
+history_table_modal_options = {
+    "destroy": true,
+    "language": {
+        "search": "Search: ",
+        "info":"Showing _START_ to _END_ of _TOTAL_ history items",
+        "infoEmpty":"Showing 0 to 0 of 0 entries",
+        "infoFiltered":"",
+        "emptyTable": "No data in table",
+    },
+    "pagingType": "bootstrap",
+    "stateSave": false,
+    "processing": false,
+    "serverSide": true,
+    "pageLength": 10,
+    "lengthChange": false,
+    "order": [ 0, 'desc'],
+    "columnDefs": [
+        {
+            "targets": [0],
+            "data":"started",
+            "createdCell": function (td, cellData, rowData, row, col) {
+                if (cellData === null) {
+                    $(td).html('Unknown');
+                } else {
+                    $(td).html(moment(cellData,"X").format(time_format));
+                }
+            },
+            "searchable": false,
+            "className": "no-wrap",
+            "width": "5%"
+        },
+        {
+            "targets": [1],
+            "data":"stopped",
+            "createdCell": function (td, cellData, rowData, row, col) {
+                if (cellData === null) {
+                    $(td).html('Unknown');
+                } else {
+                    $(td).html(moment(cellData,"X").format(time_format));
+                }
+            },
+            "searchable": false,
+            "className": "no-wrap",
+            "width": "5%"
+        },
+        {
+            "targets": [2],
+            "data":"friendly_name",
+            "createdCell": function (td, cellData, rowData, row, col) {
+                if (cellData !== '') {
+                    if (rowData['user_id']) {
+                        $(td).html('<a href="user?user_id=' + rowData['user_id'] + '">' + cellData + '</a>');
+                    } else {
+                        $(td).html('<a href="user?user=' + rowData['user'] + '">' + cellData + '</a>');
+                    }
+                } else {
+                    $(td).html(cellData);
+                }
+            },
+            "className": "no-wrap hidden-xs"
+        },
+        {
+            "targets": [3],
+            "data":"player",
+            "className": "modal-control no-wrap hidden-sm hidden-xs"
+        },
+        {
+            "targets": [4],
+            "data":"full_title",
+            "createdCell": function (td, cellData, rowData, row, col) {
+                if (cellData !== '') {
+                    if (rowData['media_type'] === 'movie' || rowData['media_type'] === 'episode') {
+                        var transcode_dec = '';
+                        if (rowData['video_decision'] === 'transcode') {
+                            transcode_dec = '<i class="fa fa-server"></i>&nbsp';
+                        }
+                        $(td).html('<div><div style="float: left;"><a href="info?source=history&item_id=' + rowData['id'] + '">' + cellData + '</a></div><div style="float: right; text-align: right; padding-right: 5px;">' + transcode_dec + '<i class="fa fa-video-camera"></i></div></div>');
+                    } else if (rowData['media_type'] === 'track') {
+                        $(td).html('<div><div style="float: left;">' + cellData + '</div><div style="float: right; text-align: right; padding-right: 5px;"><i class="fa fa-music"></i></div></div>');
+                    } else {
+                        $(td).html('<a href="info?item_id=' + rowData['id'] + '">' + cellData + '</a>');
+                    }
+                }
+            }
+        }
+    ],
+    "drawCallback": function (settings) {
+        // Jump to top of page
+        // $('html,body').scrollTop(0);
+        $('#ajaxMsg').fadeOut();
+    },
+    "preDrawCallback": function(settings) {
+        var msg = "<div class='msg'><i class='fa fa-refresh fa-spin'></i>&nbspFetching rows...</div>";
+        showMsg(msg, false, false, 0)
+    }
+}

plexpy/webserve.py

@@ -524,6 +524,9 @@ class WebInterface(object):
         if 'grandparent_rating_key' in kwargs:
             rating_key = kwargs.get('grandparent_rating_key', "")
             custom_where = [['grandparent_rating_key', rating_key]]
+        if 'start_date' in kwargs:
+            start_date = kwargs.get('start_date', "")
+            custom_where = [['strftime("%Y-%m-%d", datetime(date, "unixepoch", "localtime"))', start_date]]
 
         data_factory = datafactory.DataFactory()
         history = data_factory.get_history(kwargs=kwargs, custom_where=custom_where)
@@ -531,6 +534,11 @@ class WebInterface(object):
         cherrypy.response.headers['Content-type'] = 'application/json'
         return json.dumps(history)
 
+    @cherrypy.expose
+    def history_table_modal(self, start_date=None, **kwargs):
+
+        return serve_template(templatename="history_table_modal.html", title="History Data", data=start_date)
+
     @cherrypy.expose
     def shutdown(self):
         return self.do_state_change('shutdown', 'Shutting Down', 15)