12 сентября 2011 в 13:13

Simile TimeLine — библиотека для отображения событий на шкале времени

Время идет вперед. Годы летят, только успевай считать уж сколько прошло их с тех пор как в школу пошел, как поступил в институт, как женился да дети родились. А ведь помимо своей жизни есть еще много вещей которые изменяются, развиваются, появляются и исчезают с течением времени.

Так вот интересным инструментом для наглядного представления событий и периодов на шкале времени является Simile TimeLine.

Далее я расскажу, что сподвигло меня использовать данный инструмент, и в чем я нахожу его использование крайне удобным. В моем описании будет немного про Астериск, колл-центры и, собственно, javascript-библиотеку Simile TimeLine.

Недавно появился интересный проект по организации call-центра на Астериске. Одним из требований проекта было прием звонков только зарегистрированными операторами в системе. Поясню что это значит.

Заказчик имеет более десятка сотрудников операторов, которые принимают звонки. Это круглосуточная служба приема звонков. Операторы работают по сменам. При заступлении на смену оператор регистрируется в системе, введя свой пин-код на рабочем месте оператора. Теперь на этого оператора будут поступать звонки клиентов заказчика.

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

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

Поскольку на многоканальный номер поступает достаточно много звонков, то мы имеем статистику по принятым и непринятым звонкам. С принятыми звонками все понятно — приняты, записаны и хорошо!

А вот с непринятыми может быть две ситуации: а) клиент недослушал голосовое приветствие и повесил трубку (с такими тоже понятно — возможно, не сильно-то и хотел звонить) или б) звонок клиента был поставлен в очередь ожидания, когда все зарегистрированные в системе операторы были заняты, и клиент-таки не дождался ответа и повесил трубку.

Для более детального анализа работы операторов, их загруженности можно использовать Simile TimeLine, чтобы, например, представить визуально периоды регистрации операторов в системе, ведь лучше один раз увидеть в совокупности, чем просмотреть логи регистраций. Пример такого представления на рисунке (числа — это номера операторов).



Можно приводить еще примеры каким образом анализировать работу операторов, но поскольку этот топик посвящен TimeLine, то закругляюсь с Астериском и колл-центром и далее привожу ссылки использования в иных проектах:



Simile TimeLine - http://www.simile-widgets.org/timeline/ - страница проекта (на примере события политической жизни США, центральное событие — выстрел в Джона Кеннеди).

Подробное руководство "Как начать использовать Simile TimeLine".

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

  • Поскольку я искал необходимую мне библиотеку, то нашел еще и TimeGlider (код здесь) — еще одна библиотека для представления шкалы времени в виде плагина к JQuery. Может быть кому и приглянется в разработке. Отмечу лишь прикольную фичу — масштаб времени — можно оглядеть года свысока, а можно приблизить и разглядеть каждый день. Пример здесь.


В общем, каждый может создать свой TimeLine и наполнить его событиями: ).
Дмитриев Сергей @antirek
карма
51,7
рейтинг 0,0
Пользователь
Похожие публикации
Самое читаемое Разработка

Комментарии (13)

  • +1
    Второй пример, по ссылке, немного подтормаживает. Но это, я думаю, когда много событий на таймлайне, да и ноут слабоват.
    Не хватает примеров кода.
    А в остальном все отлично.
  • +4
    Интеграция с Drupal: drupal.org/project/timeline
    • +1
      Интеграция с NetBeans: netbeans.org/community/releases/roadmap.html
      • +1
        не туда :)
        «Интеграция с сайтом NetBeans»
    • 0
      Глянул Usage Statistics — порядка тысячи сайтов используют плагин с TimeLine. Круто!
  • +2
    Однажды использовал эту библиотеку для визуализации кронтаба: www.usenix.org/publications/login/2008-04/pdfs/blank-edelman.pdf
    • 0
      Интересный пример использования. Спасибо.
  • 0
    Замечательный виджет. Был интересный проект по интеграции этого виджета в Eclipse, и особенно с его подсистемой задач Mylyn. По сути, просто открытие его во встроенном браузере с подкладыванием нужных данных. К сожалению, проект заглох, но всё равно он помог мне при написании курсовой работы.
  • +1
    Упомяну ещё модуль для dojo dojox.gantt
    пример:
    archive.dojotoolkit.org/nightly/dojotoolkit/dojox/gantt/tests/test_Gantt.html

    Но он не умеет событий мельче часа. Кого волнует, вот соотв. тикет: bugs.dojotoolkit.org/ticket/13615
    • 0
      Simile Timeline все-таки не диаграмма Гантта, немного другая задача. Хотя вот почему-то именно для построения диаграмм Гантта существует гораздо большее количество библиотек на javascript, практически под любой фреймворк и просто так.

      А вот у Simile Timeline тоже есть некоторое отсутствие функционала, необходимого мне. Например, невозможно отобразить события по группам, на определенной строке. Хотя можно выделить цветом.
  • +1
    Если использовать этот контрол только по инструкции, то все очень хорошо и красиво.
    Но нам потребовалось его кастомизировать — добавить выходные дни, праздники, еще много чего, так вот — это был АД! Такого запутанного и мутного кода на JavaScript я не видел очень давно.
  • 0
    Шикарно!!! Огромное спасибо за наводку!
  • 0
    Есть неплохой плагин для Wordpress.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.