Forum Discussion

harikm007's avatar
harikm007
Data Warehouse
03-11-2022

Add additional information in tooltip - (Column, Bar, Line, Area charts - stacked and classic)

Here is how you can include more information in tooltip.

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

(Reference)

 

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

			}
		}
	})
})

 

-Hari

6 Replies

Replies have been turned off for this discussion