<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<p>
<label>Введите значения X и Y:</label>
<p>X значения:<br>
<input id="xvalues" style="width:95%" type="text"
value="50,60,70,80,90,100,110,120,130,140,150"></p>
<p>Y значения:<br>
<input id="yvalues" style="width:95%" type="text"
value="7,8,8,9,9,9,10,11,14,14,15"></p>
<button onclick='plot("scatter")'>Разброс</button>
<button onclick='plot("lines")'>Нарисовать линии</button>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
function plot(type) {
var xArray = document.getElementById("xvalues").value.split(',');
var yArray = document.getElementById("yvalues").value.split(',');
var mode = "lines";
if (type == "scatter") {mode = "markers"}
Plotly.newPlot("myPlot", [{x:xArray, y:yArray, mode:mode, type:"scatter"}]);
}
</script>
</body>
</html>