top of page

Convert bar chart to progress bars

Below script to allow us convert a bar chart to progress bars.


Steps:

  1. Create a bar chart

  • Bar chart should contains only one field under 'Categories' and no field under 'Break by'

  • Calculation of first value panel should be 1 and convert to percentage (100%). This is the grey color background bar in the screenshot.


  • Second value panel contains actual calculation for bar chart.

2. Add below script to widget

3. Save the script and refresh widget



widget.on('processresult', function(se, ev){
	ev.result.plotOptions.bar.grouping = false
	ev.result.yAxis[0].visible = false
	ev.result.xAxis.gridLineWidth = 0
	ev.result.xAxis.lineColor = 'transparent'
	ev.result.series[0].dataLabels = {enabled : false}
		
	ev.result.series[0].states = {
						hover: {
							enabled: false
							}
						}
	
	$.each(ev.result.series, function(index, value){
		value.borderRadius = 12
	})
})

widget.on("beforedatapointtooltip", function (se, ev){

	if(ev.context.points[0].seriesName == ev.widget.metadata.panels[1].items[0].jaql.title)
		ev.cancel=true;
});


529 views0 comments

Comments

Rated 0 out of 5 stars.
No ratings yet

Add a rating
bottom of page