Диаграмма онлайн

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

Круговая сравнивает части с целым и отвечает на вопрос «из чего это состоит». Структура расходов, распределение трафика по каналам, доли рынка. Работает, пока сегментов три-семь; дальше углы перестают различаться, и выигрывают полосы.

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

Горизонтальные полосы — те же столбцы, повёрнутые набок. Смысл поворота в подписях: «Контекстная реклама» и «Рекомендательные системы» в вертикальном варианте встают под углом и читаются с трудом, а сбоку помещаются целиком. Полос спокойно выдерживается тридцать штук.

Линия показывает изменение во времени: продажи по месяцам, рост аудитории, позиции по неделям. Точки соединены, поэтому тренд виден до того, как читатель разберёт подписи. Для сравнения несвязанных категорий линия не годится: соединять «Москву» с «Казанью» отрезком бессмысленно.

Воронка считает путь с потерями: показы, клики, заявки, продажи. Каждый шаг меньше предыдущего, и вопрос всегда один — где отваливается больше всего. Конструктор считает переходы сам и подписывает их справа от каждого этапа.

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

Две шкалы на одной картинке

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

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

Обрезанная ось

Самый частый приём. Ось значений начинают чуть ниже минимального числа вместо нуля — и любые колебания превращаются в горный хребет.

Правило простое: столбец кодирует величину своей площадью, поэтому его основание обязано стоять на нуле. Линия кодирует изменение, и для неё сдвинутая ось допустима, когда об этом прямо сказано в подписи. Если сравнивать нужно мелкие отличия крупных чисел, берите разницу или процент к прошлому периоду — они и есть предмет разговора.

Слишком много долей

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

В конструкторе на этот случай есть галочка «Мелкие доли в «Прочее»»: всё, что меньше трёх процентов, складывается в один сегмент. Когда важны как раз мелкие категории, круговая — плохой носитель, и стоит переключиться на полосы.

Проценты без базы

«Конверсия выросла вдвое» звучит как победа, пока не выясняется, что она поднялась с одной заявки до двух. Процент скрывает величину, из которой посчитан, и на маленьких числах превращается в шум: одна лишняя заявка из тридцати визитов даёт скачок на треть.

Все три ловушки проверяются одним вопросом к самому себе: изменится ли вывод, если убрать оформление и оставить голые числа. Когда изменится — оформление и делает работу за факты.

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

1. Динамика заявок. Переключитесь на режим «Текстом» и наберите четыре строки: Январь 120, Февраль 185, Март 210, Апрель 240. Диаграмма собирается прямо во время набора. Тип — «Линия», галочка «Заливка под линией», подписи значений — «Числа».
2. Заголовок с выводом. В поле заголовка поставьте вывод, который из графика следует: «Заявки выросли вдвое за квартал». Ярлык «Динамика заявок» повторяет подписи осей и ничего к ним не добавляет. Заголовок читают все, график разглядывает половина.
3. Целевая линия. Если на квартал стоял план в 200 заявок в месяц, впишите 200 в поле «Целевая линия» и подпись «план». Пунктир поперёк графика сразу показывает, с какого месяца план начали выполнять.
4. Структура бюджета. Добавьте вторую диаграмму: тип «Круговая», данные — каналы и суммы, подписи «Проценты», единицы «₽» в поле «после». Строку с самым дорогим каналом покрасьте квадратиком слева в тревожный цвет — это единственный способ обратить на неё внимание, не подписывая ничего словами.
5. Сборка. Обе диаграммы скачайте кнопкой PNG и вставьте в презентацию, либо возьмите PDF, если отчёт уходит на печать. Кнопка «Ссылка на диаграмму» пригодится, когда коллеге нужно поправить цифры у себя.

Дальше цифры удобно свести с расчётами: калькулятор конверсии переводит визиты и заявки в проценты и цену шага, калькулятор CTR считает кликабельность объявлений, а разбор про конверсию сайта объясняет, от какой базы её вообще считать.

