Что с ними не так, и можно ли сделать лучше — читайте под катом.
Идея соединять точки плавными сплайнами (и даже линиями) на графиках с деньгами в принципе неправильная: ведь в реальности деньги приходят и уходят на счёт дискретно, конкретными платежами с конкретными суммами. А попытка провести через точки гладкую кривую может вообще сыграть с нами дурную шутку вроде такой:
И второго, и третьего августа у нас на счету были деньги, при этом сглаженная кривая показывает, что мы ушли в минус, вводя нас в заблуждение. Но даже если соединять точки прямыми линиями, будет казаться, что между первым и вторым августа на счету было около 450 тыс. рублей, что тоже не соответствует действительности. Как же сделать правильно?
Несколько лет назад мне довелось разработать финансовую систему для одного из заказчиков, для которой потребовалось придумать и реализовать похожие по смыслу графики. Ниже я хотел бы рассказать про свой способ решения этой задачки.
Источником данных о состоянии расчётного счёта является банковская выписка: список операций, совершенных за определённый период времени. Каждая такая операция — это либо приход денег на счёт (оплата от клиента, проценты по банковскому депозиту и т.п.), либо расход (оплата за товары и услуги, выплата зарплаты и т.п.) При этом время совершения операции обычно не имеет значения (а зачастую мы его и не знаем, ведь платёж может быть обработан банком не сразу), важна только дата.
Получается, что мы не видим движения денег внутри дня. Зато мы знаем остаток денег на счёте в начале дня, общую сумму приходов, сумму расходов и, как следствие, остаток на конец дня. Хочется отображать эти данные в виде понятного и информативного графика.
Идею для него я подсмотрел у биржевых игроков: уже более 250 лет для отображения изменений биржевых котировок они используют т.н. «японские свечи». Выглядят они так:
Верхняя и нижняя грани тела «свечки» показывают значение котировки на открытии или закрытии периода, который в общем случае может быть любым: от нескольких минут до нескольких лет. Если за выбранный период котировки выросли (т.е. верхняя грань соответствует закрытию), тело свечи закрашивают одним цветом, если упали — другим. Также у биржевых свечей есть «усы», соответствующие минимальному и максимальному значению котировки за данный период.
Вы уже наверняка уловили аналогию между поведением биржевых котировок и нашими деньгами на расчётном счёте. У нас тоже есть остаток на начало дня (открытие) и на конец дня (закрытие). Поскольку мы не видим точной последовательности исполнения операций внутри дня, мы не будем рисовать усы (минимальный и максимальный остаток внутри дня). В результате получится график, который показывает не просто изменение остатка по счёту на конец дня, но и преобладающее направление денег в этот день (приход или расход — от этого будет зависеть цвет свечки), а также размер этого прихода или расхода.
Вот что в результате получилось (картинка кликабельна):
Сверху — японские свечи, показывающие изменение остатка на счёте, снизу — суммарные приход и расход за день в виде стандартной столбчатой диаграммы.
Здесь для примера показаны несколько плановых (именно поэтому суммы в легенде взяты в скобки) платежей для молодого стартапа: 1 сентября учредители внесли на счёт уставный капитал в размере 10 тыс. рублей, а ещё через 4 дня получили 1 млн от первого клиента. Каждый месяц стартап должен перечислить сотрудникам зарплату в размере 300 тыс. (15-го числа), а также заплатить 100 тыс. за аренду офиса (в конце месяца). Видно, что без дополнительного финансирования компания просуществует только два месяца: уже в ноябре денег для выплаты зарплаты не хватит.
А вот пример данных, смоделированных на базе движений по счетам реальной компании (картинка кликабельна):
Слева от флажка, обозначающего сегодняшнее число, находятся фактические значения, бледные графики справа — запланированные значения.
Несмотря на то, что величина остатка на обоих счетах колеблется в диапазоне от нескольких сотен тысяч до нескольких млн, суммы дневных платежей на гистограммах однозначно показывают, что верхний счёт является для компании основным. Чётко видна периодичность платежей, это — следствие того, что в компании введён т.н. платёжный день. Также можно заметить, что деньги на счёте на задерживаются — возможно, их размещают на краткосрочных депозитах. В реальной системе это легко проверить: при клике на конкретном дне открывается окошко со списком платёжек.
Вот так, благодаря идее, подсмотренной у биржевых игроков, получился очень наглядный и информативный инструмент для контроля за остатками на расчётных счетах. Надеюсь, что кто-нибудь ещё найдет эту аналогию полезной и применит её в своих продуктах.
Комментарии (17)
undestroyer
27.08.2018 09:49Согласен с тем что сглаженные линии не подходят, но свечи — слишком сложно. Если продукт ориентирован на выходцев из биржи — окей, но остальных придется учить. В своих продуктах использую следующие критерии:
1) если значения скачут вокруг какого-то значения (как правило — 0) и данные представляют собой изменение какой-то величины, то используем столбцы с разными цветами для разных направлений, один для роста и другой для снижения;
2) Если величина обозначает какой-то значимый или физический объем (сумма денег на счёте, количество товаров на складе) и выход «в минус» невозможен или крайне маловероятен, то либо столбцы, либо линейная диаграмма с заполнением области под линией.
3) Если величина показывает плавно изменяющиеся значения без резких перепадов (температура за месяц, онлайн посетителей портала во времени), то используем линии. Наличие сглаживания зависит от дизайна, но сглаженные линии обычно приятнее ломанных.
Особо важен бэкграунд данных для пользователя. График это визуализация. На одном и том же графике руководитель предприятия увидит одно, главбух — другое. Например, мы нарисуем динамику объема средств на счете фирмы за год. Если директор особо в финансы не вникает — показываем ему линию, по которой просто и понятно какой сейчас «тренд». Покажем эту линию главбуху, и получаем фидбэк в стиле «ничего не видно, ничего не понятно....».
Если есть время и возможность — добавляем переключатель режима отображения графика «стоблцы/линия», чтоб сами решали что смотреть.mzavatsky Автор
27.08.2018 10:27Практика показывает, что директора и собственники в такие системы даже не заходят, не говоря уж про анализ графиков )
Galchenkov
27.08.2018 11:59Но создаются эти системы как раз для директоров и собственников.
В Финологе правильное и простое построение графика.
BkmzSpb
27.08.2018 09:54Даа, сглаженные графики конечно скрывают дискретную суть финансовых транзакций, но может для совсем простых случаев это не так уж и страшно. В конце концов, тренд и типичный масштаб изменений даже по такому испорченному графику можно отследить.
У меня есть технические вопросы касательно графика на основе японских свечей:
1) Я не финансист, но мне кажется абсолютная шкала где-то слева (или справа) от японских свечей и гистограммы была бы полезна. Ну т.е. я вижу изменения за один бин по времени на гистограмме, но сколько это — +- 1 миллион или +- 5 — приходится вычислять из первого графика. Есть какая-то причина, по которой нет вертикальных осей?
2) На графике присутствуют лейблы с характерными суммами. Например, в начале и в конце ряда, но еще и в середине. Для верхней панели это 453к — 8.4М скачок, а вот для нижней это 3.4 М. Лейблами подписываются минимальная/максимальная суммы за период, или используется какой-то иной критерий? Допустим, нетипичное изменение баланса (аутлайер)? В случае последнего интересно было бы узнать как такие «выбросы» во временном ряду автоматически обнаруживаются.Chugumoto
27.08.2018 10:00в торговых терминалах шкала значений обычно справа, плюс при наведении мыши на перекрестии можно посмотреть какие значения по вертикали (цена) и горизонтали (время), плюс при наведении на свечу OHLC (Open, High, Low, Close) отображаются…
mzavatsky Автор
27.08.2018 10:13Да, основная причина отсутствия оси ординат с метками — интерактивность графика. Мне показалось, что лучше не захламлять график лишними меткими и сетками, если можно просто навести курсор мыши на интересующую дату, и увидеть точные значения на легенде вверху справа. Если бы речь шла, например, о графике для бумажного отчёта, то вертикальную ось (и соответствующую сетку), конечно, пришлось бы сделать.
На картинке подписываются четыре значения: остатки на начало и конец отображаемого периода (справа и слева от графика), а также минимальное и максимальное значения за этот период — как раз для понимания масштаба изменений. В реальной системе этот график можно прокручивать мышкой влево-вправо, и подписи также динамически подстраиваются под изменяющиеся данные.
Chugumoto
27.08.2018 09:55помимо свечей еще бары есть… иногда и некоторым пользователям они более понятны.
В реальной системе это легко проверить: при клике на конкретном дне открывается окошко со списком платёжек
тогда же в реальной системе, раз данные по платежкам внутри дня есть, лучше и тени свечей отрисовывать… тогда для дальнейшего планирования будет понятно, сколько же средств нужно оставлять на счете, чтобы вдруг не уйти в минус внутри дня. ну или как же лучше внутри дня планировать платежи, например расходы оставлять на вторую половину дня…mzavatsky Автор
27.08.2018 10:23В банковских выписках у платёжек была указана только дата, без отметки о времени исполнения. Допустим, 1 августа с утра на счету лежала 1000 рублей, и прошло три платежки на +100, +200 и -150 рублей. В зависимости от порядка их исполнения максимальное значение внутри дня могло быть как 1300 рублей, так и 1150, аналогично минимальное значение могло оказаться и 850 руб, и 950, и 1050. Поэтому, без временной отметки, данных для рисования «усов» недостаточно.
Chugumoto
27.08.2018 11:08ну тогда да… хотя сейчас посмотрел — в выписке по счету физлица есть «Дата и время операции» но вот только «Дата обработки банком»… печально.
SemaIVVV
27.08.2018 10:57Автор, я тоже пришел когда-то к такому же отображению фин-показателей. Но, я также как и у вас на графике, столкнулся с проблемой состояния по периоду (в плюсе-ли был в этот период свечи, или в минусе, тем более, если приход/расход почти одинаковые, то по графику не видно этого ясно). Поэтому, я над свечами ввел еще один маркер — квадратик, который закрашивался в красный или зеленый цвет, в зависимости от того, в плюс закрыт период свечи или в минус.
mzavatsky Автор
27.08.2018 12:42Да, именно для этого и пришлось добавлять внизу гистограмму с величиной прихода/расхода за день.
ozzyBLR
27.08.2018 13:22Просто задайте себе вопрос: так ли хороши свечи, если под ними нужно рисовать дополнительный график, а для получения какой-либо информации кроме «плюс-минус» нужно наводить курсов? И чем в таком случае свечи отличаются от обычного графика по интервалам (дням), где прямые соединяли бы значение на начало и конец?
mzavatsky Автор
27.08.2018 13:27Например тем, что становится понятно, на какие именно дни следует наводить курсор и «закапываться» в подробный список платежёк.
Если суммы приходов и расходов за день примерно одинаковы, остаток по счёту практически не будет меняться. График превратиться в прямую линию, что может привести к ошибочному впечатлению, что операций по счёту просто не было. Как же тогда выявить дни, когда операции по счёту производились?..ozzyBLR
27.08.2018 14:41Это нас приводит к фундаментальному вопросу: а что, собственно, хочет видеть пользователь? Если в приоритете состояние счёта — линия по точкам подойдёт. Если нужны приходы-расходы, то нужен Ваш второй график. А свечи…
Сколько пользователей знали о них, до появления Вашего решения? Сколько новых работников системы изначально знакомы с ними? Мне кажется, в данном случае это, к сожалению, свечи ради свечей. Да, они работают. Нет, это не оптимально.
ggo
Беда в том, что вот такие сглаженные графики рисуют для тех, что про свечи никогда не слышал, и даже если про них сказать, то интереса к ним все равно не появится.
Соответственно, свечи для продвинутых, а всем обычным — обычные понятные графики, пусть даже и корявые.
Консьюмеризация…