Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

We are building a network monitoring tool and we need to show a graph which shows the Active/Inactive state of the machines.

Like for example, during a period of 24 hours, during which periods the machine was down. The series values would be either ACTIVE or DEAD. And this series is laid over a time axis of 24 hours.

Can anyone suggest the graph which will help depict this scenario?

share|improve this question
    
Do you want to show them all at once? Show an overview of 10,000 machines? What level of resolution is needed? These all affect how you would likely display them. –  JohnGB Dec 28 '12 at 7:25
    
No. For each individual machine. For consolidated, we are planning to show the count of the machines which are active and inactive. So, I think a simple bar graph would suffice. –  divinedragon Dec 28 '12 at 7:44
    
It sounds like a simple manhattan (vertical bar) graph would work here. –  JohnGB Dec 28 '12 at 7:55
    
I guess vertical bar graph should be good for consolidated count graph. I am asking for Active/Inactive graph over the period of 24 hours for a specific machine. The series values would be either ACTIVE or DEAD. And this series is laid over a time axis of 24 hours. –  divinedragon Dec 28 '12 at 8:08
    
If you only have 2 states, then just represent one of them and show the graph from 0 - 100%. The other state is clear from that one. –  JohnGB Dec 28 '12 at 8:20
show 2 more comments

2 Answers 2

up vote 6 down vote accepted

Don't use bar graph if the value is boolean, use colors on a timeline.

enter image description here

share|improve this answer
    
This looks pretty interesting. Great work there. Thanks. –  divinedragon Dec 28 '12 at 8:40
1  
Any graph API which can generate the above graph? Which one did you use to create it? –  divinedragon Dec 28 '12 at 14:48
    
It's handmade using Adobe Illustrator. –  Andy Dec 28 '12 at 21:27
    
@divinedragon check out my answer for automation using Google Graph API –  slawrence10 Dec 29 '12 at 17:02
add comment

Based on @Andy's graphic for the graph you could then use Google Graph API to create a less pretty, but automated version of this:

Graph using Google Graph API

This was created using the following code:

function drawVisualization() {
  // Create and populate the data table.
 var data = google.visualization.arrayToDataTable([
        ['Status', 'On', 'Off'],
        ['12am',  1,   0],
        ['1am',  1,   0],
        ['2am',  1,   0],
        ['3am',  0,   1],
        ['4am',  1,   0],
        ['5am',  1,   0],
        ['6am',  1,   0],
        ['7am',  1,   0],
        ['8am',  1,   0],
        ['9am',  1,   0],
        ['10am',  1,   0],
        ['11am',  1,   0],
        ['12pm',  1,   0],
        ['13pm',  1,   0],
        ['14pm',  1,   0],
        ['15pm',  1,   0],
        ['16pm',  1,   0],
        ['17pm',  1,   0],
        ['6pm',  1,   0],
        ['19pm',  1,   0],
        ['20pm',  1,   0],
        ['21pm',  1,   0],
        ['22pm',  1,   0],
        ['23pm',  1,   0],
        ['12am',  1,   0],
      ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
     draw(data,
               { width:600, height:100, 
                 chartArea: {height:20},
               colors: ['#8ac244','#db1b1c'],
                hAxis: {allowContainerBoundaryTextCufoff:true, showTextEvery:6},
                vAxis: {gridlines:{count:0}},
                bar: {groupWidth:16},
                isStacked:true
               }
          );
}

​ And you can test the code here: https://code.google.com/apis/ajax/playground/?type=visualization#column_chart

share|improve this answer
    
Thanks. This is really helpful. –  divinedragon Dec 31 '12 at 3:28
    
This answer, while potentially useful, isn't really a separate answer, it's an implementation guide for Andys answer. UX is technology-agnostic, so answers including implementation instructions and code are best left to other StackExchange sites. We'll leave this here for now because it has been well-received but this shouldn't be a standard method of answering questions on this site . (We don't want to get bogged-down with code implementation here, and each answer should be a different and separate response to the question, not just commentary on others). –  JonW Jan 4 '13 at 8:41
    
Hey @JonW yes is was only because the author commented on the answer asking "Any graph API which can generate the above graph?" –  slawrence10 Jan 4 '13 at 13:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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