JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
JavaScript
var data;
var chart;
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = {
"cols": [
{ "label": "Interval", "type": "number" },
{ "label": "Avg-8h", "type": "number" },
{ "label": "Avg-4h", "type": "number" }],
"rows": [
{ "c": [{ "v": 1 }, { "v": 0.2275 }, { "v": 0.1527 }] },
{ "c": [{ "v": 2 }, { }, { "v": 0.0664 }] },
{ "c": [{ "v": 3}, { "v": 0.0624 }, { "v": 0.0495 }] },
{ "c": [{ "v": 5 }, { }, { "v": 0.0555 }] },
{ "c": [{ "v": 6 }, { "v": 0.109 }, { "v": 0.1112 }] },
{ "c": [{ "v": 7 }, { }, { "v": 0.1403 }] },
{ "c": [{ "v": 8 }, { "v": 0.1403 }, { }] }
]
};
for(var i = 0; i < data.rows.length; i++) {
if(data.rows[i].c[1].v == undefined) {
data.rows[i].c[1].v = (data.rows[i - 1].c[1].v + data.rows[i + 1].c[1].v) / 2;
}
}
var table = new google.visualization.DataTable(data);
var options = {
legend: 'none',
pointSize: 5,
series: {0:{pointSize: 0}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(table, options);
}