We can add buttons to a widget for many purposes. Here are some examples we already posted:
Button to Show/Hide value labels
In above posts, we added buttons with default style. But we can apply styles to button by using below script.
Steps:
Create a Line/Column/Bar/Area/Pie chart
Add below script to widget. This script is to add a sample button with style
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();
});