Выводить рандомные значения в графиках

180
27 мая 2018, 01:30

Как сделать чтоб на странице выводились рандомные значения в графиках каждые 5 секунд ?

<html lang='en' class=''>
 <head><script 
 src='//static.codepen.io/assets/editor/live/console_runner- 
 ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js'> 
 </script><script 
src='//static.codepen.io/assets/editor/live/css_live_reload_init- 
890dc39bb89183d4642d58b1ae5376a0193342f9aed88ea04330dc14c8d52f55.js'> 
</script><meta charset='UTF-8'><meta name="robots" content="noindex"> 
<link rel="shortcut icon" type="image/x-icon" 
href="//static.codepen.io/assets/favicon/favicon- 
8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" 
/><link rel="mask-icon" type="" 
 href="//static.codepen.io/assets/favicon/logo-pin- 
 f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" 
 color="#111" /><link rel="canonical" 
  href="https://codepen.io/KarimPremji/pen/bgNzjW" />
   <link rel='stylesheet prefetch' 
   href='https://cdnjs.cloudflare.com/ajax/libs/twitter- 
   bootstrap/3.3.7/css/bootstrap.min.css'>
   <style class="cp-pen-styles">.pressureInput{
   border: 0;
   color: blue;
   }
   .btn{
   margin: 10px;
   }
  .center{
  width:200px;
  margin:0 auto;
  text-align:left;
  }
  well{
  height: 0px;
    }
  html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
  color: green;
  }</style></head><body>
  <div class="container-fluid">
  <div class="row">
  <div class="col-md-6">
  <div  class="text-center">
  <h1> Запись графиков </h1>    
  <button class="btn btn-primary" onclick="graphMe()">Вывод</button>
  </div>
  <div style="; margin-left: auto; margin-right: auto">
  <ul class="text-center">
    <li>График1:<input class="text-center pressureInput" 
   name="staticPressure" type="number" id="staticPressure">Y1<input 
   class="text-center pressureInput" name="staticUSGPM" type="text" 
    id="staticUSGPM">Название1</li>
    <li>График2:<input class="text-center pressureInput" name="res1" 
    type="number" id="res1">Y2<input class="text-center pressureInput" 
     name="res1USGPM" type="text" id="res1USGPM">Название2</li>
    <li>График3:<input class="text-center pressureInput" name="res2" 
     type="number" id="res2">Y3<input class="text-center 
      pressureInput" name="res2USGPM" type="text" 
      id="res2USGPM">Название3</li>
    <li>График4:<input class="text-center pressureInput" name="res3" 
      type="number" id="res3">Y4<input class="text-center 
      pressureInput" name="res3USGPM" type="text" 
      id="res3USGPM">Название4</li>
    </ul>
     </div> 
     </div>
      <div class="col-md-6">
       <canvas id="myChart" width="400" height='auto'></canvas>
       </div>
        </div>
    <script 
    src='https://cdnjs.cloudflare.com
    /ajax/libs/Chart.js/2.4.0/Chart.min.js'>
     </script>
   <script >
  var static = document.getElementById("staticPressure").value;
  var res1 = document.getElementById("res1").value;
  var res2 = document.getElementById("res2").value;
  var res3 = document.getElementById("res3").value;
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [
    0, 250, 500, 750
    ],
    datasets: [{
        label: 'USGPM VS PSI',
   data: [
     10, 200, 500, 1000
   ],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
     },
         options: {
          title: {
        display: true,
        text: 'График работы насосов'
    },
                legend: {
        display: true,
       // text: 'WATER FLOW TEST GRAPH',
                  position: 'bottom'
    },
    scales: {  
      xAxes: [{
       // type: 'logarithmic',
        position: 'bottom',
        ticks:{
         min: 0,
         max: 1500
        }
      }],
        yAxes: [{
            ticks: {
                beginAtZero:true
            },
                scaleLabel: {
                   display: true,
                   labelString: 'PRESSURE (PSI)'
                              }
                  }]
              }
         }
      });

     function graphMe(){
   var static = document.getElementById("staticPressure").value;
   var staticGPM = document.getElementById("staticUSGPM").value;
   myChart.data.datasets[0].data[0] = static;
   myChart.data.labels[0] = staticGPM;  
   var res1 = document.getElementById("res1").value;
   var res1GPM = document.getElementById("res1USGPM").value;
   myChart.data.datasets[0].data[1] = res1;
   myChart.data.labels[1] = res1GPM;    
   var res2 = document.getElementById("res2").value;
   var res2GPM = document.getElementById("res2USGPM").value;  
   myChart.data.datasets[0].data[2] = res2;
   myChart.data.labels[2] = res2GPM;    
   var res3 = document.getElementById("res3").value; 
   var res3GPM = document.getElementById("res3USGPM").value; 
   myChart.data.datasets[0].data[3] = res3;
   myChart.data.labels[3] = res3GPM;    
   myChart.update();
   }

    </script>
    </body></html>
Answer 1

