JS/HTML framework for data filtering and analytics

I'm looking for a HTML/JS framework to filter and visualize statistics from a JSON data set.

Here's an example of the data I can provide to the framework:

[
  {
    "game":"Game 1",
    "date":"2018-01-23T18:25:43.511Z",
    "votes":[
      {
        "player":"Player 1",
        "vote":1
      },
      {
        "player":"Player 1",
        "vote":2
      },
      {
        "player":"Player 1",
        "vote":3
      },
      {
        "player":"Player 2",
        "vote":1
      },
      {
        "player":"Player 2",
        "vote":3
      },
      {
        "player":"Player 2",
        "vote":4
      },
      {
        "player":"Player 3",
        "vote":2
      }
    ]
  },
  {
    "game":"Game 2",
    "date":"2018-04-23T20:30:43.511Z",
    "votes":[
      {
        "player":"Player 1",
        "vote":4
      },
      {
        "player":"Player 1",
        "vote":3
      },
      {
        "player":"Player 1",
        "vote":2
      },
      {
        "player":"Player 2",
        "vote":5
      },
      {
        "player":"Player 3",
        "vote":3
      },
      {
        "player":"Player 3",
        "vote":4
      },
      {
        "player":"Player 4",
        "vote":5
      }
    ]
  }
]

This data shows the results of a user voting for "players" with a voting (1-5) for multiple games.

Now I'd like to provide a filter where the user can choose between one/all game, time range and specific/all players. Furthermore I'd like to show the "votes" as average values based on the selected filters.

Providing charts would be nice but it's also OK to provide the results in a table.

Now my question is if there is already an existing JS/HTML framework which can provide these features or do I have to develop everything on my own.

1 answer

  • answered 2018-10-11 19:55 SpeedOfRound

    There are many libraries that can give you a table given that kind of data.

    Something like JQuery Datatables can take json data and generate a table. You would have to do a little work to do the filtering and calculated values though

    $(document).ready(function() {
        $('#example').DataTable( {
            "ajax": (address or text file)
        } );
    } );