Configuring and Formatting Custom Widget

{
	"widgetName" : "Name of the widget.",

	"displayName" : "Display name of the widget to be displayed in designer toolbox.",

	"guid": "Unique GUID for the widget.",

	"category" : "Category in which the widget should be displayed in the designer.",

	"description" : "Description of the widget.",

	"srcFile"  : "Path of the source file through which widget can be embedded to
 		       dashboard",

	"dependencies" : "Specify the dependency scripts and CSS files to be referred for 
                                              the widget",

	"dataFields" : " Specifies the widget fields required for binding data from a data
                                          source. Each field can be bound to single or multiple
                                          measure/dimension fields in a data source. When dataFields is not
                                          specified, this widget acts as a non-data bound widget. ",
										  

	"filterSettings": "Filter settings are used to configure whether the widget can take
                                           part in filter interactions between the widgets."
}

"dependencies": {
    "scripts": [
      "src/dependency1.js",
      "src/ dependency2.js",
      ….
      ….
    ],
    "styles": [
      "style/ dependency1.css",
      " style / dependency2.css",
      ….
      ….
    ]
  }

"dependencies": {
    "scripts": [
      "src/ej.sunburstchart.js",
      "src/ej.helper.js"
    ],
    "styles": [
      "style/ej.sunburstchart.css"
    ]
  }

dataFields:[
{
"displayName" : "display name of the data field1",
"valueType" : "type of the data field1, can be measure, dimension or dimensionormeasure",
"name" :  "name of the data field1",
"min" : "minimum number of block which has to be dropped for the datafield1",
"max" : "maximum number of block can be dropped for the datafield2",
"optional" : "specify whether it is mandatory data field"
},
{
"displayName" : " display name of the data field2",
"valueType" :" type of the data field2, can be measure, dimension or dimensionormeasure" ,
"name" : " name of the data field2",
"min" : "minimum number of block which has to be dropped for the datafield2",
"max": "maximum number of block can be dropped for the datafield2",
"optional" : "specify whether it is mandatory data field"
}
]

dataFields:[
{
"displayName" : "Value",
"valueType" : "measure",
"name" :  "Value",
"min" : 1,
"max" : 1,
"optional" :false
},
{
"displayName" : "Levels",
"valueType" : "dimension",
"name" : "Levels",
"min" : 1,
"max":4,
"optional" : false
}]

ej.dashboard.registerWidget(
{
		
	guid : `Specifies the GUID used in widgetconfig.json`, 
 
	widgetName : `Specifies the name of the widget used in widgetconfig.json`,
 
	init : function () {
 	/* init method will be called when the widget is initialized. */
	},
 
	update : function (option) {
		update method will be called when any update needs to be performed in the widget. */
		if (option.type == "resize") {
 		/* update type will be 'resize' if the widget is being resized. */
		}
		else if (option.type == "refresh") {
 		/* update type will be 'refresh' when the data is refreshed. */
		}
	}
});

ej.dashboard.registerWidget(
         {
 
guid : "b0d5348d-f625-4b78-8db9-c5ed9d38eb45",
 
widgetName : "SunburstChart",
 
init : function () {
var widget =  document.createElement("div").setAttribute("id", this.element.getAttribute("id") + "_widget");
widget.innerHTML = "Widget is created successfully";
this.element.appendChild(widget);
},
 
update : function (option) {

var widget = document.getElementById(this.element.getAttribute("id") + "_widget");
if(option.type == "resize") {
 widget.innerHtml = "Widget is resized."
}
else if (option.type == "refresh") {
 	widget.innerHtml = "Widget data need to be refreshed."
}
}
   }
);

"description": "Sunburst Chart is useful for visualizing hierarchical data.",
    "srcFile": "src/sunburst.js",
    "dependencies": {"scripts": [ "src/ej.sunburstchart.js"] },

"dataFields": [
        {
            "displayName": "Value",
            "valueType": "measure",
            "name": "Value",
            "min": 1,
            "max": 1,
            "optional": false
        },
        {
            "displayName": "Levels",
            "valueType": "dimension",
            "name": "Levels",
            "min": 1,
            "max": 4,
            "optional": false
        }
    ],

