I want to represent time-related events graphically (bars/chars/graphs, etc).

I have a log in the administration panel, the data is login times for admins, so each admin has online-offline timestamps. Here is a sample :

admin_id    in_timestamp    out_timestamp
   1           XXXXXX         XXXXXXXX
   1           ZZZZZZ         ZZZZZZZZ

I want to show (per administrator) an easy to read graphical representation of panel usage during the day. Which graph should I use to convey this information most accurately and concisely? I am currently using amcharts.

migrated from programmers.stackexchange.com Apr 23 '15 at 14:03

This question came from our site for professionals, academics, and students working within the systems development life cycle.

  • You are probably looking for some kind of "calendar" control and not a chart. – Euphoric Apr 23 '15 at 13:57
  • 4
    It's not just about displaying the information, it's about reading the information. It's important to know what you want people to be able to easily determine from the graphic. For example, comparing admins with each other; compare total against a baseline; see overtime; validate core hours; spot slackers; transfer data to timesheets... There could be any number of use cases for which different display characteristics or highlighting of different parts of the data may be useful. Without knowing this, there's no telling what the most suitable method might be. – Roger Attrill Apr 23 '15 at 14:12
  • @Euphoric ... i want to display the information of only one day. no need for calendar i guess here – Ronan Dejhero Apr 23 '15 at 18:34
  • @RogerAttrill a simple representation of what times an admin was online... can be done by text " admin X loged in from 1:pm till 1:55PM then from 2PM til 2:15PM then ...." but this is not neat – Ronan Dejhero Apr 23 '15 at 18:35
  • can you provide the approximate dimensions and density of the data? are there 1, 10, 100, or 1000 admins? does the typical admin log in 1, 10, or 100 times a day? when 3 admins log on at the same time, do you want to show the 3 separate admin sessions, or aggregate them into a total for that time slot (e.g. heatmap)? – tohster Apr 23 '15 at 20:25

One option to show when a single user is logged in via AMcharts is their Step line chart.

I am thinking of two states for the y axis logged in and logged out. And the X axis represents time (you could only show time when the events occur along with some references). See the following mock up

single user design

The following is a similar design for multiple users (ie look for a full horizontal line across the logged IN area to make sure an admin is on at any given time, if your concerned with an admin always being present for some reason). See mock up below

enter image description here

You could also put a key for the users and color at the top but i like to put it on their different lines in the event that a user is color blind (see later section for that).And I am a fan of putting the log out times at the top and putting the log in times at the bottom.

A third iteration can emphasize key business hours with some light opacity shading of the background with this design. enter image description here

A risk is for color blind people not being able to tell the difference in shades which you could mitigate with different line patterns. These mockups were influenced by google finance as seen below

google finance

Heres a slightly improved text only version

 admin_id    in_timestamp    out_timestamp    Time_logged_IN
       1           9:00AM        5:00PM             8 hours
       1           8:00PM        8:04PM              4 Minutes

Showing the time_logged_in allows you to do less mental processing The book Don't Make me Think comes to mind. However it is not much better when there is a ton of data or someone who logs in and out often like this

 admin_id    in_timestamp    out_timestamp    Time_logged_IN
       1           9:00AM        9:45AM             45 Minutes
       1           9:57AM        10:56AM            59 Minutes
       1           11:00AM        12:00PM           1 hour
       1           1:00PM        1:04PM              4 Minutes
       1           1:10PM        2:00PM             50 Minutes
       1           2:05PM        2:06PM              1 Minute
       1           2:10PM        5:00PM          2 hours 50 Minutes
       1           8:00PM        8:04PM              4 Minutes

That is much harder to glance at and have an understanding of what that user did. You could add multiple users by putting two tables side by side with set boxes or rows representing chunks of the day but I prefer the graphical approach.

In summation this probably is something you would have to write yourself with a library like d3. I am not sure if you could fully implement this just with AM charts.

  • Very good and useful, i want to check if anyone comes with another solution before accepting this one – Ronan Dejhero Apr 25 '15 at 10:09
  • That's a good idea this doesn't have many views yet the weekend may change that. This definitely isn't an easy problem to solve. – Frank Visaggio Apr 25 '15 at 12:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.