var static = document.getElementById("staticPressure").value; 
var res1 = document.getElementById("res1").value; 
var res2 = document.getElementById("res2").value; 
var res3 = document.getElementById("res3").value; 
var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
  type: 'line', 
  data: { 
    labels: [ 
      0, 250, 500, 750 
    ], 
    datasets: [{ 
      label: 'USGPM VS PSI', 
      data: [ 
        10, 200, 500, 1000 
      ], 
      backgroundColor: [ 
        'rgba(255, 99, 132, 0.2)', 
        'rgba(54, 162, 235, 0.2)', 
        'rgba(255, 206, 86, 0.2)', 
        'rgba(75, 192, 192, 0.2)', 
        'rgba(153, 102, 255, 0.2)', 
        'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
        'rgba(255,99,132,1)', 
        'rgba(54, 162, 235, 1)', 
        'rgba(255, 206, 86, 1)', 
        'rgba(75, 192, 192, 1)', 
        'rgba(153, 102, 255, 1)', 
        'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
    }] 
  }, 
  options: { 
    title: { 
      display: true, 
      text: 'График работы насосов' 
    }, 
    legend: { 
      display: true, 
      // text: 'WATER FLOW TEST GRAPH', 
      position: 'bottom' 
    }, 
    scales: { 
      xAxes: [{ 
        // type: 'logarithmic', 
        position: 'bottom', 
 
        ticks: { 
          min: 0, 
          max: 1500 
        } 
      }], 
      yAxes: [{ 
        ticks: { 
          beginAtZero: true 
        }, 
        scaleLabel: { 
          display: true, 
          labelString: 'PRESSURE (PSI)' 
        } 
      }] 
    } 
 
  } 
}); 
 
 
function graphMe() { 
  var static = document.getElementById("staticPressure").value; 
  var staticGPM = document.getElementById("staticUSGPM").value; 
  myChart.data.datasets[0].data[0] = static; 
  myChart.data.labels[0] = staticGPM; 
 
  var res1 = document.getElementById("res1").value; 
  var res1GPM = document.getElementById("res1USGPM").value; 
  myChart.data.datasets[0].data[1] = res1; 
  myChart.data.labels[1] = res1GPM; 
 
  var res2 = document.getElementById("res2").value; 
  var res2GPM = document.getElementById("res2USGPM").value; 
  myChart.data.datasets[0].data[2] = res2; 
  myChart.data.labels[2] = res2GPM; 
 
  var res3 = document.getElementById("res3").value; 
  var res3GPM = document.getElementById("res3USGPM").value; 
  myChart.data.datasets[0].data[3] = res3; 
  myChart.data.labels[3] = res3GPM; 
 
  myChart.update(); 
} 
 
getRandomArbitrary = (min, max) => Math.random() * (max - min) + min; 
 
var timerId = setInterval(function() { 
  let data = myChart.data.datasets[0].data; 
  data.forEach((num, index) => { 
    return data[index] = getRandomArbitrary(0, 1000);; 
  }); 
  myChart.update(); 
}, 5000);
.pressureInput { 
  border: 0; 
  color: blue; 
} 
 
.btn { 
  margin: 10px; 
} 
 
.center { 
  width: 200px; 
  margin: 0 auto; 
  text-align: left; 
} 
 
well { 
  height: 0px; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  margin: 0px; 
  color: green; 
}
<div class="container-fluid"> 
  <div class="row"> 
    <div class="col-md-6"> 
      <div class="text-center"> 
        <h1> Запись графиков </h1> 
        <button class="btn btn-primary" onclick="graphMe()">Вывод</button> 
      </div> 
      <div style="; margin-left: auto; margin-right: auto"> 
        <ul class="text-center"> 
          <li>График1:<input class="text-center pressureInput" name="staticPressure" type="number" id="staticPressure">Y1<input class="text-center pressureInput" name="staticUSGPM" type="text" id="staticUSGPM">Название1</li> 
 
          <li>График2:<input class="text-center pressureInput" name="res1" type="number" id="res1">Y2<input class="text-center pressureInput" name="res1USGPM" type="text" id="res1USGPM">Название2</li> 
 
          <li>График3:<input class="text-center pressureInput" name="res2" type="number" id="res2">Y3<input class="text-center  
      pressureInput" name="res2USGPM" type="text" id="res2USGPM">Название3</li> 
 
          <li>График4:<input class="text-center pressureInput" name="res3" type="number" id="res3">Y4<input class="text-center  
      pressureInput" name="res3USGPM" type="text" id="res3USGPM">Название4</li> 
 
        </ul> 
      </div> 
    </div> 
 
    <div class="col-md-6"> 
      <canvas id="myChart" width="400" height='auto'></canvas> 
 
    </div> 
  </div> 
 
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js'></script>

READ ALSO
Событие после полной загрузки HTML5 видео
javascript

Событие после полной загрузки HTML5 видео

Есть HTML страница на которой плавно по таймеру появляются элементы (jQuery):

 137
Работа скрипта в разных браузерах
javascript

Работа скрипта в разных браузерах

В общем есть такой скрипт, листающий страницу по скролу к якорямРаботает в Хроме, но не работает в ОгнеЛисе

 166
Как изменить радиус градиента
javascript

Как изменить радиус градиента

Возник такой вопроскак изменить радиус градиента через js???

 142
Отладка скриптов без Chrome
javascript

Отладка скриптов без Chrome

Есть скрипт выполняющий Ajax запросыДля его работы не нужен никакой интерфейс в браузере, но зато нужен node сервер

 174