1

Как сделать чтоб на странице выводились рандомные значения в графиках каждые 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>
6
  • 1
    Можете добавить еще часть кода, так как в коде используются блоки с id res1, res2 и т.д., из-за них код не работает до конца. 21 мая 2018 в 5:21
  • Да, сейчас сброшу
    – Karter
    21 мая 2018 в 5:46
  • Сбросил все полностью.
    – Karter
    21 мая 2018 в 6:02
  • Возможно ли здесь просто выводить рандомные числа и чтоб именно этот скрипт обновлялся с интервалом в 5 секунд ?
    – Karter
    21 мая 2018 в 6:03
  • Просто в интернете я не нашел толкового простенького скрипта который будет обновлять другой скрипт по его ID
    – Karter
    21 мая 2018 в 6:05

1 ответ 1

2

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>

8
  • А есть универсальный скрипт для обновления других скриптов по его ID ? Чтоб не страница полностью перезагружалась (обновлялась ) а отдельные скрипты .
    – Karter
    21 мая 2018 в 6:20
  • Не совсем понял, что вы имеете в виду, другие графики обновлять? 21 мая 2018 в 6:22
  • Графики или просто поля с заданными числами . Имеется ввиду чтоб не вся страница перезагружалась , а обновлялся только конкретный скрипт .
    – Karter
    21 мая 2018 в 6:25
  • Например если б не было скрипта для вывода рандомных чисел и с базы данных я записываю какие-то данные то чтоб я не перегружал страницу с помощью F5 ,а например обновлялся только один скрипт каждые 5 секунд и не важно записывается информация в базу данных или нет .
    – Karter
    21 мая 2018 в 6:28
  • 1
    Универсального скрипта под такие цели скорее всего нет, скорее всего придется делать под каждую задачу свой. Если у вас есть еще какие-то вопросы, то лучше их не писать в комментарии, а создать новый вопрос. Если по этому вопросу вас все устраивает, то можете примять ответ, или ждать другого 21 мая 2018 в 6:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.