Справочник визуализаций

На данной странице представлен сборник различных примеров и лайфхаков по визуализации на платформе по адресу https://example.visiology.su (demo/123456).

Имена дашбордов обычно идентичны названиям примеров, поэтому найти их в Дизайнере не составит труда.

Наименование

Описание

Наименование

Описание

Public | Диаграмма с пагинацией

На виджете представлен пример диаграммы с листами, которые можно переключать.

Public | Дриллдаун и его обработка

Описание кастомного дрилдауна с помощью visApi. 

Public | Заглушка при выполн. загрузчика

Пример заглушки виджета на время выполнения загрузчика.

Public | Карта с кластеризацией маркеров

Пример карты с кластеризацией маркеров.

Public | Картосхема

Пример картосхемы.

Public | Картосхема с drill-down

Пример картосхему с возможностью провалиться в страны\регионы и тд.

Public | Пузырьковая диаграмма

Пример bubble chart.

Public | Синхронные фильтры

Пример работы синхронных фильтров с помощью доп библиотеки.

Public | Скрытие виджета по фильтру

Пример скрытия виджетов в зависимости от значения фильтра.

Public | Установка фильтра по датам

Установка значений в фильтр по датам через код.

Public | Множественная карточка в модальном окне

Пример реализации карточек с помощью модального окна, которое открывается по клику.

Public | Множественная карточка

Кастомная реализация карточек. Строятся динамически.

Public | Сводная как фильтр

Использование значений сводной таблицы в качетве фильтра.

Public | Синхронизация Диаграммы и Фильтра

Синхронная работа фильтра и диаграмма (взаимное влияние)

Public | Сортируемая таблица с несколькими измерениями

Таблица с возможностью сортировки каждого столбца.

Public | Фильтр checkbox

Фильтр в виде чекбокса.

Public | Popup

Всплывающия подсказка при наведении на виджет изображение (работает и с дургими виджетами).

Public | Числовой фильтр

Фильтрация показателей по диапазону на основе Python и расчётных столбцов

Public | JQuery Datatable

Таблица на основе библиотеки JQuery DataTables. Легко кастомизируется, очень много фич.

Public | Переход на 2 лист с устан. фильтра

Клик на один из виджетов текст вызывает переход на второй лист с установкой значения из этого виджета текст в виджет фильтр на втором листе. Фильтр на втором листе влияет на гистограмму. В итоге получаем после перехода сразу отфильтрованные значения на гистограмме.

Public | Выбор показателя через фильтр

Выбор отображаемого показателя через фильтр.

Public | Карта-схема количество полётов

Дашборд с картой-схемой лётных зон.

Public | Окраска значений таблицы

Окраска значений сводной таблицы в зависимости от значений соседнего столбца

Public | Highcharts gantt

Построение диаграммы Гантта на библиотеке Highcharts

Public | Транспонирование данных в Круговой диаграмме

Транспонирование данных в круговой диаграмме для отображения нескольких показателей | patterns-fill

Public | Круговая с остатком

Сектора с долей менее 10% складываются в один сектор, в который можно сделать дриллдаун и посмотреть данные по ним.

Public | Гант (jsganttimproved lib)

Построение диаграммы Гантта на библиотеке jsganttimproved

Public | Лепестковая диаграмма / Spiderweb

Построение лепестковой диаграммы на библиотеке Highcharts

Public | График с подсветкой диапазонов

Настройка цвета для разных диапазонов значений. Выделение диапазонов точек на осиХ. Включение горизонтальной прокрутки.

Public | Custom fonts

Добавление новых шрифтов в виджеты

Public | Leaflet - Interactive Choropleth Map

Карта на библиотеке Leaflet с дополнительным слоем geojson, который раскрашивается в зависимости от значения показателя.
Напоминает обычную карту схему, но основа карта openstreetmap.

Public | Фильтрация показателя (расчётный столбец)

С помощью фильтра изменяем значения данных показателя, отображаемых на гистограме.

Public | Переход по кнопке на другой дашборд

Переход по кнопке на другой дашборд

Public | Dependency-wheel

Dependency-wheel реализован на основании данных грузоперевозок

Public | honeycomb(tilemap)

Honeycomb(tilemap) карта регионов России отображённая сотами

Public | TreeView-фильтр с поиском по всем уровням

Пример кастомного виджета TreeView, который работает как фильтр. В нём можно делать поиск по подстроке среди значений всех атрибутов измерений.

Public | Взаимное влияние

Пример кастомного механизма взаимного влияния диаграмм друг на друга.

Public | Listbox

Фильтр listbox отображающий значения фильтра как кнопки, которые можно выбирать.

Public | 3D pie chart

3D круговая диаграмма. Реализована стандартными средствами библиотеки highcharts.

Public | Ссылка с установленным фильтров

Дашборд при копировании ссылки на него запоминает значение фильтра, установленного на дашборде.

Public | Сортировка в стеке по возрастанию

Сортировка серий внутри стека при накоплении

Public | Funnel chart

Пример виджета “Воронка” на библиотеке Highcharts

Public | Switch button

Пример кнопки переключателя для включении фильтрации по фиксированным элементам измерения

Public | Мониторинг пользователей

Таблицы отображающие количество пользователей по ролям

Public | Calendar ECharts

Виджет отображает календарь из 12 месяцев. Используется тип серии heatmap из-за чего, цвет ячейки для даты зависит от значения показателя за эту дату.

Public | Спидометр

Кастомный спидометр в двух стилях

 

Это исключительно пользовательские примеры, работы которых не гарантируется. Также код в основном пишется для браузера Chrome, поэтому вероятность работы в других браузерах еще сильнее понижается.