How to generate charts in TrackStudio for your data

Note! This method will work only in browsers, supporting HTML5

With the help of javascript-module visualize, developed by Filament Group, you can build four types of charts in TrackStudio:

  • bar diagrams
  • pie charts
  • Linear (Line and Area) charts (/li>

Plugin works quite simply: as per specified rules it visualizes the data, presented in html-table. Our task is combined with the generation of this table and presenting the parameters of diagram.
As an example, let us analyze the bar diagram of hours worked by users, engaged in the project (BarChart.java):



This script gathers the list of users, which had access to the project and permission to specify the worked hours, and generates the distribution diagram of worked hours for them.
Similarly, let us generate a distribution diagram of tasks depending upon the state (PieChart.java):





And finally, schedule of developers working on the project, which shows the distribution of working hours during the project and growth in total amount of worked hours: (AreaChart.java)



This script automatically scales the time intervals: initially it calculates the number of days from the start of project till its last update. If they are more than 40 (this number can be adjusted), script calculates the number of weeks. If these intervals are also more – then number of months are calculated. Thereafter, the script adds the time spent on the project as per intervals and displays the chart.

Charts are displayed with the help of custom field being evaluated of type Memo (Test), with activated display in HTML.

  1. In the folder webapps/TrackStudio/html of your TrackStudio copy, create a folder visualize.
  2. In that folder, copy the files jquery.min.js and visualize.jQuery.js, attached to this page.
  3. Unzip the archive task_custom_field_value.zip to the folder etc/plugins/scripts/task_custom_field_value of your TrackStudio copy
  4. Start TrackStudio.
  5. In the task, where you want to see the charts, create the custom field of type Memo with display in HTML. Name is arbitrary. Field can also be tied to the Workflow. Set the permissions for this field, so that it was displayed to only those users, who are authorized to view the chart.
  6. Make this field computable (set the respective tick mark) and assign it the script, making the chart. Caching of files needs to be disabled.

Helpful Hints

In fact, chart from the table is generated by calling the javascript:

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

Never simply use this calling: plugin will try to display the charts for all the tables on the page. This means, only that table should be specified which you want to be displayed.

<table id="piechartsource">
...

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

Heading of the chart is taken from CAPTION of the table. Tags – from the cells TH.
Type of chart is assigned by the parameter type: 'bar', 'area', 'pie', 'line'. By default, bar chart is displayed.

<table id="piechartsource">
...

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

By default the chart is displayed in the same dimensions (width and height), as original table. For displaying the chart of required type and scale, specify the parameters:

<table id="piechartsource">
...

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

While displaying, the original table is not hidden. For hiding it, indicate the property display: none.

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

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

Colors of the display can be set using the parameter colors (array)

<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>

You can also manage the styles of the chart by editing the respective parameters of styles (they are specified in the source codes of scripts).