JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<div id="chart_div"></div>
JavaScript
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addRows([
[0, 4],
[1, 8],
[2, 2],
[3, 6],
[4, 2],
[5, 5],
[6, 4],
[7, 7],
[8, 7],
[9, 3],
[10, 4]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
// create calculated column that contains only data points where x = y
type: 'number',
calc: function (dt, row) {
var x = dt.getValue(row, 0);
var y = dt.getValue(row, 1);
return (x == y) ? y : null;
}
}]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(view, {
height: 400,
width: 600,
interpolateNulls: true,
series: {
0: {
// options for base data set
},
1: {
// options for set with connected lines
pointSize: 0,
lineWidth: 1,
visibleInLegend: false,
enableInteractivity: false
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});