Low-code дизайнер > Создание интерфейсов > Типы виджетов > Виджеты отчётов / График

График

Виджет отображает данные в виде графика. В качестве источника данных можно выбрать:

  • приложение из любого раздела;
  • переменную типа Таблица, созданную в контексте страницы, на которой размещается график;
  • компонент системы Отчет, который собирает информацию из нескольких приложений.

Например, с помощью виджета вы можете построить линейную диаграмму годового дохода компании или на круговом графике показать вклад каждого менеджера в общий объём продаж.

Создание графика

Чтобы настроить виджет:

  1. Откройте форму приложения или страницу в дизайнере интерфейсов.
  2. Перетащите виджет График с правой панели на поле для моделирования или нажмите кнопку + Виджет. Откроется окно настроек.
  3. В поле Источник данных выберите, какие данные вы хотите просматривать в виде графика:

widget-chart-1

  • Приложение — выберите опцию, чтобы выбрать любое приложение и построить график по его данным;
  • Таблица — опция доступна при размещении виджета на отдельной странице. Отметьте её, а затем укажите переменную типа Таблица из контекста страницы. График строится на основании данных из таблицы. Подробнее об этой опции читайте в разделе «Примеры использования графика»;
  • Отчет — включите опцию, чтобы выбрать созданный отчёт, агрегирующий данные из нескольких приложений. Подробнее читайте в разделе «Примеры использования графика».

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

  1. Укажите настройки графика:

widget-chart-2

  • Измерение — выберите поле, по которому необходимо построить график. Если указать свойство типа Категория, график сформируется по заданным в свойстве вариантам.

Обратите внимание на особенности использования свойства типа Приложение в качестве параметра измерения:

    • источник графика Приложение — если на форме есть поле типа Приложение, параметром измерения можно указать вложенные свойства этого приложения, но не ссылку на определённый элемент. Например, в сделке присутствует запись связанного с ней контакта. Вы можете выбрать любое поле из контекста приложения Контакты и построить по нему график;
    • источник графика Отчет — в качестве параметра измерения можно использовать колонку отчёта, созданную из поля типа Приложение. В этом случае в графике будет отображаться название связанного элемента. Например, в отчёте из контекста заказа в виде колонки добавлена компания-заказчик. Вы можете выбрать эту колонку и отображать в графике название компании;
  • Показательвыберите показатель, по которому будет строиться график. Укажите значение Количество или свойство типа Число, Деньги. В зависимости от источника данных для выбора доступны: для приложения свойства из его контекста, для таблицы — её колонки, для отчёта — колонки таблицы, в которой агрегированы данные.

После выбора свойства напротив его названия укажите параметр для построения графика: значение поля, сумму значений или минимальное, максимальное, среднее значение. Обратите внимание, если в поле Измерение выбрано свойство типа Дата, в качестве параметра для показателя нельзя указать опцию Значение;

    • Дополнительный показатель (Ось Y) — для линейных графиков укажите дополнительный показатель, который будет отображаться на оси Y;
  • Тип графика — укажите тип графика: Столбчатый вертикальный, Столбчатый горизонтальный, Линейный, Линейный с областью, Круговой, Кольцевой, Продвинутый круговой, Сетка из круговых, Числовые карты, Древовидная карта, Спидометр;
  • Цветовая схема — выберите цветовое отображение графика;
  • Размер графика — выберите одну из доступных опций:
    • Динамический — размер графика подстраивается под объём отображаемых данных;
    • Фиксированный — укажите ширину и высоту графика в пикселях.
  1. При выборе таблицы в качестве источника данных вы можете построить график по нескольким показателям. Для этого укажите дополнительные настройки:

widget-chart-3

  • Группировка по нескольким показателям — опция появляется, если вы настраиваете Столбчатый вертикальный или Столбчатый горизонтальный график. Отметьте её, чтобы указать несколько показателей, которые будут отображаться на оси X;
    • Название оси показателей — укажите название для оси Y;
    • Показатели — выберите свойства таблицы типа Число или Деньги, по значениям которых будет построен столбчатый график.

