At the end of a day, week or month it’s good to know the sums of all tracked times for a given period.

TimeTracker does this for you automatically and to make it easy to read, I added some diagrams.

Your next Chart is only a click away

Doesn’t matter where you are in the APP, you have access to sums and charts:

  • List of Tracked Times
    • daily statistic from Day Header
    • summary of all open from ActionBar
    • summary per month from Overflow Menu
    • summary per week from Overflow menu
  • Creating Accounting Report
    • directly from main Reporting Page
  • History Accounting Reports
    • Monthly Charts from ActionBar

Charts per Kind of Work / Category

Here you can see that all work is summarized in two blocks:

  • Legal Work vs Other Work
  • Paid Work vs. Unpaid Work


… and here the same amount of work is summarized by different Categories:


To make it easy to understand, the Bars and corresponding Legend have same Color: per ex. yellow for  Working Time.

Cascades doesn’t provide an API to draw diagrams – so i did this using plain Containers and some UI Logic. See this blog post here at BlackBerry Developer Blog where I described this in detail.

TimeTracker Diagrams are created similar. My custom ChartContainer needs some properties to set:

Container {
    id: categorySummaryChartContainer
    background: Color.Black
    // .....
    property int realMaxMinutes: 0
    property int cat0Minutes: 0
    property int cat1Minutes: 0
    property int cat2Minutes: 0
    property int cat3Minutes: 0
    property int cat4Minutes: 0
    property int cat5Minutes: 0
    property string cat0HoursLabel: "0:00"
    property string cat1HoursLabel: "0:00"
    property string cat2HoursLabel: "0:00"
    property string cat3HoursLabel: "0:00"
    property string cat4HoursLabel: "0:00"
    property string cat5HoursLabel: "0:00"
    // UI depends on  data
    property int cat0BarHeight: barMaxAvailableSpace*cat0Minutes/maxMinutes
    property int cat1BarHeight: barMaxAvailableSpace*cat1Minutes/maxMinutes
    property int cat2BarHeight: barMaxAvailableSpace*cat2Minutes/maxMinutes
    property int cat3BarHeight: barMaxAvailableSpace*cat3Minutes/maxMinutes
    property int cat4BarHeight: barMaxAvailableSpace*cat4Minutes/maxMinutes
    property int cat5BarHeight: barMaxAvailableSpace*cat5Minutes/maxMinutes
    layout: DockLayout {
    // ...

To get more flexibility you should use arrays – but in this special case I could live with properties per bar.

Then for the bars:

    Container {
        id: chartContainer
        verticalAlignment: VerticalAlignment.Bottom
        translationY: -labelSize
        Container {
            id: barContainer
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            Container {
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 0.2
            Container {
                id: barCat0
                background: Color.Yellow
                minHeight: cat0BarHeight
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1.0
                verticalAlignment: VerticalAlignment.Bottom
            Container {
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 0.2
        // ...
    // ...

again: to be more flexible define this from arrays using ComponentDefinitions. For my use-case it was ok to create statically.

Each bar itself will have the same width (spaceQuota 1.0) and between two bars there’s a small amount of space (spaceQuota 0.2). all bars live inside a DockLayout aligned to the bottom, the height is calculated from properties.

The information which Category belongs to Legal/Other and Paid/Unpaid is configured in Settings – Categories.

Here are two examples from Settings:

Working Time is classified as Leagl and also Paid Work:


Travel Time is classified as Paid Work, but doesn’t count as Legal Work.


Using bar charts users can easy compare the amount of tracked times. It’s also easy done for Developers using Custom Container Components.

More UX highlights: