user3797205 user3797205 - 1 month ago 8
jQuery Question

Is it possible to plot x axis and y axis as line for an average point in google scattered plot

I have a scattered plot with all points plotted and an average point as well. What i need is to plot a x-axis and y-axis for that average point in scattered plot. Is it possible? Below is my code snippet.

enter image description here

CODE:

function drawChart(paramObj)
{
if (paramObj == 'undefined') {
alert('Something wrong with configuration');
return false;
}
var data = new google.visualization.DataTable();
var addRows = new Array();
var chart = null;
var headers = null;
jQuery.each(paramObj.dataArray.split('\n'), function (index, value) {
var tabs = value.split('\t');

if (tabs.length != 7) {
return;
}


if (index != undefined && index == 0) {
headers = tabs;
data.addColumn('number', dfv(1, headers, ''));
data.addColumn('number', dfv(2, headers, ''));

} else {

var name = dfv(0, tabs, '');
var xval = parseFloat(parseFloat(dfv(1, tabs, '')).toFixed(2));
var yval = parseFloat(parseFloat(dfv(2, tabs, '')).toFixed(2));
var xval_ori = parseFloat(parseFloat(dfv(3, tabs, '')).toFixed(2));
var yval_ori = parseFloat(parseFloat(dfv(4, tabs, '')).toFixed(2));
var opt1_val = dfv(5, tabs, '');
var opt2_val = dfv(6, tabs, '');

if (name == 'Average') {
var test = [
xval,yval,
name + '\n' +
dfv(3,headers,'') + ' = ' + xval_ori + ' ' +
dfv(4,headers,'') + ' = ' + yval_ori + '\n' +
((opt1_val != ' ') ? dfv(5,headers,'') + ' = ' + opt1_val : '') + ' ' +
((opt2_val != ' ') ? dfv(6,headers,'') + ' = ' + opt2_val : ''),
'point { size: 4; shape-type: circle; fill-color: red; }'
];
} else {
var test = [
xval,yval,
name + '\n' +
dfv(3,headers,'') + ' = ' + xval_ori + ' ' +
dfv(4,headers,'') + ' = ' + yval_ori + '\n' +
((opt1_val != ' ') ? dfv(5,headers,'') + ' = ' + opt1_val : '') + ' ' +
((opt2_val != ' ') ? dfv(6,headers,'') + ' = ' + opt2_val : ''),
null
];
}
addRows.push(test);
}
});

data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addRows(addRows);

var options = {
title: dov('title', paramObj, '(no title)'),
hAxis: {title: dov('xLabel', paramObj, '')},
vAxis: {title: dov('yLabel', paramObj, '')},
legend: dov('legend', paramObj, 'none'),
width: dov('width', paramObj, 1200),
height: dov('height', paramObj, 800),
chartArea: {left:100,top:50,right:100,bottom:50}
};

switch (dov('graphType', paramObj, 'scatter')) {
case 'scatter':
chart = new google.visualization.ScatterChart(document.getElementById(dov('container_id', paramObj, 'container')));
break;

default:
break;
}

if (chart) {
chart.draw(data, options);
return true;
}
return false;
}

Answer

to draw lines from the average point to each axis,
add a separate column for the average series

data.addColumn('number', 'AVG');

add three rows of data to draw the line from each axis, e.g.

var avgX = 50;
var avgY = 50;

data.addRows([
  [0, null, avgY],
  [avgX, null, avgY],
  [avgX, null, 0]
]);

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart(transparent) {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');

  for (var i = 0; i < 100; i++) {
    data.addRow([
      Math.floor(Math.random()*100),
      Math.floor(Math.random()*100)
    ]);
  }

  // add average point
  data.addColumn('number', 'AVG');

  var avgX = 50;
  var avgY = 50;
  data.addRows([
    [0, null, avgY],
    [avgX, null, avgY],
    [avgX, null, 0]
  ]);

  var options = {
    series: {
      // change average series to line
      1: {
        lineWidth: 2,
        pointSize: 0
      }
    },
    legend: {
      position: 'bottom',
      textStyle: {
        bold: true,
        fontSize: 20
      }
    }
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ScatterChart(chartDiv);
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>