How to create ChartJS scatter chart as a custom widget?

Published:

Follow these steps to publish the Scatter chart custom widget into the Bold BI application and make use of it.

Note: Scatter chart is developed using third-party control ChartJS. To download and use the custom widget you need to agree with the license.

Step 1: Download the Scatter Chart custom widget.

Step 2: Publish the custom widget to the Bold BI application with a help link.

Step 3: Once you publish the custom widget, the Scatter Chart custom widget will appear under the Miscellaneous section of the designer panel, as in the following image.

Step 4: Drag and drop the widget and configure the data. The Scatter Chart custom widget will render as in the following image.

Custom widget Rendered Image

Making Improvements in the Scatter Chart custom widget

Add new improvements to the UI of the Scatter Chart Custom widget by making changes to the sourcefile.js file.

To debug and make changes to the custom widget, follow these steps:

1. Unpack the Scatter Chart custom widget (ScatterChart.bicw) by following the steps in the mentioned link.

2. Add the debugger to the sourcefile.js file's init() method. Also, add the needed changes in the sourcefile.js file.

3. Publish the custom widget by following the steps in this link.

4. Now, open the new dashboard in the Bold BI designer.

5. Open the Developer Tools in the Browser.

6. Drag and drop the Sankey Chart Custom Widget in the Designer.

7. Now, the debugger will trigger.

· How to create a new custom widget

ScatterChart.bicw

Chartjs_scatter_chart_data.xlsx

Was this article useful?

Dislike

Written by Sathish Kanniyappan

Updated

Comments (0)