cancel
Showing results for 
Search instead for 
Did you mean: 

Sparkline with total value

zohebakber
9 - Travel Pro
9 - Travel Pro

Hi,
I am using the below script to show the sparklline along with the total value in the y axis.
Can anyone suggest me as to how to show the Average Value..

 

zohebakber_1-1672654287792.png

 

 


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'
})

1 ACCEPTED SOLUTION

harikm007
13 - Data Warehouse
13 - Data Warehouse

Hi @zohebakber ,

Try below script to display average value instead of sum:

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'
})

-Hari

 

View solution in original post

2 REPLIES 2

harikm007
13 - Data Warehouse
13 - Data Warehouse

Hi @zohebakber ,

Try below script to display average value instead of sum:

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'
})

-Hari

 

Thanks Hari,
I got the logic..

Thanks again