top of page

Apply style to widget buttons

We can add buttons to a widget for many purposes. Here are some examples we already posted:

In above posts, we added buttons with default style. But we can apply styles to button by using below script.


Steps:

  1. Create a Line/Column/Bar/Area/Pie chart

  2. Add below script to widget. This script is to add a sample button with style

  3. Save the script and refresh widget



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

var normalState = {
                     fill: '#f44336',
                     stroke: '#f44336',
                     r: 3,
                     style: {
                              color: '#ffffff',
                              borderWidth  : 0
                             }
                   },
hoverState = {
                    fill: '#f05146',
                    stroke: '#f05146',
                    r: 3,
                    style: {
                              color: '#ffffff',
                              borderWidth  : 0
                           }
                  }, 
pressedState = {
                        fill: '#284dc7',
                        stroke: '#284dc7',
                        r: 3,
                        style: {
                                  color: '#ffffff',
                                  borderWidth  : 0
                               }
                    },
disabledState = {
                        fill: '#284dc7',
                        stroke: '#284dc7',
                        r: 5,
                        style: {
                                 color: '#ffffff',
                                 borderWidth  : 0
                               }
                    },
callback = function () {
                        
                        }

widget.on("domready", function(w){
		
	chart = w.chart[0][Object.keys(w.chart[0])[0]].hc

	
	chart.renderer.button('Sample Button', 10, 10,
				callback,
				normalState,
				hoverState,
				pressedState,
				disabledState)
			.attr({
				zIndex : 10,
				height: 15,
				width: 150,
				'text-align': 'center'
			})
			.on('click', function() {						
				//script to perform some action
			})
			.add();

	
});

167 views2 comments

Recent Posts

See All

2件のコメント


Hi, love this functionality on chart type widgets but was wondering if it would be possible to do on pivot tables? Would love to have the front end user be able to toggle on/off different rows/values on the dashboard level

いいね!
BI Next Level
BI Next Level
2022年12月14日
返信先

Hi Ken,

Currently this button functionality doesn't work in Pivot table, but it is in the roadmap. Will find a solution for this and post in the website.

いいね!
bottom of page