I'm trying to find the best way to represent different states on a graph. This graph is trending information, it can have several trends at once. Numeric data is fine as I'm using line graphs. But I don't know the best way to represent different states (like "ON", "OFF", "IDLE" for example).

I was wondering if anyone ran across this or has an idea. I want it to look appealing of course and wasn't sure if bar graphs would be the best choice.

btw, the states can be more than 3, they are user defined and can between 2 and 6.

  • Is this referring to the state of a particular piece of data or the graph as a whole?
    – JeffH
    Aug 16 '12 at 23:45
  • no to a piece of data, plotted over time. For example at 1pm its "ON" on 3pm its "OFF". Data is captured at the same frequency as numerical data.
    – mgalal
    Aug 17 '12 at 2:27
  • Are the different states on a linear scale (eg levels of 'on-ness', as per your off -> idle -> on example), or could they be heterogeneous (eg not on a scale at all)? Aug 17 '12 at 15:55
  • That would just depend on how to represent the states, I don't have a preference of whether its mapped to the line chart scale or if its on its own scale (y-axis). X-axis is time and that is the same for all.
    – mgalal
    Aug 17 '12 at 18:42

The simplest way to combine data is to make colour coding of every piece of data (or code every value with it's own shape -- that is better for color-blind users -- for instance, filled circle for on, empty circle for off, square for idle etc.). If the amount of user defined states is between 2 to 6 it will work rather good (naturally, the legend and the popup hint with state description is necessary).

Bars are not very good cause it make the picture fuzzy, so it's better to use something like this (for color coded values):

enter image description here

If you want to display more than one graph at one picture, it is better to use shapes for states, and colour of the shape for every element. I'm not sure in your case, but interconnections between shapes by lines may be unnecessary. You may also provide an easy way to concetrate on only one chart -- for example, the user can hover over one trend line by mouse and other trends become dimmed by contrast.

  • Thanks for that! I didn't think of using shapes to represent data.
    – mgalal
    Aug 19 '12 at 20:52

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.