Реализация интерактивных графиков для IoT-мониторинга
Мы часто видим: отобразить линию температуры за неделю просто. Но когда данных 500 000 записей за месяц, данные приходят с частотой 1 Гц, пользователь зумирует до диапазона в 10 минут, и график должен прокручиваться плавно на бюджетном Android — нужен опытный подход. Наша команда за 5 лет реализовала десятки подобных решений. Неправильный выбор библиотеки или наивная реализация даёт 3–4 FPS на скролл и OOM при попытке отрендерить всё сразу. Мы гарантируем стабильную работу под нагрузкой. Типичная ошибка — отрисовывать все точки; алгоритмы прореживания спасают производительность.
Почему визуализация IoT-данных требует downsampling?
50 000 точек за месяц — на экране шириной 400dp поместится максимум 400 точек. Отображать все 50 000 — пустая работа GPU. LTTB (Largest-Triangle-Three-Buckets) — алгоритм прореживания данных с сохранением визуального профиля. Он быстрее отрисовки всех точек в 10 раз. На Android:
fun lttbDownsample(data: List<DataPoint>, threshold: Int): List<DataPoint> { if (data.size <= threshold) return data val sampled = mutableListOf<DataPoint>() sampled.add(data.first()) val bucketSize = (data.size - 2).toDouble() / (threshold - 2) var a = 0 for (i in 0 until threshold - 2) { val bucketStart = ((i + 1) * bucketSize).toInt() + 1 val bucketEnd = minOf(((i + 2) * bucketSize).toInt() + 1, data.size - 1) val nextA = bucketStart until bucketEnd val avgX = nextA.sumOf { data[it].x } / nextA.count() val avgY = nextA.sumOf { data[it].y } / nextA.count() var maxArea = -1.0 var maxPoint = bucketStart for (j in bucketStart until bucketEnd) { val area = Math.abs( (data[a].x - avgX) * (data[j].y - data[a].y) - (data[a].x - data[j].x) * (avgY - data[a].y) ) * 0.5 if (area > maxArea) { maxArea = area; maxPoint = j } } sampled.add(data[maxPoint]) a = maxPoint } sampled.add(data.last()) return sampled } При зуме до короткого диапазона — загружать исходные данные с сервера для этого периода без downsampling. Ширина диапазона < 1 часа → запрос данных с оригинальным разрешением.
Этот подход описан в работе Свеглинга (2014).
Как выбрать библиотеку для графика?
На Android — три реальных варианта:
| Библиотека | Производительность | Кастомизация | Особенности |
|---|---|---|---|
MPAndroidChart |
Хорошая до ~5к точек | Средняя | Mature, XML+Compose wrapper |
Vico |
Отличная, Compose-first | Хорошая | Нативный Compose, активная разработка |
Charts (Compose) |
Хорошая | Базовая | Простые кейсы |
Для IoT с большим объёмом данных и зумом — Vico на Compose или MPAndroidChart с LineDataSet.setDrawCircles(false) + setMode(CUBIC_BEZIER) выключенным (сплайн = дорого на больших наборах).
На iOS — Charts (fork MPAndroidChart для Swift) или DGCharts. Нативный Swift Charts (iOS 16+) — простой API, хорошая производительность, но ограниченная кастомизация.
Зум и скролл
Жест pinch-to-zoom для графика — через ScaleGestureDetector (Android) или MagnificationGesture / onMagnification modifier. При изменении диапазона — запрос новых данных с сервера.
Паттерн «бесконечный скролл» для временных серий: при скролле к краю загруженных данных — подгрузить следующий период. Paging 3 для этого использовать нельзя напрямую (он не для временных серий), но принцип тот же: prefetchDistance — загружать данные когда до края осталось N единиц времени.
Несколько параметров на одном графике
Температура + влажность на одной оси — плохо: разные единицы и диапазоны. Правильно — две оси Y (MPAndroidChart поддерживает через axisLeft / axisRight) или два отдельных синхронизированных графика с общей осью X.
При синхронизированном скролле двух графиков — добавить OnChartGestureListener к каждому и при скролле одного программно скроллить второй:
chart1.onChartGestureListener = object : OnChartGestureListener { override fun onChartTranslate(me: MotionEvent?, dX: Float, dY: Float) { chart2.viewPortHandler.setTranslation(chart1.viewPortHandler.transX, 0f) chart2.invalidate() } // другие методы интерфейса... } Аннотации и события на графике
Точки аномалий, пороговые линии, события (открытие двери, перезагрузка устройства) — важны для анализа. LimitLine в MPAndroidChart для горизонтальных порогов. Точечные аннотации — кастомный MarkerView или VerticalHighlight с иконкой.
Цветовые диапазоны
Для температуры: зелёный (норма) → жёлтый (предупреждение) → красный (критично). LinearGradient по Y-оси в Compose Canvas или GradientColor в MPAndroidChart. Визуально сразу понятно без легенды, где проблемный период.
Что входит в нашу работу по реализации графиков
| Этап | Результат |
|---|---|
| Анализ требований | Техническое задание с прототипом |
| Выбор библиотеки и архитектуры | Документация с обоснованием |
| Реализация downsampling | Оптимизированный модуль для Android/iOS |
| Интеграция с источниками данных | REST/GraphQL адаптер для телеметрии |
| Тестирование на реальных устройствах | Отчёт по производительности (FPS, RAM) |
| Оптимизация под iOS и Android | Плавная работа на устройствах предыдущих поколений |
| Поставка кода и документации | Исходники, инструкция по деплою, поддержка 3 месяца |
Детали реализации: синхронизация нескольких графиков
При синхронизированном скролле двух графиков с общей осью X используется `OnChartGestureListener` для каждого. При скролле одного программно меняется translation второго. Это обеспечивает единую временную шкалу для разных параметров.Наш опыт и гарантии
Мы занимаемся мобильной разработкой более 5 лет, реализовали 30+ проектов в сфере IoT. Гарантируем стабильную работу графиков под нагрузкой до 100 000 точек. Предоставляем полную документацию и обучение разработчиков заказчика.
Закажите реализацию графиков для вашего IoT-приложения. Свяжитесь с нами, чтобы обсудить требования. Оценим задачу за один рабочий день и предложим решение под ключ. Получите консультацию по выбору библиотеки и архитектуры, адаптированную под ваши устройства и сценарии.
Реализация графиков IoT-данных с зумом, downsampling и аннотациями: от 3 до 5 недель на один клиент. Стоимость рассчитывается индивидуально в зависимости от числа параметров, источников данных и требований к кастомизации.