top of page

Total value in Column/Line chart

Using Blox we can visualize Total Value and sparkline to show values over time. Here is a widget script to create similar visualization but with more features such as tooltip, click-and-filter functionality etc.



Steps:

1. Create a line or column chart. Chart should contains only one dimension and one value panel.

2. Disable Legend, Value Label, Markers, X-Axis and Y-Axis in design panel (right side panel of widget in edit mode)

2. Add below script to widget. This script will show sum of values as single value at top-left corner

3. Save the script and refresh widget


widget.on('processresult',function(se,ev){
	
	ev.result.chart.backgroundColor = '#5181c9'
	ev.result.xAxis.gridLineWidth = 0
	ev.result.chart.spacing = [0, 10, 5, 10]

	var totalAmount = 0
	$.each(ev.result.series[0].data, function(index, value){
		totalAmount = totalAmount + value.y
	})
	
	myItem = se.metadata.panels[1].items[0]
	myMask = $$get(myItem, "format.mask", {})

	var numberFormatter = prism.$injector.get('$filter')('numeric');
	formattesValue = numberFormatter(totalAmount, myMask);

	//Subtitle
	ev.result.subtitle = {
		text: `Total Amount<br><span style="font-size:25px"> ${formattesValue} </span>`,
		align: 'left',
		style: {
			color: '#FFFFFF',
            fontSize:'13px',
			fontWeight:'bold'
		}
	}
	
})


widget.on('domready', function(se, ev){
	$('.highcharts-root', element).css('background-color', '#5181c9')
})

widget.on('beforedatapointtooltip', function(se, ev){
	ev.context.points[0].valueColor = '#4a4a4a'
})

378 views2 comments

Recent Posts

See All

2 Comments


zoheb akber
zoheb akber
Jan 02, 2023

In this script, I need the average of all values rather than sum. Can u please help

Thanks

Like
BI Next Level
BI Next Level
Jan 02, 2023
Replying to

Try this script:


widget.on('processresult',function(se,ev){

ev.result.chart.backgroundColor = '#5181c9'

ev.result.xAxis.gridLineWidth = 0

ev.result.chart.spacing = [0, 10, 5, 10]


var totalAmount = 0

$.each(ev.result.series[0].data, function(index, value){

totalAmount = totalAmount + value.y

})

let avgAmount = totalAmount / ev.result.series[0].data.length

myItem = se.metadata.panels[1].items[0]

myMask = $$get(myItem, "format.mask", {})


var numberFormatter = prism.$injector.get('$filter')('numeric');

formattesValue = numberFormatter(avgAmount, myMask);


//Subtitle

ev.result.subtitle = {

text: `Average Amount<br><span style="font-size:25px"> ${formattesValue} </span>`,

align: 'left',

style: {

color: '#FFFFFF',

fontSize:'13px',

fontWeight:'bold'

}

}

})


widget.on('domready', function(se, ev){

$('.highcharts-root', element).css('background-color', '#5181c9')

})


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

ev.context.points[0].valueColor = '#4a4a4a'

})

Like
bottom of page