renderSunburstChartWidthDefaultData : function () {
			this.widget = document.createElement("div");
			this.widget.setAttribute("id", this.element.getAttribute("id") + "_widget");
			this.element.appendChild(this.widget);

* $(this.widget).css({"width":$(this.element).width(), "height":$(this.element).height()});

var dataSource = [{ Item: "Item1", Value: 50 },{ Item: "Item2", Value: 60 },{ Item: "Item3", Value: 70 },{ Item: "Item4", Value: 80 },{ Item: "Item5", Value: 90 },{ Item: "Item6", Value: 90 },{ Item: "Item7", Value: 90 },{ Item: "Item8", Value: 90 },{ Item: "Item9", Value: 90 },{ Item: "Item10", Value: 90 },{ Item: "Item11", Value: 90 }];
			var levels = [];
			var valueMember = "Value";
			levels = [ { groupMemberPath: "Item" }];

$(this.widget).ejSunburstChart({ dataSource: dataSource, 
							valueMemberPath: valueMember, levels: levels, 
							tooltip: { visible: true},
							margin: (this.marginVisibility())? { left: 10, top: 10, bottom: 10, right: 10} :{ left: 0, top: 0, bottom: 0, right: 0} ,
							border: { width: (this.marginVisibility())? 2:0 },
							load: $.proxy(this.sunburstChartLoad),
							enableAnimation: false,
							animationType: 'Rotation',
							innerRadius: 0.2,							
							dataLabelSettings:{visible:false},
							size: { height: $(this.element).height(), width: $(this.element).width()},	 
							legend: { visible:  (this.legendVisibility()) , position: this.legendPosition() },
							highlightSettings: {enable: true},
							selectionSettings: {enable: true, mode : "parent"}
							});	

update : function (option) {
			if(option.type == "resize") {
				this.resizeWidget(option.size);
			}
			else if (option.type == "refresh") {
				var widgetObj = $(this.widget).data("ejSunburstChart");	
				if(this.model.boundColumns.Value.length > 0){
					for (var i=0; i<this.model.dataSource.length; i++) {
						this.model.dataSource[i][this.model.boundColumns.Value[0].uniqueColumnName] =  parseInt( this.model.dataSource[i][this.model.boundColumns.Value[0].uniqueColumnName]);     	
					}
					var valueMember = this.model.boundColumns.Value[0].uniqueColumnName;
					if (this.model.boundColumns.Levels.length > 0) {
						var levels = [];				
						for (var level = 0; level < this.model.boundColumns.Levels.length; level++) {
							levels.push({ groupMemberPath : this.model.boundColumns.Levels[level].uniqueColumnName });
						}
						widgetObj.model.levels= levels;
					}
					widgetObj.model.dataSource = this.model.dataSource;
					widgetObj.model.valueMemberPath = valueMember;
					widgetObj.redraw();
				} else {
					this.renderSunburstChartWithDefaultData();
				}
			}			
}

var selectedColumnsFilter = [];
var filterColumn = new ej.dashboard.selectedColumnInfo();
filterColumn.condition = "condition";
filterColumn.uniqueColumnName = "unique column name";
filterColumn.values =["value1", "value2", "value3"…] ;
selectedColumnsFilter.push(filterColumn);
ej.dashboard.filterData(this, selectedColumnsFilter); /* selectedColumnsFilter is the list of selected column and its value send from custom widget for interaction. */

var selectedFilterInfos = [];
var filterinfo = new ej.dashboard.selectedColumnInfo();
filterinfo.condition = "include";
filterinfo.values = ["india","china"];
filterColumn.uniqueColumnName = "unique column name";
selectedFilterInfos.push(filterinfo);
ej.dashboard.filterData(that, selectedFilterInfos);

var selectedFilterInfos = [];
var filterinfo = new ej.dashboard.selectedColumnInfo();
filterinfo.condition = "range";
filterinfo.values =["1996", "1998"] ;
filterinfo.uniqueColumnName = "unique column name";
selectedFilterInfos.push(filterinfo);
ej.dashboard.filterData(this, selectedFilterInfos); 

var selectedFilterInfos = [];
var filterinfo = new ej.dashboard.selectedColumnInfo();
filterinfo.condition = "greaterthan";
filterinfo.uniqueColumnName = this.model.boundColumns.Value[0].uniqueColumnName;
filterinfo.values =[100] ;
selectedFilterInfos.push(filterinfo);
ej.dashboard.filterData(this, selectedFilterInfos); 

var selectedFilterInfos = [];
var filterinfo = new ej.dashboard.selectedColumnInfo();
filterinfo.condition = "isbetween";
filterinfo.uniqueColumnName = "unique column name";
filterinfo.values =[10248,10251] ;
selectedFilterInfos.push(filterinfo);
ej.dashboard.filterData(this, selectedFilterInfos); 

    "widgetName": "C3Chart",
    "displayName": "C3 Chart",
    "guid": "b0d5348d-f625-4b78-8db9-c5ed9d38eb45",
    "category": "Comparison",
    "description": "Compare values for a set of unordered items across categories",
    "srcFile": "src/sourcefile.js",
    "dependencies": {
	"scripts": [ 
	     "src/d3.js",
	     "src/c3.js"
		 ] 
		 },
    "dataFields": [
        {
            "displayName": "Value",
            "valueType": "measure",
            "name": "Value",
            "min": 1,
            "max": 1,
            "optional": false
        },
        {
            "displayName": "Column",
            "valueType": "dimension",
            "name": "Column",
            "min": 1,
            "max": 1,
            "optional": false
        }
    ],
    "functionalities": [
        {
            "header": "Basic Settings",
            "properties": [
                {
                    "displayName": "Show Tooltip",
                    "controlType": "bool",
                    "name": "showTooltip",
                    "defaultValue": "true"
                },
				{
                    "displayName": "Show Label",
                    "controlType": "bool",
                    "name": "showLabel",
                    "defaultValue": "true"
                },
                {
                    "displayName": "Color",
                    "controlType": "color",
                    "name": "barColor",
                    "defaultValue": "#2196F3"
                }
            ]
        },
      ],
    "filterSettings": {
        "masterFilter": {
            "visible": true,
            "defaultValue": true

        },
        "ignoreMasterFilter": {
            "visible": true,
            "defaultValue": false
        }
    }

     init: function () { /* init method will be called when the widget is initialized */
	 this.widget = document.createElement("div");
	 this.widget.setAttribute('id', 'chart');
	 var width = document.getElementById('container').style.width;
	 var height = document.getElementById('container').style.height;
	 this.element.appendChild(this.widget);
	 var that = this;

	var columns =[];
	columns =[{column:'Item1',values: '50'},{column:'Item2',values: '20'},{column:'Item3',values: '30'}];

    if (this.model.boundColumns.Value.length > zero) {
     for (var i = 0; i < this.model.dataSource.length; i++) {
	  columns.push({column: this.model.dataSource[i][this.model.boundColumns.Column[0].uniqueColumnName], values: this.model.dataSource[i][this.model.boundColumns.Value[0].uniqueColumnName]});
			}

    var chart = c3.generate({
		data:
		{
		  type: 'bar',
		  json: columns,
		  keys:
			{
			 x: 'column',
			 value: ['values']
			},
			labels: true,
			selection:
			{
			 enabled: true,
			 multiple: false,
			 draggable: true
			},
			onclick: function(d) {
								that.selectionChange(d)
							},
		},
		axis: 
		{
		 x:
		  {
		   type: 'category'
		  }
		},
		grid:
		{
		   x: {show: false},
		   y: {show: true}
		},
		bar:
	      {
		  width:
		   { 
			ratio: 0.5
		   }
	      },
		interaction: {enabled: true}
	   });
	this.widget = chart;

    update: function (option) {
        var widget = this.widget;

        /* update method will be called when any update needs to be performed in the widget. */

        if (option.type == "resize") {
            /* update type will be 'resize' if the widget is being resized. */
			widget.resize(option.size);
        }
        else if (option.type == "refresh") {
            /* update type will be 'refresh' when the data is refreshed. */
			this.refreshChart();
        }
        else if (option.type == "propertyChange") {
            /* update type will be 'propertyChange' when any property value is changed in the designer. */

            switch (option.property.name) {
                case "showTooltip":
                    widget.internal.config.tooltip_show = option.property.value;
                    break;
                case "showLabel":
                    widget.internal.config.data_labels = option.property.value;
					widget.flush();
                    break;
                case "barColor":
                    widget.internal.config.data_colors.values = option.property.value;
					widget.flush();
                    break;
                }
        }
    }

    refreshChart : function (e) {
		var columns =[];
		if (this.model.boundColumns.Value.length > 0)
		{
			for( var i=0; i< this.model.dataSource.length; i++)
			 {
			  columns.push({column:this.model.dataSource[i][this.model.boundColumns.Column[0].uniqueColumnName],values:this.model.dataSource[i][this.model.boundColumns.Value[0].uniqueColumnName]});
			 }
	    } else {
				columns =[{column:'A',values: '50'},{column:'B',values: '20'},{column:'C',values: '30'}];
			   }
	    var chart = c3.generate({
                    data: {                
                         type : 'bar',
                         json: columns,
                         keys: {
						      x: 'column',
						      value: ['values']
						       },
						 labels:this.model.properties.show label,
		                 selection:
						 {
                         enabled: true,
						 multiple: false,
						 draggable:true
						 },
						 onclick: function(d) {
								that.selectionChange(d)
							},
						 },
			        axis:
						 { 
						    x: {
                            type: 'category'
						       }
						 },
				    grid:
						 {
							 x:{ show : true},
							 y:{show: false}
						 },						 
					bar: 
						 { 
						  width: { ratio: 0.5 }
						 },
                    interaction: {enabled: true}
					}); 
                this.widget = chart;
				},