条形图的日期范围选择器

Question

I want to implement Date Range selector for my barchart, below is the some of the code I wrote. I am showing stacked bar chart, it should dynamically update according to date range selected. Any suggestions on this. Thanks in advance

            _onDataLoadedfirst: function() {
                Ext.create('Ext.panel.Panel', {
                    title: 'Choose a future date:',
                    width: 200,
                    bodyPadding: 10,
                    renderTo: Ext.getBody(),
                    items: [{
                        xtype: 'datepicker',
                        minDate: new Date(),
                        handler: function(picker, date) {
                            // do something with the selected date
                        }
                    }]
                });         
            },  
            _onDataLoaded: function(store, data) {
                this.add(
                    {
                        xtype: 'rallychart',                                
                        height: new_height,
                        //width: 500,
                        series: [
                            {
                                type: 'bar',
                                dataIndex: 'ObjectCount',
                                name: 'Count',
                                visible: true
                            }
                        ],
                        //store: severityStore,
                        calculatorType: 'My.TrendCalc',
                        calculatorConfig : {},
                        chartConfig: {
                            chart: {
                                    zoomType: 'xy',
                                    type:'bar'
                            },
                            title: {
                                text: ' Open Defects(per Team and Severity)',
                                //align: 'center'
                            },
                            legend: {
                                reversed: true
                            },
                            //xField: 'Project',
                            xAxis: {
                                categories: new_projects,
                                type: 'text',
                                title: { text: 'Teams'},
                                minTickInterval: 5,
                                //labels : { rotation: 90 }
                            },
                            //yField: 'Severity',
                            yAxis: { 
                                min: 0,
                                //categories: teamGroups,
                                title: {
                                    text: 'Quantity of Defects'
                                }
                            },                                  
                            plotOptions: {
                                area: {
                                    stacking: 'percent',
                                    lineColor: 'black',
                                    lineWidth: 1,
                                    marker: {
                                        enabled: false
                                    },
                                    step: true,
                                    size: '100%'
                                },  
                                bar: {
                                    borderColor: "#000000",
                                    borderWidth: 0.2
                                },  
                                series: {
                                    stacking: 'normal',
                                    dataLabels: {
                                        enabled: true,
                                        color: 'white',
                                        align: 'center',
                                        x: 2,
                                        y: 5,                                           
                                        formatter:function(){
                                            if(this.y > 0)
                                                return this.y;
                                        },                                              
                                        style: {
                                            textShadow: '0 0 2px black, 0 0 2px black'
                                        }
                                    }
                                }
                            },
                        },      
                            //categories: teamGroups, 
                        series: [{  
                            name: "None",
                            data: get_values(proj_records, 0),
                            color: "#7CAED5"
                        },{
                            name: "Critical",
                            data: get_values(proj_records, 1),
                            color: "#66dacf"
                        },{
                            name: "Major",
                            data: get_values(proj_records, 2),
                            color: "#87c540"
                        },{ 
                            name: "Minor",
                            data: get_values(proj_records, 3),
                            color: "#9863b2"
                        },{                             
                            //Ext.Array.each(proj_records[0], function(rec) {
                            name: "Incidental",
                            data: get_values(proj_records, 4),
                            color: "#d73249"
                                //data: record.data;
                            //});
                        }]
                    }
                );
             }

Answer 1

Here is an example of a chart of Open/Closed defects that reloads with new data when a anther date is selected in the date picker. You will need to change metrics object to reflect allowed values in the State dropdown in your environment.

Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    launch: function() {
        var that = this;
        var minDate = new Date(new Date() - 86400000*90); //milliseconds in day = 86400000
        var datePicker = Ext.create('Ext.panel.Panel', {
            title: 'Choose a date:',
            width: 200,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'rallydatepicker',
                minDate: minDate,
                handler: function(picker, date) {
                     that.onDateSelected(date);
                }
            }]
        });        
        this.add(datePicker);
    },
    onDateSelected:function(date){
        this._date = date;
        this.defineCalculator();
        this.makeChart();
   },    

    defineCalculator: function(){
        var that = this;
        Ext.define("MyDefectCalculator", { 
            extend: "Rally.data.lookback.calculator.TimeSeriesCalculator",
            getMetrics: function () {
                var metrics = [
                   {
                        field: "State",
                        as: "Open",
                        display: "column",
                        f: "filteredCount",
                        filterField: "State",
                        filterValues: ["Submitted","Open"]
                   },
                    {
                        field: "State",
                        as: "Closed",
                        display: "column",
                        f: "filteredCount",
                        filterField: "State",
                        filterValues: ["Fixed","Closed"]
                    }
                ];  
                return metrics;
            }
        });
    },

    makeChart: function(){
        if (this.down('#myChart')) {
                this.remove('myChart');
        }
        var timePeriod = new Date(new Date() - this._date);

        var project = this.getContext().getProject().ObjectID;

        var storeConfig = this.createStoreConfig(project,timePeriod);

        this.chartConfig.calculatorConfig.startDate = this._date;
        this.chartConfig.calculatorConfig.endDate = new Date();
        this.chartConfig.storeConfig = storeConfig;
        this.add(this.chartConfig); 
    },

    createStoreConfig : function(project, validFrom ) {
        return {
            listeners : { 
                load : function(store,data) {
                    console.log("data",data.length);
                }
            },
            filters: [
                {
                    property: '_ProjectHierarchy',
                    operator : 'in',
                    value : [project] 
                },
                {
                    property: '_TypeHierarchy',
                    operator: 'in',
                    value: ['Defect']
                },
                {
                    property: '_ValidFrom',
                    operator: '>',
                    value: validFrom
                }
            ],
            autoLoad : true,
            limit: Infinity,
            fetch: ['State'],
            hydrate: ['State']
        };
    },
     chartConfig: {
        xtype: 'rallychart',
        itemId : 'myChart',
        chartColors: ['Red', 'Green'],

        storeConfig: { },
        calculatorType: 'MyDefectCalculator',

        calculatorConfig: {
        },

        chartConfig: {

            plotOptions: {
                column: { stacking: 'normal'}
            },
            chart: { },
            title: { text: 'Open/Closed Defects' },
            xAxis: {
                tickInterval: 1,
                labels: {
                    formatter: function() {
                        var d = new Date(this.value);
                        return ""+(d.getMonth()+1)+"/"+d.getDate();
                    }
                },
                title: {
                    text: 'Date'
                }
            },
            yAxis: [
                {
                    title: {
                        text: 'Count'
                    }
                }
            ]
            }
    }   

});

The example is in this github repo .