How do I build custom widgets?

Published:

Custom Widget:

Custom widgets are an effective solution in cases where the available pre-made selection of visual components does not fulfill specific needs. They empower users to design their own widgets by utilizing any necessary libraries or dependencies. Here I create the Custom widget using lollipop chart.

Sample code snippet for D3.js Lollipop Chart using HTML and JavaScript as shown below:

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 90, left: 40},
  width = 460 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g").attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");
var data = [
  { Country: "Russia", Value: 2000 },
  { Country: "US", Value: 5000 },
  { Country: "India", Value: 8000 },
  // Add more data points as needed
];
// X axis
var x = d3.scaleBand().range([ 0, width ])
.domain(data.map(function(d) { return d.Country; }))
.padding(1);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)).selectAll("text")
  .attr("transform", "translate(-10,0)rotate(-45)")
  .style("text-anchor", "end");

// Add Y axis
var y = d3.scaleLinear().domain([0, 13000])
.range([ height, 0]);
svg.append("g")
.call(d3.axisLeft(y));

// Lines
svg.selectAll("myline").data(data)
.enter()
.append("line")
  .attr("x1", function(d) { return x(d.Country); })
  .attr("x2", function(d) { return x(d.Country); })
  .attr("y1", function(d) { return y(d.Value); })
  .attr("y2", y(0))
  .attr("stroke", "grey")

// Circles
svg.selectAll("mycircle")
.data(data)
.enter()
.append("circle")
  .attr("cx", function(d) { return x(d.Country); })
  .attr("cy", function(d) { return y(d.Value); })
  .attr("r", "4")
  .style("fill", "#69b3a2")
  .attr("stroke", "black")
</script>

Some of the steps that can be understood from the above sample to create a lollipop chart

Creating a container for chart rendering
Defines the data array to create the visualization.
Creates scales for the x-axis (using d3.scaleBand()) and the y-axis (using d3.scaleLinear()).
Draws the lollipops (line segments connecting data points to the y-axis) and circles (data points) using the selectAll and enter pattern.

Bold BI Custom Widget Integration

Custom Widget Template Creation

To create a new custom widget template, download the Custom Widget Utility
Extract the zipped folder then Click on bicw.exe file now Command Prompt window is opened.
Use the create command for create the widget template in the specified path with the provided name as shown below
Following the execution of the create command, the folder can be successfully created, as shown in the image below.

Custom Widget Creation

Open the sourcefile.js in text editor such as notepad++ or visual studio code from the below location.
The sourcefile.js contains two important methods. To integrate your custom chart as a widget in Bold BI, you need to understand these methods.

Methods	Use Case
init()	This method will trigger when the custom widget is dragged and dropped in the designer or initialized in the viewer.
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.

Here is an example code snippet for configuring the sourcefile.js file to create a Syncfusion Lollipop Chart.
Within the init() function, invoke the renderLollipopChart() function to render the lollipop chart.

/* Register the widget in dashboard.*/
bbicustom.dashboard.registerWidget({

   guid: "2b88aa11-c5eb-43e5-b90a-35b9a4746e9c",

   widgetName: "D3LollipopChart",
   
   init: function () { 
       this.widget = document.createElement("div");
       this.widget.setAttribute("id", this.element.getAttribute("id") + "_widget");
       $(this.widget).css({"width": this.element.clientWidth , "height": this.element.clientHeight});
       this.element.appendChild(this.widget);	
   	this.renderLollipopChart();
   	
   },
   update: function (option) {
   	this.element.innerHTML = "";		
   	this.init();
   },
   renderLollipopChart : function () {	
   	var margin = {top: 10, right: 30, bottom: 90, left: 40},
   	width = this.element.clientWidth - margin.left - margin.right,
   	height = this.element.clientHeight- margin.top - margin.bottom;	
   	var data = [];
   	if (this.model.boundColumns.Value.length > 0 && this.model.boundColumns.Column.length > 0) {
   	   for( var i=0; i< this.model.dataSource.length; i++){
   		data.push({column:this.model.dataSource[i][this.model.boundColumns.Column[0].uniqueColumnName],values:this.model.dataSource[i][this.model.boundColumns.Value[0].uniqueColumnName]});
   		}
   	} else {
   		data=[{ column: "Russia", values: 2000 },{ column: "US", values: 5000 },{ column: "India", values: 8000 }];
   	}
   // append the svg object to the body of the page
   var svg = d3.select("#" + this.element.getAttribute("id") + "_widget")
     .append("svg")
   	.attr("width", width + margin.left + margin.right)
   	.attr("height", height + margin.top + margin.bottom)
     .append("g")
   	.attr("transform",
   		  "translate(" + margin.left + "," + margin.top + ")");	
   // X axis
   var maxDataValue = d3.max(data, function(d) {
   return d.values;
  });
  
   var x = d3.scaleBand()
     .range([ 0, width ])
     .domain(data.map(function(d) { return d.column; }))
     .padding(1);
   svg.append("g")
     .attr("transform", "translate(0," + height + ")")
     .call(d3.axisBottom(x))
     .selectAll("text")
   	.attr("transform", "translate(-10,0)rotate(-45)")
   	.style("text-anchor", "end");
   
   // Add Y axis
   var y = d3.scaleLinear()
     .domain([0, maxDataValue])
     .range([ height, 0]);
   svg.append("g")
     .call(d3.axisLeft(y));
   
   // Lines
   svg.selectAll("myline")
     .data(data)
     .enter()
     .append("line")
   	.attr("x1", function(d) { return x(d.column); })
   	.attr("x2", function(d) { return x(d.column); })
   	.attr("y1", function(d) { return y(d.values); })
   	.attr("y2", y(0))
   	.attr("stroke", "grey")
   
   // Circles
   svg.selectAll("mycircle")
     .data(data)
     .enter()
     .append("circle")
   	.attr("cx", function(d) { return x(d.column); })
   	.attr("cy", function(d) { return y(d.values); })
   	.attr("r", "4")
   	.style("fill", "#69b3a2")
   	.attr("stroke", "black")        
   }	
});

Download the d3.js Library:

Download the d3.js file by click this link
Once it downloaded, navigate to your project’s src folder and paste the file there.
Now, open the widgetconfig.json file in any text editor. Inside the dependencies section of the widgetconfig.json file, add an entry for the scripts and reference the d3.v6.js file. Here’s an example of how to do it:

"dependencies": {
   "scripts": [ 
     "src/d3js.org_d3.v6.js"
   ] 
   },

Convert the custom widget to *.bicw file:

You can converting the widget to a .bicw file format by following the steps provided in this link

Adding custom widget into the Bold BI application:

To incorporate the custom widget into the Bold BI application and utilize its functionality, please adhere to the following guidelines:

Download the Lollipop Custom Widget
For publish the custom widget to the Bold BI application, please follow the steps provided in this link.
Once you publish the custom widget, the Lollipop 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 Custom LolliPop chart widget will render as in the following image