1.4-Arcade-Website/dist/js/pages/songinstance.js

 $(function () {

 /* Morris.js Charts */
  // Games Played Chart
  var gamesplayed = new Morris.Line({
    element: 'games-played-chart',
    resize: true,
    data: most_played_data,
    xkey: 'y',
    ykeys: ['gp'],
    labels: ['Games Played'],
    xLabels: 'week',
    lineColors: ['#efefef'],
    smooth: false,
    lineWidth: 3,
    hideHover: 'auto',
    gridTextColor: "#fff",
    gridStrokeWidth: 0.4,
    pointSize: 4,
    pointStrokeColors: ["#efefef"],
    gridLineColor: "#efefef",
    gridTextFamily: "Open Sans",
    gridTextSize: 10
  });

  var average = new Morris.Bar({
    element: 'average-play-time-chart',
    resize: true,
    data: average_play_time_data,
    barColors: ['#efefef'],
    xkey: 'y',
    ykeys: ['pt'],
    labels: ['Average Play Time'],
    hideHover: 'auto',
    gridTextColor: "#fff",
    gridStrokeWidth: 0.4,
    pointSize: 4,
    pointStrokeColors: ["#efefef"],
    gridLineColor: "#efefef",
    gridTextFamily: "Open Sans",
    gridTextSize: 10
  });

var scores = new Morris.Bar({
    element: 'scores-chart',
    resize: true,
    data: scores_data,
    barColors: ['#efefef'],
    xkey: 'y',
    ykeys: ['sc'],
    labels: ['Score'],
    hideHover: 'auto',
    hoverCallback: function(index, options, content){
        return(content + "\n" + scores_names_data[index]);
    },
    gridTextColor: "#fff",
    gridStrokeWidth: 0.4,
    pointSize: 4,
    pointStrokeColors: ["#efefef"],
    gridLineColor: "#efefef",
    gridTextFamily: "Open Sans",
    gridTextSize: 10
  });

$('#games-played-table').dataTable({
          "bAutoWidth": true,
          "lengthMenu": [[ 10, 25, 50, 75, -1], [10, 25, 50, 75, "All"]],
          "pageLength": 10,
          "order": [ 6, 'desc' ]
        });

$('#scores-table').dataTable({
          "bAutoWidth": true,
          "lengthMenu": [[ 10, 25, 50, 75, -1], [10, 25, 50, 75, "All"]],
          "pageLength": 9,
          "order": [ 3, 'desc' ]
        });

});