Chart.js로 실시간 스트리밍 데이터 그래프

소개



실시간 스트리밍 데이터를 시각화하고 싶고 그래프 라이브러리를 찾고 있다면 상당히 많이 나왔습니다 1
  • APEXCHARTS.JS
  • Epoch
  • HIGHCHARTS
  • amCharts
  • Rickshaw
  • Chart.js
  • billboard.js

  • Chart.js



    이번은, Chart.js 로 가는 것에. 이유는 이 플러그인가 좋았기 때문에. 사이트 설명도 이해하기 쉽습니다.



    우선 이동



    copipe로 움직여야합니다.

    real-time-chart.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js"></script>
    </head>
    
    <body>
    
    <canvas id="myChart"></canvas>
    
    <script>
    // CHART
    var chartColors = {
      red: 'rgb(255, 99, 132)',
      orange: 'rgb(255, 159, 64)',
      yellow: 'rgb(255, 205, 86)',
      green: 'rgb(75, 192, 192)',
      blue: 'rgb(54, 162, 235)',
      purple: 'rgb(153, 102, 255)',
      grey: 'rgb(201, 203, 207)'
    };
    
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'line',
      data: {
        datasets: [{
          label: 'Power',
          borderColor: chartColors.red,
          fill: false,
          data: []
        },
        {
           label: 'Temperature',
           borderColor: chartColors.blue,
           fill: false,
           cubicInterpolationMode: 'monotone',
           data: []
        },
        {
          label: 'Humidity',
          borderColor: chartColors.yellow,
          fill: false,
          cubicInterpolationMode: 'monotone',
          data: []
        }]
      },
      options: {
        legend: {
          position: 'bottom'
        },
        scales: {
          xAxes: [{
            type: 'realtime',
            realtime: {
              delay: 2000,
              onRefresh: function(chart) {
                chart.data.datasets.forEach(function(dataset) {
                  dataset.data.push({
                    x: Date.now(),
                    y: Math.random()
                  });
                });
              }
            }
          }]
        }
      }
    });
    </script>
    </body>
    </html>
    
    

    실제 사용법



    이번에는 실제 데이터가 이런 느낌이었기 때문에
    {psn: 1, time: "1588382630511", name: "sensor1", amp: 4.97, tem: 6.72, hum: 8.22}
    
    forEach 아니고, 다음과 같이 했다. dequeue() 에서 배열에서 위의 JSON 데이터를 onRefresh 때마다 하나 오는 느낌
    
            realtime: {
              delay: 3000,
              onRefresh: function(chart) {
                let sensorData = dequeue(); // {psn: 1, time: "1588382630511", name: "sensor1", amp: 4.97, tem: 6.72, hum: 8.22}
                let timeFromSensor = new Date(parseInt(sensorData.time));
                // Power
                chart.data.datasets[0].data.push({
                  x: timeFromSensor,
                  y: sensorData.amp
                });
                // Temperature
                chart.data.datasets[1].data.push({
                  x: timeFromSensor,
                  y: sensorData.tem
                });
                // Humidity
                chart.data.datasets[2].data.push({
                  x: timeFromSensor,
                  y: sensorData.hum
                });
              }
            }
    



    아직도 있다. 이 요약 좋은

    좋은 웹페이지 즐겨찾기