How to create and publish a Waterfall Chart custom widget?
Follow the below steps to publish the Waterfall Chart custom widget into the Bold BI application and use it.
- Download the Waterfall Chart custom widget.
- Publish the custom widget to the Bold BI application by following the steps mentioned in the help link.
- Once you publish the custom widget, the Waterfall Chart custom widget will appear under the Miscellaneous section of the designer panel as in the following image.
- Drag and drop the widget and configure the data. The Waterfall Chart custom widget will render as in the following image.
Improvement in the Waterfall Chart Custom Widget
To debug and make changes in the custom widget,
follow these steps:
· Unpack the Waterfall Chart custom widget (Waterfall.bicw) by following the steps in the mentioned link.
· Add the debugger to the sourcefile.js file's init() method. Also, add the needed changes in the sourcefile.js file.
· Publish the custom widget by following the steps in this link.
· Now, open the new dashboard in the Bold BI designer.
· Open the Developer Tools in the Browser.
· Drag and drop the Waterfall Chart Custom Widget in the Designer.
· Now, the debugger will trigger.
Also, the Waterfall Chart Custom Widget is developed using the EJ2 Waterfall Chart Syncfusion component. For any new options, check the available API in the UG link.
Methods and use cases in the Waterfall Chart source file.
The following table explains the use case of some main methods available in sourcefile.js.
|
Methods |
Use Case |
|
Init() |
This method will trigger when the Waterfall chart custom widget is dragged and dropped in the designer or initialized in the viewer. |
|
getSeries() |
Get the series for the Waterfall chart based on the data configured to this widget. |
|
getData() |
Get the data for the Waterfall chart based on the data configured to this widget. |
|
Update() |
This method will trigger when the widget is resized, data is configured in the widget, and when the changes are made in the property panel. Based on the respective changes the Waterfall chart object can be updated. |
Related Links:
How to create a new custom widget
