jQuery multi-status bar plugin @ GitHub

jQuery multi-status bar plugin

The ideal bar to monitor the status of multiple objects.

# Comment Source code Result
1 Default multi-status bar. 
$("#bar1").multistatusbar();
2 Customized values, names and colors.
 
Legend appears when you mouse over. 
$("#bar2").multistatusbar({
  payload: {"NEW": 2, "IN PROGRESS": 5, "FINISHED": 10},
  colors: ["#D5E5FF", "#FFFF84", "#00CC33"]
});
3 Customized values, names, colors and size.
 
Legend appears when you mouse over. 
$("#bar3").multistatusbar({
  width: 300,
  payload: {"NEW":2,"PREPROCESSING":1,"PREPROCESSED":1,"SUBMITTING":2,"SUBMITTED":1,"RUNNING":7,"COMPLETED":7,"FAILED":1,"CANCELLED":1},
  colors: [ "#D5E5FF", "#80B3FF", "#2A7FFF", "#44B4D5", "#03EBA6", "#FFFF84", "#00CC33", "#FF4E00", "#979797" ]
});
4 Categories containing 'zeros', e.g. 'NEW', are not shown.
 
Legend appears when you mouse over. 
$("#bar4").multistatusbar({
  payload: {"NEW": 0, "IN PROGRESS": 5, "FINISHED": 10},
  colors: ["#D5E5FF", "#FFFF84", "#00CC33"]
});
5 Customized values, names and colors, with legend disabled.
 
Legend does NOT appear when you mouse over. 
$("#bar5").multistatusbar({
  payload: {"NEW": 2, "IN PROGRESS": 5, "FINISHED": 10},
  colors: ["#D5E5FF", "#FFFF84", "#00CC33"],
  showLegend: false
});
6 Customized values, names and colors, with values NOT SHOWN in the bar.
 
Legend appears when you mouse over. 
$("#bar6").multistatusbar({
  payload: {"NEW": 2, "IN PROGRESS": 5, "FINISHED": 10},
  colors: ["#D5E5FF", "#FFFF84", "#00CC33"],
  showValuesInBar: false
});
7 Customized values, names and colors, with values SHOWN in the legend.
 
Legend appears when you mouse over. 
$("#bar7").multistatusbar({
  payload: {"NEW": 2, "IN PROGRESS": 5, "FINISHED": 10},
  colors: ["#D5E5FF", "#FFFF84", "#00CC33"],
  showValuesInLegend: true
});
8 Customized values, names, colors, with URLs in the bar.
 
Clicking on the bar opens the corresponding URL (e.g. for NEW and FINISHED only). 
$("#bar8").multistatusbar({
  payload: {"NEW": 2, "IN PROGRESS": 5, "FINISHED": 10},
  urls: {"NEW": "http://jquery.com", "FINISHED": "http://pivotal.github.com/jasmine"},
  colors: ["#D5E5FF", "#FFFF84", "#00CC33"]
});
9 Empty initial values with customized names and colors.
 
Automated refresh configured by providing web service URL and refresh frequency. 
$("#bar9").multistatusbar({
  colors: ["#D5E5FF", "#FFFF84", "#00CC33"],
  refreshUrl: "http://jquery-multi-status-bar.herokuapp.com/",
  refreshFrequencyInMillis: 1000
});