Lines on scatter chart

[taek_onvi]

This seems like a very trivial question, but I couldn't seem to find an answer. 

If I have a scatter chart, I would also like to show the calculated average of the x- and y-axis spanning across the chart. For example if the average of the points on the x-axis is 10, then there would be a dotted line that goes from bottom of the chart to the top of the chart at x=10 and this value would be dynamic based on the points on the chart. 

Thanks in advance. 

[harikm007 · Accepted solution]

Hello @taek_onvi ,

Please check if this widget script works for you:

widget.on('processresult', function(se, ev){
	xaxisCount = 0
	xAxisSum = 0
	
	yaxisCount = 0
	yAxisSum = 0
		
	$.each(ev.rawResult.values, function(index, value){
		if(typeof(value[0].data) == 'number')
		{
			xaxisCount += 1
			xAxisSum += value[0].data
		}
		
		if(typeof(value[1].data) == 'number')
		{
			yaxisCount += 1
			yAxisSum += value[1].data
		}
	
	})
	
	avgxAxis = xAxisSum/xaxisCount
	avgyAxis = yAxisSum/yaxisCount
	
	//Reference : https://www.binextlevel.com/post/add-target-benchmark-line-to-a-chart-in-sisense
	ev.result.xAxis.plotLines = [{
				color: 'blue',
				dashStyle: 'ShortDash',
				width: 2,
				value: avgxAxis,
				zIndex: 5,
				label : {
					text : 'Avg X-Axis'
				}
            }]
	
	ev.result.yAxis[0].plotLines = [{
				color: 'green',
				dashStyle: 'ShortDash',
				width: 2,
				value: avgyAxis,
				zIndex: 5,
				label : {
					text : 'Avg Y-Axis'
				}
            }]
})

-Hari

[taek_onvi]

Thanks Hari, that works great.

Is there a way of exposing the label and value of the lines on the chart? 

[harikm007]

@taek_onvi ,

Please try this modified script (I couldn't find any way other than altering DOM):

widget.on('processresult', function(se, ev){
	xaxisCount = 0
	xAxisSum = 0
	
	yaxisCount = 0
	yAxisSum = 0
		
	$.each(ev.rawResult.values, function(index, value){
		if(typeof(value[0].data) == 'number')
		{
			xaxisCount += 1
			xAxisSum += value[0].data
		}
		
		if(typeof(value[1].data) == 'number')
		{
			yaxisCount += 1
			yAxisSum += value[1].data
		}
	
	})
	
	avgxAxis = xAxisSum/xaxisCount
	avgyAxis = yAxisSum/yaxisCount
	
	ev.result.xAxis.plotLines = [{
				color: 'blue',
				dashStyle: 'ShortDash',
				width: 2,
				value: avgxAxis,
				zIndex: 5, //Do not change as this value is used to create class name for line
				label : {
					text : 'Avg X-Axis'
				}
            }]
	
	ev.result.yAxis[0].plotLines = [{
				color: 'green',
				dashStyle: 'ShortDash',
				width: 2,
				value: avgyAxis,
				zIndex: 6, //Do not change as this value is used to create class name for line
				label : {
					text : 'Avg Y-Axis'
				}
            }]
})


widget.on('domready', function(){
	
	xAxisLabel = 'Avg X-Axis (' + Math.round(avgxAxis) + ')' //Label to display in X-axis line
	yAxisLabel = 'Avg Y-Axis (' + Math.round(avgyAxis) + ')' //Label to display in Y-axis line
	
		
	svgXLineAttrArray = $('.highcharts-plot-lines-5 path', element).attr('d').split(' ')
	vlinex = svgXLineAttrArray[1]
	vliney = svgXLineAttrArray[2]
	
	$('.highcharts-plot-lines-5', element).append('<text x="'+ vlinex +'" y="'+ vliney +'" font-weight="bold" fill="#808080">' + xAxisLabel + '</text>')
	$('.highcharts-plot-lines-5', element).html($('.highcharts-plot-lines-5').html())
	
	svgYLineAttrArray = $('.highcharts-plot-lines-6 path', element).attr('d').split(' ')
	hlinex = svgYLineAttrArray[svgYLineAttrArray.length - 2]-150
	hliney = svgYLineAttrArray[svgYLineAttrArray.length - 1]-5
	
	$('.highcharts-plot-lines-6', element).append('<text x="'+ hlinex +'" y="'+ hliney   +'" font-weight="bold" fill="#808080">' + yAxisLabel + '</text>')
	$('.highcharts-plot-lines-6', element).html($('.highcharts-plot-lines-6', element).html())
})
	

-Hari

[DashboardLover]

Hari, this is great. 
Do you have something dynamic for a Column Chart?
This link works great when having a static benchmark. 

https://www.binextlevel.com/post/add-target-benchmark-line-to-a-chart-in-sisense

I was wondering if you had something already in the works that would be just plug and play

[harikm007]

@DashboardLover ,

Are looking a for a way to draw benchmark line based on a calculated value? If yes, what would be the calculation?

-Hari

[DashboardLover]

Hari,

The calculation would be an average in a column chart OR 
The average in a bar chart