Since 3.2
A component that allows presenting data of data components in a detailed way.
RangeChart inherits from Chart and gives the possibility to display in detail some data of a data component limited by frame. This component is useful for controlling and visualizing data of other data components.
Check RangeChart documentation for more details.
var rangechart = webix.ui({
view:"rangechart",
height: 80,
id:"range",
type:"line",
value:"#sales#",
frameId:"time",
item: { radius :0 },
range:{ start:30, end:50 },
data: data
});
| add | adds an item to the store |
| addSeries | adds an additional graph to the chart |
| adjust | adjusts the component to the size of the parent HTML container |
| attachEvent | attaches the handler to an inner event of the component |
| bind | binds components |
| blockEvent | temporarily blocks triggering of ALL events of the calling object |
| callEvent | calls an inner event |
| clearAll | removes all items from the component |
| clearCanvas | clears the component canvas |
| count | returns the number of currently visible items |
| define | redefines a single configuration property (or a object with properties) |
| destructor | destructs the calling object |
| detachEvent | detaches a handler from an event (which was attached before by the attachEvent method) |
| disable | disables the calling view (makes it dimmed and unclickable) |
| enable | enables the calling view that was disabled by the 'disable' method |
| exists | checks whether an item with the specified ID exists |
| filter | filters the component |
| find | returns all rows that match the criterion, or only the first one |
| getChildViews | returns child views of the calling component |
| getFirstId | returns the ID of the first item |
| getFormView | returns master form for the input |
| getFrameData | returns an array of objects that are included into the range |
| getFrameRange | returns the object of the data range selected in the frame |
| getIdByIndex | returns the ID of the item with the specified index |
| getIndexById | returns the index of the item with the specified ID |
| getItem | gets the object of the data item with the specified ID |
| getLastId | returns the ID of the last item |
| getNextId | returns the ID of an item that is after the specified item, either directly after or after a number of items (defined by the step) |
| getNode | returns the main HTML container for the calling object |
| getParentView | returns the parent view of the component |
| getPrevId | returns the ID of an item that is before the specified item, either directly before or before a number of items (defined by the step) |
| getTopParentView | returns the top parent view |
| group | groups data by the specified data property |
| hasEvent | checks whether the component has the specified event handler |
| hide | hides the view |
| hideSeries | hides the chosen graph in the chart with several graphs |
| isEnabled | checks whether the view is enabled |
| isVisible | checks whether the view is visible |
| load | loads data from an external data source |
| loadNext | sends a request to load the specified number of records to the end of the client-side dataset or to the specified position |
| locate | gets the id of an item from the specified HTML event |
| mapEvent | routes events from one object to another |
| parse | loads data to the component from an inline data source |
| queryView | returns inner element/elements of a widget that correspond(s) to the defined parameters |
| refresh | repaints the whole view or a certain item |
| remove | removes the specified item/items from datastore |
| removeAllSeries | removes all series from the chart |
| render | renders the specified item or the whole component |
| resize | adjusts the view to a new size |
| serialize | serializes data to an array of JSON objects |
| setFrameRange | sets the data range for the frame |
| show | makes the component visible |
| showSeries | shows the hidden graph in the chart |
| sort | sorts datastore |
| sync | allows syncing two copies of data (all or just a part of it) from one DataCollection to another |
| unbind | breaks "bind" link |
| unblockEvent | cancels events blocking that was enabled by the 'blockEvent' command |
| ungroup | ungroups data |
| updateItem | updates the data item with new properties |
| waitSave | allows to catch the moment when a data operation was saved to the server |
| onAfterAdd | fires after adding an item to the datastore |
| onAfterContextMenu | fires after the context menu was called in the item area |
| onAfterDelete | fires after an item is removed |
| onAfterLoad | fires after data loading is complete |
| onAfterRangeChange | fires after the frame range is changed |
| onAfterRender | called after the rendering of calendar is complete. |
| onAfterScroll | occurs when some webix view has been scrolled |
| onAfterSort | fires after sorting dataset |
| onBeforeAdd | fires before adding an item to the datastore |
| onBeforeContextMenu | fires before the context menu is called in the item area |
| onBeforeDelete | fires before an item is removed |
| onBeforeLoad | fires immediately before data loading has started |
| onBeforeRender | fires immediately before the component has been rendered |
| onBeforeSort | fires before sorting of the dataset |
| onBindRequest | fires when the component is ready to receive data from the master component |
| onBlur | fires when focus is moved out of the view |
| onDataRequest | fires when data from the server is requested for linear data structures (List, DataTable, DataView etc.) to implement dynamic data loading |
| onDataUpdate | fires when a data item is being updated |
| onDestruct | occurs when component destroyed |
| onEnter | fires when the Enter key has been pressed |
| onFocus | fires when a view gets focus |
| onItemClick | fires when a component item was clicked |
| onItemDblClick | fires when a component item was double-clicked |
| onItemSingleClick | allows distinguishing between single and double-click events |
| onKeyPress | occurs when keyboard key is pressed for the control in focus |
| onLegendClick | fires after a click on a legend item |
| onLoadError | fires when an error occurs during data loading (invalid server side response) |
| onLongTouch | fires on holding finger in some position for a certain period of time |
| onMouseMove | fires when the mouse was moved over the specified component |
| onMouseMoving | fires when the mouse was moved over the component |
| onMouseOut | fires when the mouse was moved out from the specified item |
| onSwipeX | occurs on a horizontal swipe movement |
| onSwipeY | occurs on a vertical swipe movement |
| onTabFocus | fires after a tab focus has been changed |
| 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 |
| alpha | defines the opacity of chart items |
| animate | defines the type of animation, with which the view is shown, if it is a Multiview cell |
| ariaLabel | sets a screen readable label for Chart |
| barOffset | sets the distance between between bars if bars are too wide |
| barWidth | the width of bars |
| border | enables/disables the bar borders |
| borderColor | sets the border color of each item in the graph |
| borderWidth | defines the width of the border |
| borderless | used to hide the component borders |
| cant | defines the slope angle of a 3D pie |
| color | defines items colors |
| 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 |
| data | JavaScript array containing data for the component |
| datathrottle | sets the polling interval (the time period between the completion of a network request and the next request for data) |
| datatype | the type of loaded data |
| disableLines | disables graph lines with radar chart |
| disabled | indicates whether an item is enabled |
| donutInnerText | defines text inside the donut hole |
| eventRadius | sets the radius (in pixels) of the virtual circle within which the mouse events will fire for chart items |
| fill | fills the chart area with the specified background color. |
| fixOverflow | chart max limit mode |
| frameId | points to the property in data that will be used for the frame |
| gradient | specifies the chart gradient |
| 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 |
| item | defines markers that present chart's data items |
| keyPressTimeout | a delay between the key press and the action |
| label | sets the template for items' labels |
| labelOffset | the offset of sector labels from the pie frame |
| legend | defines the chart legend |
| line | defines chart lines |
| lineColor | sets the color for strips dividing the pie sectors |
| maxHeight | sets the maximum height for the view |
| maxWidth | sets the maximum width for the view |
| minHeight | sets the minimal height for the view |
| minWidth | sets the minimal width for the view |
| mouseEventDelay | the delay between a real mouse action and invoking the related events |
| offset | defines whether the first item of the scale will be drawn with the offset equal to the half of the scale's step (relative to the origin of the chart) or not. |
| on | allows attaching custom handlers to inner events of the component |
| onClick | attaches a click handler for component parts with the specified CSS class |
| onContext | a property used to define custom context-click (right click) handlers for elements in the DataTable cells |
| onDblClick | attaches a dblclick behavior for component items with the specified CSS class. |
| onMouseMove | attaches a mousemove behavior for component items with the specified CSS class. |
| origin | sets the scale origin |
| padding | sets paddings of the chart content |
| pieInnerText | sets the template for the pie inner labels |
| preset | applies the predefined chart configuration object with the specified name |
| radius | the radius of the bar's rounding |
| range | data range that should be selected in the frame |
| ready | the event handler is called just after the component has been completely initialized |
| removeMissed | defines how to treat items in case of reloading |
| save | defines URLs for data saving |
| scale | type of chart scale, logarithic or plain |
| scheme | defines schemes for data processing |
| series | defines graphs presented on the chart |
| shadow | enables/disables the pie shadow |
| tooltip | sets a popup message next to the item when the cursor points to it |
| type | sets the chart type |
| url | the URL which the component will use to load data after its initialization |
| value | defines values for the vertical axis |
| width | sets the width of a widget |
| x | the horizontal position of the pie center |
| xAxis | defines the horizontal axis |
| xValue | a property of the dataset that defines values for the horizontal axis |
| y | the vertical position of the pie center |
| yAxis | defines the vertical axis |
| yValue | a property of the dataset that defines values for the vertical axis. |
| $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 |
| $tooltipIn | shows a tooltip |
| $tooltipMove | defines the tooltip while the cursor moves over a view or an HTML area |
| $tooltipOut | defines the behavior of a tooltip when the cursor is out of the target widget or HTML area |
| $view | reference to the top HTML element of the view |
| $width | the current width of the view |
| colormap | collection of coloring strategies |
| config | all options from the initial component configuration |
| data | inner DataStore |
| name | indicates the name of the component (a read-only property) |
| on_click | redefines default click behavior for component items. |
| on_context | a property used to define custom context-click (right click) handlers for elements in widgets |
| on_dblclick | attaches a dblclick behavior for component items with the specified CSS class |
| on_mouse_move | attaches a mouse move behavior for component items with the specified CSS class |
| presets | collection of styling presets |
| waitData | eventual result of an asynchronous operation ('promise' object) for the loaded data |