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