Bar Chart with Rally.data.lookback.calculator.TimeSeriesCalculator

Question

I need to create bar chart showing up various values, such as "Created", "Closed", "Submitted" data with count on Y Axis and dates on x axis.

I am able to do this successfully, for any one criteria. However I am not able to get multiple bars being shown.

Below is the code I am using currently:

<!DOCTYPE html>
<html>
<head>
    <title>Defect Trend App</title>
    <script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
    <script type="text/javascript">
        Rally.onReady(function () {
(function() {
  Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    launch: function() {    
      return this.createTrendChart();
    },  

    createTrendChart: function() {
       var ProjectOid;
      ProjectOid = this.getContext().getProject().ObjectID;
      var ReleaseOID = <My Release ID>;
      Ext.define('My.TrendCalc', {
        extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
        getMetrics: function() {
          return [
            {
              as: 'Defects',
              display: 'column',
              f: 'count'
            }
          ];
        }
      });
      this.myTrendChart = Ext.create('Rally.ui.chart.Chart', {
        storeType: 'Rally.data.lookback.SnapshotStore',
        storeConfig:  {
          find: {
            _TypeHierarchy: "Defect",
            State: {
              $lt: "Closed"
            },
            _ProjectHierarchy: ProjectOid,
            Release:  ReleaseOID
          },        
          fetch: ["_ValidFrom", "_ValidTo", "ObjectID"]
        },      

        calculatorType: 'My.TrendCalc',
        calculatorConfig: {},
        chartConfig: {
          chart: {
            zoomType: 'x',
            type: 'column'
          },
          title: {
            text: 'Defects over Time'
          },
          xAxis: {
            type: 'datetime',
            minTickInterval: 1
          },
          yAxis: {
            title: {
              text: 'Number of Defects'
            }
          }
        }
      });

      return this.add(this.myTrendChart);
    }
  });

}).call(this);            
            Rally.launchApp('CustomApp', {
                name:"Defect Trend App",
                parentRepos:""
            });

        });
    </script>
    <style type="text/css">
.app {
     /* Add app styles here */
}
    </style>
</head>
<body></body>
</html>

Basically I want to read multiple metrics to show them in chart — user3129202, Feb 19 '14 at 09:19

score 2 · Answer 1 · answered Feb 19 '14 at 12:10

2

I'm not familiar with Rally's App SDK wrappers, but I'm the primary author of Lumenize where the TimeSeriesCalculator comes from. Your situation is exactly what the group-by functionality in Lumenize.TimeSeriesCalculator was designed for. See the documentation for a careful walkthrough of how the TimeSeriesCalculator works. Look at the second example titled, "Time-series group-by example". Also, here is a functioning jsfiddle of that group-by example.

The key bit that you need is:

metrics = [
  ...
  {f: 'groupByCount', groupByField: 'ScheduleState', allowedValues: allowedValues, prefix: 'Count '},
  ...
]

answered Feb 19 '14 at 12:10

Larry Maccherone

9,393
3
27
43

Thanks, for the idea. I will go through the links, and try to use the same – user3129202 Feb 19 '14 at 12:29
I went through the documentation, however somehow I could not get it working. Maybe I am trying something wrong. I will work on this further. Thanks a lot for your help and time. – user3129202 Feb 20 '14 at 11:33

score 2 · Accepted Answer · answered Feb 20 '14 at 01:11

I do not consider myself an expert in this area, but I believe this will work for you...

I took your code as a base and modified it based on some other code to get what I think appears to be a working version of what you want. Below is a screenshot of the code running in Rally.

The data I had did not have a lot of variance in the series (most were released) so it looks uninteresting.

You will probably want to exclude the final state (as I believe you did in your code via the $lt:'Completed'... which i changed to $lte:'Completed' temporarily).

example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>
Defect Trend App </title>
    <script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
    <script type="text/javascript">

    var states = ['Accepted','Released']; // all enum values for 'State'
    var field = 'ScheduleState'; // or 'State'
    var ReleaseOID = XXXXXX; // your release Oid

    Rally.onReady(function () {
            Ext.define('CustomApp', {
                extend: 'Rally.app.App',
                componentCls: 'app',
                launch: function() {    
                    return this.createTrendChart();
                },  

                createTrendChart: function() {
                    var ProjectOid;
                    ProjectOid = this.getContext().getProject().ObjectID;


                    Ext.define('My.TrendCalc', {
                        extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
                        getDerivedFieldsOnInput: function() {
                            var m = _.map(states, function(state) {
                                return {
                                    "as": state,
                                    "f" : function(snapshot) { 
                                        var value = (snapshot[field] == state) ? 1 : 0;
                                        return value;
                                    }
                                }
                            })
                            return m;
                        },
                        getMetrics : function() {
                            var m = _.map(states, function(state) {
                                return {
                                    field: state,
                                    as: state,
                                    f: 'sum'
                                }
                            })
                            return m;
                        }
                    });

                    this.myTrendChart = Ext.create('Rally.ui.chart.Chart', {
                        storeType: 'Rally.data.lookback.SnapshotStore',
                        storeConfig:  {
                            find: {
                                _TypeHierarchy: "Defect",
                                State: {$lte: "Closed" },
                                _ProjectHierarchy: ProjectOid,
                                Release:  ReleaseOID
                            },        
                            fetch: ["_ValidFrom", "_ValidTo", "ObjectID", field],
                            hydrate: [field],
                            sort: { "_ValidFrom" : 1}
                        },      
                        calculatorType: 'My.TrendCalc',
                        calculatorConfig : {},
                        chartConfig: {
                            chart: {
                                    zoomType: 'xy',
                                    type:'column'
                            },
                            title: {
                                text: 'Defects over Time'
                            },
                            xAxis: {
                                type: 'datetime',
                                title: { text: 'When'},
                                minTickInterval: 5,
                                labels : { rotation: 90 }
                            },
                            yAxis: { title: { text: 'Count' } },
                            plotOptions: {
                                series: {
                                    stacking: 'normal'
                                }
                            }
                        }
                    });

                    return this.add(this.myTrendChart);
                }
            });
    });

    console.log("launching application");
    Rally.launchApp('CustomApp', {
        name:'Defect Trend App',
        parentRepos:""
    });
    </script>
</head>
<body>
</body>

Pastebin - http://pastebin.com/Vf6jniGZ

Thanks, a lot. This worked like magic. However can you please let me know which app you referred for this functionality you have mentioned.Actually I need to have a limit, with a possibility to see the next few days in the chart as well. I will explain what is happening, I am showing this chart per release now typically a release is 30 days duration, where the dates are overlapping, so wanted to figure out this. Sorry to keep troubling you. — user3129202, Feb 20 '14 at 11:32
The link is in the main answer under "other code" but here it is . It's in the rally software app-catalog repo. https://github.com/RallySoftware/app-catalog/tree/1da67ee10afb99ebe780514c54cf814d9c12dbf9/src/apps/charts/cfd/project . Also, please accept the answer if it solved your problem so that it doesn't appear in the 'unanswered' list. Thanks! — Trever Shick, Feb 20 '14 at 13:53

Bar Chart with Rally.data.lookback.calculator.TimeSeriesCalculator

2 Answers2