specifying “From” to “Time” drop down calendar in Rally for a chart

问题

I have a "Project cumulative flow" chart that is working. It currently pulls data for last 3 months from Rally and displays it correctly in the chart. However, now I want to provide the a "From" and "To" drop down calendar, so that user can change the range of dates to what he wants. So, by default the user will be shown 3 months and no the side of the chart there should be a "From" and "To" drop down calendar for user to change the range if he wishes to. I have a part of this working. I have added the date format-er, but am not able to extract the values selected by user in that field, and then refresh my Chart. Can please help get me here? thanks a lot.

    /*
 * Load 8.2 open Defect trend
 * */
_82openDefect: function() {
    this.chart = {
            xtype: 'rallychart',
            storeType: 'Rally.data.lookback.SnapshotStore',
            storeConfig: this._82getStoreForopenDefect(),
            calculatorType: 'Rally.example.CFDCalculator',
            calculatorConfig: {
                  stateFieldName: 'Severity',
                  stateFieldValues: ['P1 - Crash/Data Loss, upgrade/migration fail', 
                                     'P2 - Major Problem, loss of stability or feature functionality', 
                                     'P3 - Minor Problem, improves customer experience',
                                     'P4 - Cosmetic, okay to defer'
                                     ]
            },
            width: 1000,
            height: 600,
            chartConfig: this._82getopenDefectConfig()
        };
    this.chartContainer.add(this.chart);
    this._releaseContainer();
    this._dateFormat();
},

_82getStoreForopenDefect: function() {
    return {
        find: {
            _TypeHierarchy: { '$in' : [ 'Defect' ] },
            Children: null,
            _ProjectHierarchy: this.getContext().getProject().ObjectID,
            _ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -120)) },
            State: "Open",
            //Release: 19388025787 is for 8.2
            Release: 19388025787,
            //Severity: "P1 - Crash/Data Loss, upgrade/migration fail",
        },
        fetch: ['Severity','Release','Project','SubmittedBy','Name'],
        hydrate: ['Severity','Release','Project','SubmittedBy','Name'],
        sort: {
            _ValidFrom: 1
        },
        context: this.getContext().getDataContext(),
        limit: Infinity
    };
},

_82getopenDefectConfig: function() {
    console.log("starting 8.2 open defect chart");
    return {
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: '8.2 Open Defects'
        },
        xAxis: {
            tickmarkPlacement: 'on',
            tickInterval: 20,
            title: {
                text: 'Date'
            }
        },
        yAxis: [
            {
                title: {
                    text: 'Count'
                }
            }
        ],
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            },
            area: {
                stacking: 'normal'
            }
        }
    };
},
_dateFormat: function() {
    this.dateFrmt = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        width: 300,
        bodyPadding: 10,
        title: 'Dates',
        items: [{
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'Date',
            name: 'date',
            // The value matches the format; will be parsed and displayed using that format.
            format: 'm d Y',
            value: '2 4 1978'
        }, {
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'Date',
            name: 'date',
            // The value does not match the format, but does match an altFormat; will be parsed
            // using the altFormat and displayed using the format.
            format: 'm d Y',
            altFormats: 'm,d,Y|m.d.Y',
            value: '2.4.1978'
        }]
    });
    this.chartContainer.add(this.dateFrmt);
},
      _releaseContainer: function () {
    this.relContainer = Ext.create('Ext.Container', {
    items: [{
        xtype: 'rallyreleasecombobox',
    }],
    listeners: function(releasecombobox) {
        ready: this._loadReleaseChart(this.relContainer.getValue());
       select: this._loadReleaseChart("8.1");
        scope: this
    }     
    });
    //console.log(this.relContainer.getValue());
    this.chartContainer.add(this.relContainer);
},

This is the screen shot of what it looks like currently:

回答1:

The chart component does not have a way to refresh- you'll have to destroy it and re-add a new one, with data populated using the dates from your date fields.

来源：https://stackoverflow.com/questions/33743590/specifying-from-to-time-drop-down-calendar-in-rally-for-a-chart