Customized Hover for Area Map

[rahuldhomane]

Hi,

When hovered over a region/state in an Area map, can we add extra lines of details [column values] in the tooltip that pops-up after hovering?

Also, it would really be helpful if we can achieve it for other chart type as well.

Thanks!

[harikm007]

@rahuldhomane ,

Please try below script :

widget.on("beforequery", function (se, ev) {
	
	var newJaql = {
		jaql  : {
				//agg:'max', //enable this if you need to display aggreated value
				column: "Region", //Column name
				datatype: "text",
				dim: "[Records.Region]", //table + column name
				table: "Records", //table name
				title: "Region"
		}
	}
	ev.query.metadata.push(newJaql)
	lastIndex = ev.query.metadata.length - 1	

})

widget.on("beforedatapointtooltip", function (se, args){
	
	$.each(args.widget.queryResult.$$rows, function(index, value){
		value[1].text = value[1].text + ', Region: ' + value[2].text //replace 'Region' with label you want
	
	})
})

-Hari

[jamnikej]

I've noticed that when the filters change, the extra information vanishes. My script is:

widget.on("beforequery", function (se, ev) {
	
	var newJaql = {
		jaql  : {
				agg:'count', //enable this if you need to display aggreated value
				column: "ID", //Column name
				datatype: "numeric",
				dim: "[Table.ID]", //table + column name
				table: "Table", //table name
				title: "Volume"
		}
	}
	ev.query.metadata.push(newJaql)
	lastIndex = ev.query.metadata.length - 1	

})

widget.on("beforedatapointtooltip", function (se, args){
	
	$.each(args.widget.queryResult.$$rows, function(index, value){
		value[1].text = value[1].text + ', Loads: ' + value[2].text //replace 'Region' with label you want
	
	})
})

Any thoughts on how to keep the tooltip after filtering?

[harikm007]

@jamnikej ,

Minor change has been made on the script. Here is the updated script:

widget.on("beforequery", function (se, ev) {
	
	var newJaql = {
		jaql  : {
				//agg:'max', //enable this if you need to display aggreated value
				column: "Region", //Colum name
				datatype: "text",
				dim: "[Records.Region]", //table + column name
				table: "Records", //table name
				title: "Region"
		}
	}
	ev.query.metadata.push(newJaql)
	lastIndex = ev.query.metadata.length - 1	

})

widget.on("render", function (se, args){
	$.each(args.widget.queryResult.$$rows, function(index, value){
		value[1].text = value[1].text + ', Region: ' + value[2].text //replace 'Region' with label you want
	
	})
})

-Hari

[jamnikej]

Thanks! That fixed it.

[ashfaqahmed]

Thanks for this code.

1. How to show the multi-line values on hover as my column gets more than one row of values.

2. How to add another column of data to get value[3].text

Ashfaq