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

1 則留言

評等為 0(最高為 5 顆星)。
暫無評等

新增評等
Muznah Musthafa
Muznah Musthafa
2024年8月30日

Great solution! Is there any way to change the selected button color?

按讚
BI Next Level white logo

BI Next Level is your trusted resource for BI customization, data solutions, and expert insights. Explore practical tips, scripts, and tutorials for tools like Sisense, Python, and SQL. Let’s transform your data into impactful insights together.

Quick Links
Connect with us
Copyright © 2024. All Rights Reserved. Designed, Developed & Maintained  by Intertoons
bottom of page