Как будет выглядеть столбчатый график с группировкой по нескольким показателям, смотрите в разделе «Примеры использования графика».

  1. Если вы настраиваете график по данным из приложения, перейдите на вкладку Пользовательские фильтры, чтобы указать Поля для фильтрации — свойства приложения, которые будут использоваться в качестве фильтров для построения графика.
  2. Сохраните настройки. На поле для моделирования отобразится макет графика с данными. При необходимости отредактируйте настройки виджета, чтобы изменить график.
  3. Чтобы настроенная форма стала доступна пользователям, нажмите Сохранить и Опубликовать на верхней панели дизайнера интерфейсов.

Примеры использования графика

Данные из приложения

Рассмотрим, как построить график с источником данных Приложение, на примере отчётов по приложению Сделки.

начало внимание

Использовать приложения Лиды и Сделки в виджете График можно только при наличии лицензии ELMA365 CRM.

конец внимание

Пример 1

Вы можете настроить график для отображения конверсии элементов приложения по статусам. Например, создайте отчёт по конверсии сделок для отдела продаж. Он поможет отследить, какой процент сделок закрывается с успехом. Подробнее о настройке такого отчёта читайте в статье «Конверсия сделок и лидов».

closing_ratio-2

Пример 2

Постройте график для просмотра общей выручки отдела продаж и отслеживания наиболее прибыльных сделок. Для этого:

  1. Разместите виджет График на отдельной странице.
  2. В качестве источника данных выберите приложение Сделки. В поле Измерение укажите название сделки, а в поле Показатель — её бюджет.
  3. Выберите тип графика Продвинутый круговой.
  4. На вкладке Пользовательские фильтры добавьте поля сделки, по которым можно будет сортировать данные на странице, например, ОтветственныйДата поставкиВоронка.
  5. Сохраните и опубликуйте страницу.

Вы увидите на графике всю прибыль компании, бюджет каждой сделки, а также процентное соотношение этой суммы и общей выручки.

chart-2

Данные из таблицы

Для построения графика с источником данных Таблица выполните следующие действия:

  1. Создайте страницу и откройте её в дизайнере интерфейсов.
  2. Откройте вкладку Контекст. Создайте свойство типа Таблица, перейдите в его настройки и добавьте колонки.
  3. Вернитесь на вкладку Шаблон. На правой панели конструктора нажмите Свойства и перетащите созданное свойство на поле для моделирования. Это необходимо, чтобы на странице пользователи могли заполнять таблицу данными.
  4. Вынесите на поле виджет График. В настройках в поле Источник данных выберите опцию Таблица и укажите название созданной переменной из контекста. Задайте показатели для построения графика, его тип, цветовую схему и размер.
  5. Сохраните и опубликуйте страницу.

Пример 1

Виджет можно использовать для отображения статистики готовых заказов на отдельной странице.

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

chart-3

Пример 2

Рассмотрим, как работает опция Группировка по нескольким показателям.

Например, на отдельную страницу добавьте таблицу, которая показывает прибыль от заказов на указанную дату, и график типа Столбчатый вертикальный. Суммы в таблице будут распределены по колонкам в зависимости от группы заказов: опт, розница или заказы от ИП.

Чтобы в графике прибыль от разных групп заказов отображалась в виде отдельных столбцов, в настройках виджета включите опцию Группировка по нескольким показателям. В качестве показателей выберите свойства типа Деньги из таблицы.

Когда пользователи заполняют таблицу данными, строится график, в котором сумма по каждой группе заказов отображается в отдельном столбце. Это позволяет сравнить доходы и оценить, какая из групп приносит компании наибольшую выручку.

widget-chart-7

Данные из отчёта

Отчёты агрегируют данные из нескольких приложений-источников. Виджет График позволяет визуализировать эти данные. Подробнее о том, как настроить и использовать отчёт, читайте в разделе «Отчет».

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

Рассмотрим, как построить график для отчёта, в котором в качестве источников выбраны приложения Заказы, Договоры и Счета. Отчёт содержит информацию о заказах, включая связанные с ними договоры и сумму счетов по каждому договору.

С помощью графика можно отслеживать, какой процент от общей выручки компании составляет сумма каждого заказа. Для этого в поле Измерение выберите название заказа, а в поле Показатель — сумму по договору. Укажите тип графика Сетка из круговых. Это позволит просматривать показатели по каждому заказу в отдельности.

Сохраните настройки и опубликуйте страницу. Теперь на ней отображаются круговые графики для каждого заказа. В них указано название заказа, сумма по договору и процент от общей прибыли компании.

widget-chart-8