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:
-
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
