JavaScript로 실시간 차트 및 그래프 프로그래밍

실시간 차트 및 그래프를 사용하면 대시보드 또는 인포보드를 개선하고 실시간으로 최신 데이터를 가져와 표시할 수 있습니다. 사용자를 항상 최신 상태로 유지하는 좋은 기능입니다.

I published this tutorial on my blog. I would be very happy if you read the post there! *click here* 💜

이러한 실시간 차트는 종종 대시보드에서 예를 들어 개발을 표시하는 데 사용됩니다. 온도 또는 가격. 이러한 JavaScript 차트에는 다양한 용도가 있습니다. 이 자습서에서는 다음 보기를 재현합니다.


여기에서 이 실시간 차트를 만드는 방법을 보여드리겠습니다. 100밀리초마다 업데이트되며 임의의 데이터를 표시합니다. 생산적인 사용에서는 데이터베이스 또는 센서에서 직접 데이터를 읽고 표시할 수 있습니다.

하지만 그게 다가 아닙니다. 최소한의 조정으로 동일한 코드를 다른 많은 다이어그램 유형에 적용할 수 있습니다. 사소한 조정만 필요합니다. 가능한 다이어그램 목록은 다음과 같습니다.

👉 Google 차트 API – 짧은 소개

Google Chart API은 웹사이트 또는 웹 애플리케이션에 다양한 차트, 그래프 및 다이어그램을 표시할 수 있는 Google의 무료 서비스입니다.

또한 차트는 사용자를 위한 대화형 기능을 제공합니다. 예를 들어 마우스를 올리면 현재 요소의 값이 포함된 팝업이 표시될 수 있습니다.

데이터는 정적으로 표시됩니다. 그러나 우리는 특정 간격으로 데이터를 업데이트할 수 있도록 자체 시스템을 개발하여 실시간 차트를 얻습니다. 그러면 데이터가 실시간으로 (준) 업데이트되고 원하는 효과가 생성됩니다.

1. 구글 차트 API 포함

Google Chart API는 이 스크립트 태그를 통해 포함되어야 합니다. Google’s Terms of Service에서 금지하므로 여기에서는 로컬 호스팅이 불가능합니다. 닫기 script 태그 앞에 body 태그를 삽입하기만 하면 됩니다.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

👉 2. HTML 컨테이너 생성

다음으로 Google API가 나중에 SVG 또는 VML로 차트를 그릴 단순div이 필요합니다.

<div id="chart_div"></div>

👉 3. Google Chart API 초기화 및 구성

다음 코드에서는 Google 차트 패키지에서 라인 차트 패키지를 로드합니다. 그런 다음 drawChart() 함수를 콜백으로 호출합니다. API가 완전히 로드되면 실행됩니다.

// load current chart package
google.charts.load("current", {
  packages: ["corechart", "line"]
});
// set callback function when api loaded
google.charts.setOnLoadCallback(drawChart);

다음으로 레이블(표시되지 않음)과 차트의 기본 데이터가 있는 개체를 만듭니다. 옵션이 있는 배열도 필요합니다. 여기에서 제목과 축 레이블을 설정합니다.

All parameters can be found in detail in the Google Chart documentation.

그런 다음 HTML 컨테이너를 선택하고 chart.draw(data, options) 차트를 그리도록 합니다.

function drawChart() {
  // create data object with default value
  let data = google.visualization.arrayToDataTable([
    ['Time', 'CPU Usage', 'RAM'],
    [0, 0, 0],
  ]);
  // create options object with titles, colors, etc.
  let options = {
    title: "CPU Usage",
    hAxis: {
      textPosition: 'none',
    },
    vAxis: {
      title: "Usage"
    }
  };
  // draw chart on load
  let chart = new google.visualization.LineChart(
    document.getElementById("chart_div")
  );
  chart.draw(data, options);
}

이전 코드를 사용하면 이제 테이블이 이미 그려져 있으므로 먼저 볼 수 있습니다.

👉 4. 실시간 데이터 업데이트(라이브)

이제 우리는 여러분이 무엇보다 여기 있는 이유 중 가장 중요한 부분인 실시간 데이터의 동적 실시간 업데이트에 도달했습니다. 이것이 우리가 실시간 차트를 "만드는"방법입니다. 100ms(초당 10회) 간격으로 차트에 새 데이터를 추가합니다.

변수index는 다른 요소를 행으로 삽입하는 데 사용되며 더 이상의 의미는 없습니다. 변수maxDatas는 표시되는 최대 데이터 행 수를 지정합니다. 이렇게 하면 항상 50개의 최신 데이터 레코드만 표시되는 효과가 생성됩니다.

이 예에서는 CPU 사용량 및 RAM 사용량으로 이해되어야 하는 난수를 생성합니다. 여기에서 8행과 9행에 자신의 데이터를 삽입해야 합니다. 예를 들어 Ajax request 을 사용하여 이 작업을 수행할 수 있습니다. 따라서 PHP와 adatabase class를 사용하여 데이터베이스에서 직접 데이터를 읽거나 자체 RestAPI를 작성할 수 있습니다. Node.js .

