JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<body>
<input type="text" id="enter1" placeholder="Значение выборки">
<input type="text" id="enter2" placeholder="Процент">
<input type="button" id="button" value="Построить">
<br> <br> <br>
<div class="chart1"> </div>
<div class="chart2"> </div>
<div id="chart3"> </div>
</body>
CSS
table {
width: 100%;
border-collapse: collapse;
border: 1px solid grey;
}
tr {
border: 1px solid grey;
}
td {border: 1px solid grey;}
JavaScript
var u1 = [];
var u2 = [];
var a = [];
var n = [];
var x = [];
var xn = [];
var j = 0 ;
var l = 0 ;
function getRandomArbitrary(min, max) {
return Math.random()*(max-min)+min;
}
function job() {
for (var i = 0; i<Number(document.getElementById("enter1").value); i++)
{
var s = Number(document.getElementById("enter1").value);
l = s;
var k = Number(document.getElementById("enter2").value)/100;
u1[i] = getRandomArbitrary(0, 3);
u2[i] = getRandomArbitrary(0, 3);
a[i] = getRandomArbitrary(-1, 1);
x[i] = Math.sin(u1[i])+Math.cos(u2[i]);
n[i] = x[i]*k*a[i];
xn[i] = x[i] + n[i];
}
var table = document.createElement("table");
for (var y = 0; y <= s; y++) {
var tr = table.insertRow(y);
if (y == 0) {
tr.insertCell(0).innerHTML = "u1";
tr.insertCell(1).innerHTML = "u2";
tr.insertCell(2).innerHTML = "xn";
tr.insertCell(3).innerHTML = "x";
}
else {
for (var i = 0; i < s; i++) {
tr.insertCell(0).innerHTML = u1[j];
tr.insertCell(1).innerHTML = u2[j];
tr.insertCell(2).innerHTML = xn[j];
tr.insertCell(3).innerHTML = x[j];
j++;
break;
}
}
}
document.body.appendChild(table);
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
for (var i = 0; i<l; i++)
{
data.addRows([
[u1[i], x[i]]
]);
}
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
backgroundColor: '#f1f8e9'
};
var chart = new google.visualization.LineChart(document.getElementById('chart3'));
chart.draw(data, options);
...