6

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?

Improve this question
7
  • 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, 2012 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, 2012 at 7:44
  • It sounds like a simple manhattan (vertical bar) graph would work here.
    – JohnGB ♦
    Dec 28, 2012 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, 2012 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, 2012 at 8:20

2 Answers 2

Reset to default
8

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

enter image description here

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

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

Improve this answer
2
  • 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, 2013 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, 2013 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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