Add text field in Tooltip

[harikm007]

We already have a script to add additional information in tooltip . But we can display only calculated values (measures) in tooltip using that script. Here is a solution to display one or more text fields in tooltip.

Reference: https://www.binextlevel.com/post/add-text-field-in-tooltip

Steps:

1. Create a Column/Line/Area/Bar chart. Make sure it has only one dimension selected under Categories panel and no dimension under 'Break by' panel

2. Add below script to widget. Update the variable newJaql with jaql of dimensions to be displayed in tooltip. (Below script is to display Region and State field from Records table)

Ensure that there are no multiple entries in the table that correspond to a single item on the X-axis. For example, in the above screenshot, each items in X-axis should have only one Region and State in the table. Otherwise chart will show incorrect result.

3. Save the script and refresh the widget

var newJaql = [
	//Tooptip Dimension 1
	{
		jaql  : {
				column: "Region", //Colum name
				datatype: "text",
				dim: "[Records.Region]", //table + column name
				table: "Records", //table name
				title: "Region"
		}
	},
	
	//Tooptip Dimension 2
	{
		jaql  : {
				
				column: "State", //Colum name
				datatype: "text",
				dim: "[Records.State]", //table + column name
				table: "Records", //table name
				title: "State"
		}
	}]

widget.on("beforequery", function (se, ev) {
	
	$.each(newJaql, function(index, value){
		ev.query.metadata.push(value)
	})

})

widget.on("beforedatapointtooltip", function (se, ev){
	
	let category = ev.context.category
	
	$.each(newJaql, function(index, value){
		var tooltipTitle = value.jaql.title
		var headerIndex = ev.widget.rawQueryResult.headers.indexOf(tooltipTitle)
		console.log(headerIndex)
		var resultObject = ev.widget.rawQueryResult.values.find(el=>el[0].text == category)
		
		if(resultObject){
			var tooltipText = resultObject[headerIndex].text
			
			ev.context.points[ev.context.points.length]= {
				seriesName: tooltipTitle,
				showPercentage: false,
				value: tooltipText,
				valueColor: ev.context.points[0].valueColor
			}
		}
		
	})
})

-Hari