Draw a line on Google Charts ScatterChart

Question

I have a ScatterChart where I need to draw a diagonal line (of the function y=x) that serves as a visual aid. Is it possible ? if so, how can I do it?

Answer 1

you can use a ComboChart to display both scatter and line series'

and a DataView to provide the function for y=x

see following working snippet...

 google.charts.load('current', { callback: drawChart, packages:['corechart'] }); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'x'); data.addColumn('number', 'y0'); data.addRows([ [1, 37.8], [2, 30.9], [3, 25.4], [4, 11.7], [5, 11.9], [6, 8.8], [7, 7.6], [8, 12.3], [9, 16.9], [10, 12.8], [11, 5.3], [12, 6.6], [13, 4.8], [14, 4.2] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { label: 'y1=x', type: 'number', calc: function (dt, row) { return dt.getValue(row, 0) } }]); var options = { seriesType: 'scatter', series: { 1: { type: 'line' } } }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(view, options); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> 

Answer 2

Another solution is that you can use Scatter chart with multi-series, and set lineWidth = 1 and pointSize = 0 for Line charts!

See the following example:

 function main() { const xMin = -2 * Math.PI; const xMax = 2 * Math.PI; const f1 = x => Math.cos(x) + Math.random(); const f2 = x => Math.cos(x); const x = linspace(xMin, xMax, 20); const y1 = x.map(f1); const y2 = x.map(f2); scatterLineChart(document.getElementById('scatter-line-chart'), x, [y1, y2], 'Scatter: Cos(x) + Noise, Line: Cos(x)', 'x', ['Cos(x) + Noise', 'Cos(x)']); } function linspace(a, b, n = 100) { const data = new Array(n); const d = (b - a) / (n - 1); data[0] = a; data[n - 1] = b; n = n - 1; for (let i = 1; i < n; i++) { data[i] = data[i - 1] + d; } return data; } function createSeriesDataTable(x, ys, xLabel, yLabels) { // data const data = new google.visualization.DataTable(); // - columns data.addColumn('number', xLabel); yLabels.forEach(yLabel => { data.addColumn('number', yLabel); }); // - rows const n = x.length; const m = ys.length; const rows = Array(n); for (let i = 0; i < n; i++) { rows[i] = Array(1 + m); rows[i][0] = x[i]; for (let j = 0; j < m; j++) { rows[i][j + 1] = ys[j][i]; } } data.addRows(rows); // return return data; } function scatterLineChart(parentElement, x, ys, title, xLabel, yLabels) { google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { const data = createSeriesDataTable(x, ys, xLabel, yLabels); const options = { title: title, series: { 1: { lineWidth: 3, pointSize: 0, curveType: 'function' }, }, legend: 'none' }; const chart = new google.visualization.ScatterChart(parentElement); chart.draw(data, options); } } main(); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatter-line-chart"></div>