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;
//});
}]
}
);
}
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.