Forum Discussion

taek_onvi's avatar
taek_onvi
Cloud Apps
01-27-2022
Solved

Lines on scatter chart

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. 

  • 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

6 Replies

Replies have been turned off for this discussion
  • harikm007's avatar
    harikm007
    Data Warehouse

    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

  • Thanks Hari, that works great.

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

    • harikm007's avatar
      harikm007
      Data Warehouse

      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's avatar
        DashboardLover
        Cloud Apps

        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