Since 4.3
A gage-based compact widget to compare a value against the target and qualitative ranges.
The Bullet Graph widget serves for rich displaying of data in a relatively small area. It is based on the Gage API and allows configuring its own features, such as the bar and bands (ranges) colors, the speed of animation, the position of the target value, the layout orientation, the label height or width, etc.
Check Bullet Graph documentation for more details.
var bullet = webix.ui({
view:"bullet",
id:"b1",
minRange:0,
maxRange:120,
value:40,
label:"2015 YTD",
placeholder:"expected #value#",
marker:70
});
| adjust | adjusts the component to the size of the parent HTML container |
| bind | binds components |
| define | redefines a single configuration property (or a object with properties) |
| destructor | destructs the calling object |
| disable | disables the calling view (makes it dimmed and unclickable) |
| enable | enables the calling view that was disabled by the 'disable' method |
| getChildViews | returns child views of the calling component |
| getFormView | returns master form for the input |
| getNode | returns the main HTML container for the calling object |
| getParentView | returns the parent view of the component |
| getTopParentView | returns the top parent view |
| getValue | returns the value of a bullet graph |
| hide | hides the view |
| isEnabled | checks whether the view is enabled |
| isVisible | checks whether the view is visible |
| queryView | returns inner element/elements of a widget that correspond(s) to the defined parameters |
| refresh | repaints the widgets after changes in the configuration |
| resize | adjusts the view to a new size |
| setValue | sets a value for the bullet graph |
| show | makes the component visible |
| unbind | breaks "bind" link |
| onAfterScroll | occurs when some webix view has been scrolled |
| onBindRequest | fires when the component is ready to receive data from the master component |
| onBlur | fires when focus is moved out of the view |
| onDestruct | occurs when component destroyed |
| onEnter | fires when the Enter key has been pressed |
| onFocus | fires when a view gets focus |
| onKeyPress | occurs when keyboard key is pressed for the control in focus |
| onLongTouch | fires on holding finger in some position for a certain period of time |
| onSwipeX | occurs on a horizontal swipe movement |
| onSwipeY | occurs on a vertical swipe movement |
| onTimedKeyPress | fires after typing has been finished in the field |
| onTouchEnd | occurs when the touch event is ended |
| onTouchMove | occurs during touch movement |
| onTouchStart | fires when some webix view has been touched |
| onViewResize | fires when the size of a view has been changed by resizer |
| onViewShow | fires when any hidden view is shown |
| animate | defines the type of animation, with which the view is shown, if it is a Multiview cell |
| bands | sets an array of custom bands' (ranges of performance) values and colors for Bullet Graph |
| barWidth | specifies the width of the bar that displays the value to compare with |
| borderless | used to hide the component borders |
| color | sets the color of the bar that shows the value |
| container | an HTML container (or its ID) where the component should be initialized |
| css | the name of the CSS class or the object with styles that will be applied to the view container |
| disabled | indicates whether an item is enabled |
| flowTime | defines the animation speed in milliseconds |
| gravity | sets the view gravity |
| height | sets the height of the component |
| hidden | defines whether the view will be hidden initially |
| id | the ID of a widget |
| keyPressTimeout | a delay between the key press and the action |
| label | the text label of Bullet Graph |
| labelHeight | sets the height of the label for the vertical layout |
| labelWidth | sets the width of the label for the horizontal layout |
| layout | sets the layout type of the Bullet Graph |
| marker | defines the position of the marker of the target value |
| markerColor | defines the color of the marker |
| maxHeight | sets the maximum height for the view |
| maxRange | sets the maximum range value of the Bullet Graph scale |
| maxWidth | sets the maximum width for the view |
| minBarHeight | sets the minimal height of the bar in pixels |
| minHeight | sets the minimal height for the view |
| minRange | sets the minimum range value of the Bullet Graph scale |
| minWidth | sets the minimal width for the view |
| origin | sets the scale origin |
| placeholder | sets an additional description for the label of the widget |
| scale | defines the scale configuration of Bullet Graph |
| smoothFlow | enables smooth animation in Bullet Graph |
| stroke | defines the width of the Bullet Graph bar |
| tickSize | sets the length of the ticks on the scale of the Bullet graph |
| value | sets the initial value to be displayed in Bullet Graph |
| width | sets the width of a widget |
| $getSize | returns the current size of the component |
| $height | the current height of the view |
| $scope | scope for resolving event and method names |
| $setNode | defines HTML element for the component |
| $setSize | sets the component size |
| $skin | the method which will be called when skin is defined |
| $view | reference to the top HTML element of the view |
| $width | the current width of the view |
| config | all options from the initial component configuration |
| name | indicates the name of the component (a read-only property) |