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 }); |