top of page

Add additional information in tooltip - (Column, Bar, Line, Area chart)

Sometimes we may need to include more information in tooltip. Here is how we can achieve this.


Steps:

  1. Create column/bar/line/area chart

  2. In this approach, result of disabled Values panel will display as additional information in tooltip . So create and disable Values panel as required. Make sure there is only one Values panel is enabled and there is no Categories and Break by panel is disabled.

  3. Add below widget script and save

  4. Refresh widget


widget.on("beforequery", function (se, ev) {
	$.each(ev.widget.metadata.panels[1].items, function(index, value){
		if(value.disabled == true)
		{
			var newJaql = {
				jaql  : JSON.parse(JSON.stringify(value.jaql))
			}
			ev.query.metadata.push(newJaql)
			lastIndex = ev.query.metadata.length - 1
			ev.query.metadata[lastIndex].disabled = false	
		}
	})
})

widget.on("beforedatapointtooltip", function (se, args){

	var valueSet, breakbyExist = false, categoryExist = false

	if(args.widget.metadata.panels[2].items.length > 0)
		breakbyExist = true

		if(args.widget.metadata.panels[0].items.length > 0)
			categoryExist = true

			category = args.context.category
			seriesName = args.context.points[0].seriesName

			if(categoryExist)
			{
				categoryTitle = args.widget.metadata.panels[0].items[0].jaql.title
				categoryIndex = args.widget.rawQueryResult.headers.indexOf(categoryTitle)
			}

	if(breakbyExist)
	{
		breakbyTitle = args.widget.metadata.panels[2].items[0].jaql.title
		breakByIndex = args.widget.rawQueryResult.headers.indexOf(breakbyTitle)
	}

	$.each(se.rawQueryResult.values, function(key, value)
		   {
		if(!categoryExist)
		{
			if(value[breakByIndex].text == seriesName)
			{
				valueSet = value
			}
		}else if(!breakbyExist)
		{
			if(value[categoryIndex].text == category)
			{
				valueSet = value
			}
		}else
		{
			if(value[breakByIndex].text == seriesName && value[categoryIndex].text == category)
			{
				valueSet = value
			}
		}
	})

	$.each(args.widget.metadata.panels[1].items, function(index, value){
		if(value.disabled == true)
		{

			resultIndex = args.widget.rawQueryResult.headers.indexOf(value.jaql.title)
			args.context.points[args.context.points.length]= {

				seriesName: value.jaql.title,
				showPercentage: false,
				value: valueSet[resultIndex].text,
				valueColor: args.context.points[0].valueColor

			}
		}
	})
})


565 views2 comments

Recent Posts

See All

2 Comments


Prakash Periasamy
Prakash Periasamy
Mar 01, 2023

Super thanks for this useful script to add additional tool tip. I have a scenario where the additional info I need to add is a string and not a number. Hence not able to add it to "Values" panel. Can you please provide a script for adding string as additional information? For example, I can include this additional info in "Category" panel and disable it. Would appreciate a script that can read off disabled category panel?

Like
BI Next Level
BI Next Level
Mar 14, 2023
Replying to

Hope this post helps: https://www.binextlevel.com/post/add-text-field-in-tooltip

Like
bottom of page