├── estilo.css ├── index.html └── script.js /estilo.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: century gothic; 5 | } 6 | 7 | body { 8 | background-color: #ededed 9 | } 10 | 11 | #form-param { 12 | padding: 20px; 13 | background-color: #fff; 14 | display: flex; 15 | } 16 | 17 | #form-param .container { 18 | flex: 2; 19 | } 20 | #form-param .buttons { 21 | flex: 1; 22 | } 23 | 24 | input { 25 | padding: 9px; 26 | margin: 6px; 27 | width: 42% 28 | } 29 | 30 | button{ 31 | border: none; 32 | padding: 9px; 33 | display: block; 34 | margin: 6px 35 | } 36 | 37 | button:first-child { 38 | background-color: #48e; 39 | color: #fff 40 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Graficos 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 |
19 | 20 | 21 |
22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.querySelector(".addParam").addEventListener("click",addParam); 2 | document.querySelector(".showResults").addEventListener("click",showResults); 3 | 4 | var parametros = []; 5 | var valores = []; 6 | 7 | function addParam(){ 8 | let html = document.querySelector(".container").innerHTML; 9 | let newHTML = '
'; 10 | document.querySelector(".container").innerHTML = html + newHTML; 11 | } 12 | 13 | 14 | function showResults(){ 15 | for (var i = 0; i < document.querySelectorAll('.parametro').length ; i++) { 16 | parametros.push(document.querySelectorAll('.parametro')[i].value); 17 | valores.push(parseInt(document.querySelectorAll(".valor")[i].value)); 18 | } 19 | var data = [{ 20 | x: parametros, 21 | y: valores, 22 | type: "linear" 23 | }]; 24 | Plotly.newPlot("grafico",data); 25 | } --------------------------------------------------------------------------------