Показать Меню
falbar Timesheet

Временная диаграмма timesheet

Timesheet

timesheet.js - библиотека для визуализации данных, совмещенная с временной шкалой, позволяет построить на странице весьма и весьма презентабельный график событий.

Для чего это нужно? Ну, скажем, мы создали удобный сервис для наших пользователей, позволяющий планировать расписание рабочего дня или график будущего отпуска или поездки. Timesheet будет полезен или для фотоотчетов за продолжительный период времени, к примеру, на корпоративном сайте можно вывесить фотогалерею развития фирмы, начиная от покупки первого станка и заканчивая открытием нового завода.

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

В демо материале мы видим стандартный вариант: шкала времени по горизонтали, а дальше наши данные, причем, заметте - временные промежутки перекрываются!

Произведём стандартную процедуру подключения и немного разберемся, как это работает:

<link href="timesheet.css" type="text/css" rel="stylesheet" />
<script src="timesheet.js" type="text/javascript"></script>

Далее добавляем на страницу блок, в котором будут отображаться данные, обязательно указываем ему id:

<div id="timesheet"></div>

В хедере прописываем параметры, собственно, все то, что и увидим потом на графике:

<script type="text/javascript">
window.onload = function(){

	new Timesheet("timesheet", 2002, 2013, [

		["2002", "09/2002", "Супер крутая игра", "lorem"],
		["06/2002", "09/2003", "Некоторые отличные воспоминания", "ipsum"],
		["2003", "Была очень плохая примета"],
		["10/2003", "2006", "По крайней мере было весело", "dolor"],
		["02/2005", "05/2006", "Наслаждался тем временем", "ipsum"],
		["07/2005", "09/2005", "Невезение", "default"],
		["10/2005", "2008", " Долгое время ничего не происходило", "dolor"],
		["01/2008", "05/2009", "Последний сезон #1", "lorem" ],
		["01/2009", "05/2009", "Последний сезон #2", "lorem"],
		["02/2010", "05/2010", "Последний сезон #3", "lorem"],
		["09/2008", "06/2010", "FRINGE #1 & #2", "ipsum"]
	]);
};
</script>

Принцип его отрисовки очень прост, создаем новый объект Timesheet, и передаем ему четыре параметра:

  • Id элемента в котором будет отрисоваться график;
  • Начало промежутка в годах;
  • Конец промежутка в годах;
  • Массив с данными.

Массив с данными содержит в себе под массивы временных промежутков события, которые отвечают за саму визуализацию, формируется он так же из четырёх параметров, а именно:

  • Начало промежутка;
  • Конец промежутка (если промежуток нужен за год, то этот параметр можно пропустить);
  • Описание;
  • Стиль отображения линии (default, lorem, ipsum, dolor, sit).

При использовании учитываем, что библиотека timesheet.js использует некоторое HTML5 элементы и CSS3 свойства.

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено