top of page

Button to change widget type

By default, only data designer can change the widget type. Below script will add buttons to a widget, so that user can change the widget type to Line/Bar/Column/Area charts.



Steps:

  1. Create new widget - (line/bar/column/pie/area chart)

  2. Add below script to widget

  3. Save the script and refresh widget


widget.on('processresult', function(se, ev){	
	ev.result.chart.marginTop= 60
});


widget.on("domready", function(w, args){
	
	chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
		
	chart.renderer.button('Line', 10, 10)
		.attr({
			zIndex : 10,
			height: 15,
			width: 50,
			'text-align': 'center'
		})
		.on('click', function() {						
			widget.type = 'chart/line'
			widget.subtype = 'line/classic'
			widget.refresh();
		})
		.add();
	
	chart.renderer.button('Column', 80, 10)
		.attr({
			zIndex : 10,
			height: 15,
			width: 50,
			'text-align': 'center'
		})
		.on('click', function() {						
			widget.type = 'chart/column'
			widget.subtype = 'column/classic'
			widget.refresh();
		})
		.add();
	
	chart.renderer.button('Bar', 150, 10)
		.attr({
			zIndex : 10,
			height: 15,
			width: 50,
			'text-align': 'center'
		})
		.on('click', function() {						
			widget.type = 'chart/bar'
			widget.subtype = 'bar/classic'
			widget.refresh();
		})
		.add();
	
	
});

It is possible to change style of buttons by adding 'style' property in the script

224 views0 comments

Recent Posts

See All
bottom of page