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

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>

Solution

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