Конструктор ничего никуда не подключает и работает с тем, что вы принесли. Вот откуда эти числа обычно берутся и как их достать в пригодном виде.

Яндекс Метрика. Любой отчёт выгружается кнопкой экспорта в верхнем правом углу — в CSV или XLSX. Для диаграммы нужны две колонки: измерение и показатель, поэтому в отчёте стоит оставить одну метрику. Какие отчёты вообще смотреть, разобрано в статье Яндекс Метрика для SEO, а сам сервис описан в карточке Метрики.

Яндекс Директ. Мастер отчётов собирает срез по кампаниям, площадкам или регионам и отдаёт файл. Как его настроить, чтобы не утонуть в столбцах, написано в разборе Мастер отчётов в Директе.

Excel и Google Таблицы. Проще всего выделить нужный кусок листа, скопировать и нажать «Вставить из буфера» — колонки разделятся сами. Если выгрузка лежит боком, то есть периоды идут по столбцам, а показатели по строкам, поможет кнопка «Развернуть».

CRM и 1С. Почти любая система умеет сохранять список в CSV. Русские программы часто пишут его в кодировке windows-1251 — конструктор такие файлы открывает без переделки.

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

Рядом с кнопкой PNG стоит множитель разрешения. Двойной хватает для экрана и презентации, тройной и четырёхкратный нужны для печати и для случаев, когда картинку потом обрежут и увеличат: при четырёхкратном диаграмма выходит 3600 точек по ширине.

Кнопка «Копировать картинку» кладёт PNG прямо в буфер обмена — в презентацию он вставляется одним нажатием, без промежуточного файла на диске. «Распечатать» отправляет на принтер одну диаграмму: печать идёт через отдельный кадр, поэтому шапка, подвал и текст страницы на лист не попадают. Для тёмных слайдов есть фон «Тёмный», для наложения на свой макет — «Прозрачный»: в PNG сохранится прозрачность вместо белого прямоугольника.

Порядок. Категории без естественной последовательности сортируются по убыванию — тогда главное стоит первым и взгляд не мечется по картинке в поисках максимума. Месяцы, недели и этапы воронки сортировать нельзя: у них свой порядок, и его нарушение ломает смысл.

Заголовок. Ярлык вроде «Продажи по месяцам» повторяет то, что и так написано на осях. Место лучше отдать выводу: «Продажи растут четвёртый месяц подряд». Такой заголовок читают и запоминают, даже когда до самой картинки не добираются.

Цвет. Восемь разных цветов на диаграмме означают восемь разных смыслов, и если смыслов столько нет — цвета лишние. Для одного ряда достаточно одного цвета плюс акцент на той строке, о которой идёт речь. Палитра «Оттенки одного цвета» как раз для случаев, когда категории равноправны, а «Серая, для печати» переживает чёрно-белый принтер.

Подписи или сетка. Вместе они спорят друг с другом. Когда важны точные значения, включайте подписи и убирайте сетку; когда важна форма — оставляйте сетку и снимайте подписи. Диаграмма с тем и другим сразу выглядит перегруженной.

Размер шрифта. Ползунок здесь по делу: картинка, которую будут показывать с проектора или вставят в слайд шириной в треть экрана, требует шрифта крупнее обычного. Проверять просто — уменьшите превью до предполагаемого размера и попробуйте прочитать подписи.

Границы стоит знать заранее, чтобы не искать здесь то, чего тут никогда не было.

• Диаграмму Ганта — она про сроки и зависимости задач, ей нужны даты начала и конца по каждой строке. Это работа планировщиков.
• График функции по уравнению — математическая задача, для неё есть свои сервисы. Здесь работают готовые ряды чисел с подписями.
• Карты и картограммы — данные по регионам требуют географической подложки.
• Автоматическое подключение к источникам — Метрика, Директ и CRM сюда не подключаются, числа приносятся вручную или файлом. Постоянно обновляемые панели собирают в Looker Studio и подобных сервисах; что это вообще такое, объяснено в статье про дашборды.

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