// max amount of data rows that should be displayed
let maxDatas = 50;
// interval for adding new data every 250ms
let index = 0;
setInterval(function () {
  // instead of this random, you can make an ajax call for the current cpu usage or what ever data you want to display
  let randomCPU = Math.random() * 20;
  let randomRAM = Math.random() * 50 + 20;
  if (data.getNumberOfRows() > maxDatas) {
    data.removeRows(0, data.getNumberOfRows() - maxDatas);
  }
  data.addRow([index, randomCPU, randomRAM]);
  chart.draw(data, options);
  index++;
}, 100);

내 블로그에서 전체 코드를 찾을 수 있습니다(HTML, CSS 및 JS 포함): JavaScript Real Time Charts on webdeasy.de

👉 다른 차트 유형 사용(도넛, 막대, 게이지 등)

처음에 이미 발표한 바와 같이 데이터를 약간의 노력으로 다른 차트로 전송할 수도 있습니다.

이 예에서 일부 줄을 조정해야 합니다(내blog post에서 어떤 줄을 확인하십시오)

// load current chart package
google.charts.load('current', {
  packages: ['corechart', 'gauge'],
});
// set callback function when api loaded
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  // create data object with default value
  let data = google.visualization.arrayToDataTable([
    ['CPU Usage', 'RAM'],
    [35, 50],
  ]);
  // create options object with titles, colors, etc.
  let options = {
    title: 'CPU Usage',
    hAxis: {
      textPosition: 'none',
    },
    vAxis: {
      title: 'Usage',
    },
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5,
  };
  // draw chart on load
  let chart = new google.visualization.Gauge(
    document.getElementById('chart_div')
  );
  chart.draw(data, options);
  // max amount of data rows that should be displayed
  let maxDatas = 50;
  // interval for adding new data every 250ms
  let index = 0;
  setInterval(function () {
    // instead of this random, you can make an ajax call for the current cpu usage or what ever data you want to display
    let randomCPU = Math.random() * 20 + 20;
    let randomRAM = Math.random() * 50 + 40;
    if (data.getNumberOfRows() > maxDatas) {
      data.removeRows(0, data.getNumberOfRows() - maxDatas);
    }
    data.setValue(0, 0, randomCPU);
    data.setValue(0, 1, randomRAM);
    chart.draw(data, options);
    index++;
  }, 1000);
}

막대 차트

// load current chart package
google.charts.load('current', {
  packages: ['corechart', 'line'],
});
// set callback function when api loaded
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  // create data object with default value
  let data = google.visualization.arrayToDataTable([
    ['Unit', 'Value', { role: 'style' }],
    ['CPU Usage', 1, 'gold'],
    ['RAM', 1, 'silver'],
  ]);
  // create options object with titles, colors, etc.
  let options = {
    title: 'CPU Usage',
    hAxis: {
      textPosition: 'none',
    },
    vAxis: {
      title: 'Usage',
    },
  };
  // draw chart on load
  let chart = new google.visualization.BarChart(
    document.getElementById('chart_div')
  );
  chart.draw(data, options);
  // max amount of data rows that should be displayed
  let maxDatas = 50;
  // interval for adding new data every 250ms
  let index = 0;
  setInterval(function () {
    // instead of this random, you can make an ajax call for the current cpu usage or what ever data you want to display
    let randomCPU = Math.random();
    let randomRAM = Math.random() * 10;
    if (data.getNumberOfRows() > maxDatas) {
      data.removeRows(0, data.getNumberOfRows() - maxDatas);
    }
    data.setValue(1, 1, randomCPU);
    data.setValue(1, 1, randomRAM);
    chart.draw(data, options);
    index++;
  }, 1000);
}

파이/도넛 차트

// load current chart package
google.charts.load('current', {
  packages: ['corechart', 'line'],
});
// set callback function when api loaded
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  // create data object with default value
  let data = google.visualization.arrayToDataTable([
    ['Unit', 'Value'],
    ['CPU Usage', 1],
    ['RAM', 1],
  ]);
  // create options object with titles, colors, etc.
  let options = {
    title: 'CPU Usage',
    hAxis: {
      textPosition: 'none',
    },
    vAxis: {
      title: 'Usage',
    },
  };
  // draw chart on load
  let chart = new google.visualization.PieChart(
    document.getElementById('chart_div')
  );
  chart.draw(data, options);
  // max amount of data rows that should be displayed
  let maxDatas = 50;
  // interval for adding new data every 250ms
  let index = 0;
  setInterval(function () {
    // instead of this random, you can make an ajax call for the current cpu usage or what ever data you want to display
    let randomCPU = Math.random();
    let randomRAM = Math.random();
    if (data.getNumberOfRows() > maxDatas) {
      data.removeRows(0, data.getNumberOfRows() - maxDatas);
    }
    data.setValue(1, 1, randomCPU);
    data.setValue(1, 1, randomRAM);
    chart.draw(data, options);
    index++;
  }, 1000);
}

원형 차트를 도넛형 차트로 바꾸려면 값이 pieHole인 매개변수0.2를 options 개체에 추가하기만 하면 됩니다.

Google Chart API는 훨씬 더 많은 일을 할 수 있습니다! 포괄적인 설명서here를 찾을 수 있습니다.

You liked this post? On webdeasy.de you can find more stuff like that! 🥵