Как построить графики в TrackStudio по вашим данным

Внимание! Данный способ будет работать только в браузерах, поддерживающих HTML5

С помощью javascript-модуля visualize, созданного Filament Group в TrackStudio можно строить графики четырех типов:

• столбчатые диаграммы (bar)
• круговые диаграммы (pie)
• линейные графики (area и line)

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

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

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

Также построим круговую диаграмму распределения задач в зависимости от состояния (PieChart.java):

И, наконец, график работы разработчиков над проектом, на котором показано распределение рабочих часов по ходу проекта и рост общего количества потраченного времени: (AreaChart.java)

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

Графики выводятся с помощью вычисляемого дополнительного поля типа Memo (Тест), с включенным отображением в HTML.

1. Создайте в папке webapps/TrackStudio/html вашего экземпляра TrackStudio папку visualize.
2. Перепишите в нее файлы jquery.min.js и visualize.jQuery.js, приложенные к этой странице.
3. Распакуйте архив task_custom_field_value.zip в папку etc/plugins/scripts/task_custom_field_value вашего экземпляра TrackStudio
4. Запустите TrackStudio.
5. В задаче, в которой вы хотите видеть графики, создайте дополнительное поле типа Memo с отображением в HTML. Название может быть любым. Поле также можно привязать к процессу (Workflow). Настройте права на это поле, чтобы оно показывалось только тем пользователям, которым разрешено видеть график.
6. Сделайте это поле вычисляемым (установите соответствующую галку) и назначьте ему скрипт, формирующий график. Кеширование значений нужно отключить.

Полезные советы

Собственно график из таблицы строится с помощью вызова javascript:

<script>
        $('table').visualize();
</script>

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

<table id="piechartsource">
...

<script>
        $('table#piechartsource').visualize();
</script>

Заголовок графика берется из CAPTION таблицы. Метки - из ячеек TH.

Тип графика задается параметром type: 'bar', 'area', 'pie', 'line'. По-умолчанию выводится bar

<table id="piechartsource">
...

<script>
        $('table#piechartsource').visualize({type: 'area'});
</script>

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

<table id="piechartsource">
...

<script>
        $('table#piechartsource').visualize({type: 'area', width: '800px', height: '600px'});
</script>

При отрисовке исходная таблица не скрывается. Чтобы ее скрыть, укажите для нее свойство display: none

<table id="piechartsource" style="display: none">>
...

<script>
        $('table#piechartsource').visualize({type: 'area', width: '800px', height: '600px'});
</script>

Цвета отрисовки можно указать через параметр colors (это массив)

<table id="piechartsource" style="display: none">>
...

<script>
        $('table#piechartsource').visualize({type: 'area', width: '800px', height: '600px', colors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']});
</script>

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