Первоначально опубликовано на webdeasy.de !
Диаграммы в реальном времени могут отображать данные в режиме реального времени. Это означает, что данные постоянно обновляются, чтобы всегда отображать текущую диаграмму. Чтобы создать диаграмму в реальном времени, мы используем JavaScript и API Google Hard.
Эти живые диаграммы часто используются на информационных панелях, чтобы показать события, например, температура или цены. Разнообразные области применения, и они действительно хорошо выглядят. Посмотреть на себя!
Я показываю вам здесь, что вы можете создать эту диаграмму в реальном времени. Он обновляется каждые 250 миллисекунд и показывает (в нашем примере) случайные данные. В продуктивном использовании он может читать и отображать данные из базы данных или непосредственно с датчика.
Это не все. Та же концепция может быть передана 1: 1 на другие диаграммы, среди прочего:
- Географическая карта
- Барная карта
- Линейная диаграмма
- Круговая диаграмма
- Диаграмма пончиков
- График
- Список всех возможных графиков
Google Chart API это свободно Сервис от Google, который позволяет нам отображать различные диаграммы и графики на нашем веб -сайте или в веб -приложении.
Кроме того, диаграммы предлагают интерактивные функции для пользователя. Например, всплывающее окно со значениями текущего элемента может отображаться при падении.
Данные отображаются статически. Но мы разрабатываем свою собственную систему вокруг нее, чтобы мы могли обновить данные в определенном интервале и, таким образом, получить нашу диаграмму в реальном времени. Затем данные обновляются (почти) живут в режиме реального времени, и желаемый эффект достигается.
API диаграммы Google должен быть включен через этот тег сценария. Местный хостинг здесь невозможно, потому что Условия обслуживания Google запретить это.
Далее нам нужно простое div Анкет Там Google API позже рисует диаграмму как SVG или VML.
В следующем коде мы загружаем пакет линейных диаграмм из пакетов диаграмм Google. Тогда мы называем функцию DraitChart () как обратный вызов. Это будет выполнено, как только API будет полностью загружен.
// load current chart package
google.charts.load("current", {
packages: ["corechart", "line"]
});
// set callback function when api loaded
google.charts.setOnLoadCallback(drawChart);
Затем мы создаем объект с меткой (не показан) и данных по умолчанию для диаграммы. Нам также нужен массив с опциями. Здесь мы установили название и метку оси.
Все параметры можно найти подробно в Документация Google Chart Анкет
Затем мы выбираем наш контейнер HTML и путем chart.draw (data, options) Нарисуйте диаграмму.
function drawChart() {
// create data object with default value
let data = google.visualization.arrayToDataTable([
["Year", "CPU Usage"],
[0, 0]
]);
// create options object with titles, colors, etc.
let options = {
title: "CPU Usage",
hAxis: {
title: "Time"
},
vAxis: {
title: "Usage"
}
};
// draw chart on load
let chart = new google.visualization.LineChart(
document.getElementById("chart_div")
);
chart.draw(data, options);
}
С предыдущим кодом таблица теперь уже нарисована, и мы можем первым взглянуть на нее.
Теперь мы приходим к самой важной части, почему вы здесь вообще – динамическое обновление данных. Вот как мы «создаем» нашу диаграмму в реальном времени.
Мы вставляем новые данные в диаграмму с интервалом 250 мс.
Переменная Индекс используется для вставки другого элемента в качестве линии и не имеет дальнейшего значения. В этом примере я генерирую случайные числа, которые следует понимать как использование ЦП. Здесь вы должны вставить свои собственные данные в строке 5.
Вы можете сделать это, например, с помощью запроса AJAX. Таким образом, вы можете использовать PHP и Класс базы данных Чтобы прочитать данные непосредственно из вашей базы данных, или вы можете написать свой собственный Restapi, например, с Node.js Анкет
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 random = Math.random() * 30 + 20;
data.addRow([index, random]);
chart.draw(data, options);
index++;
}, 250);
Здесь теперь снова полный код в одном файле. Для ясности я упаковал все в один файл. Но вы должны поместить JavaScript и CSS в дополнительные файлы.
Document
Готовый! В этом примере у нас есть линейная диаграмма в качестве диаграммы в реальном времени, но код работает так же с другими типами диаграмм. Вам часто нужно только скорректировать Параметры и данные структура.
Оригинал: “https://dev.to/webdeasy/programming-real-time-charts-graphs-with-javascript-29bi”