Code:
Ext.application({
name: 'Fiddle',
launch: function() {
var chart, timeAxis;
var sampling = 1; // Hour
// 0 --> Minute
// 1 --> Hour
// 2 --> Day
//// minute data between 1:15PM to 2:17PM 2/24/2015 IST
var minutesData = [{
"time": 1424763900000,
"max": -1.0,
"min": -1.0,
"usage": 8.0
}, {
"time": 1424764080000,
"max": -1.0,
"min": -1.0,
"usage": 8.0
}, {
"time": 1424764260000,
"max": -1.0,
"min": -1.0,
"usage": 8.0
}, {
"time": 1424764440000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424764620000,
"max": -1.0,
"min": -1.0,
"usage": 8.0
}, {
"time": 1424764800000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424764980000,
"max": -1.0,
"min": -1.0,
"usage": 8.0
}, {
"time": 1424765160000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424765340000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424765520000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424765700000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424765880000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424766060000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424766240000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424766420000,
"max": -1.0,
"min": -1.0,
"usage": 8.0
}, {
"time": 1424766600000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424766780000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424766960000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424767140000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}, {
"time": 1424767320000,
"max": -1.0,
"min": -1.0,
"usage": 7.0
}]
// hour data between 3am to 12am 2/24/2015 IST
var hourData = [{
"time": 1424727000000,
"max": -1.0,
"min": -1.0,
"usage": 89.86
}, {
"time": 1424730600000,
"max": -1.0,
"min": -1.0,
"usage": 89.95
}, {
"time": 1424734200000,
"max": -1.0,
"min": -1.0,
"usage": 89.95
}, {
"time": 1424737800000,
"max": -1.0,
"min": -1.0,
"usage": 89.81
}, {
"time": 1424741400000,
"max": -1.0,
"min": -1.0,
"usage": 89.67
}, {
"time": 1424745000000,
"max": -1.0,
"min": -1.0,
"usage": 89.81
}, {
"time": 1424748600000,
"max": -1.0,
"min": -1.0,
"usage": 90.0
}, {
"time": 1424752200000,
"max": -1.0,
"min": -1.0,
"usage": 89.9
}, {
"time": 1424755800000,
"max": -1.0,
"min": -1.0,
"usage": 90.0
}, {
"time": 1424759400000,
"max": -1.0,
"min": -1.0,
"usage": 85.05
}]
// Day Data between 22 Sun to 16 Mon Feb 2015 IST
var dayData = [{
"time": 1424111400000,
"max": -1.0,
"min": -1.0,
"usage": 158.42
}, {
"time": 1424197800000,
"max": -1.0,
"min": -1.0,
"usage": 158.43
}, {
"time": 1424284200000,
"max": -1.0,
"min": -1.0,
"usage": 158.52
}, {
"time": 1424370600000,
"max": -1.0,
"min": -1.0,
"usage": 158.66
}, {
"time": 1424457000000,
"max": -1.0,
"min": -1.0,
"usage": 158.66
}, {
"time": 1424543400000,
"max": -1.0,
"min": -1.0,
"usage": 158.62
}, {
"time": 1424629800000,
"max": -1.0,
"min": -1.0,
"usage": 158.69
}]
var store = Ext.create('Ext.data.JsonStore', {
fields: ['time', 'usage'],
data: hourData
});
function zoomin(button) {
var panel = button.up('window');
var zoomoutBtn = panel.down('#zoomout');
var chartObj = panel.down('cartesian');
var axes = chartObj.getAxes();
sampling--;
if (sampling === 0) {
button.setDisabled(true);
}
if (zoomoutBtn.isDisabled()) {
zoomoutBtn.setDisabled(false);
}
axes = setScaling(axes);
chartObj.setAxes(axes);
loadChartData(chartObj);
}
function zoomout(button) {
var panel = button.up('window');
var zoominBtn = panel.down('#zoomin');
var chartObj = panel.down('cartesian');
var axes = chartObj.axes;
sampling++;
if (sampling === 2) {
button.setDisabled(true);
}
if (zoominBtn.isDisabled()) {
zoominBtn.setDisabled(false);
}
axes = setScaling(axes);
chartObj.setAxes(axes);
loadChartData(chartObj);
}
function loadChartData( chartObj ) {
var chrtStore = chartObj.getStore();
if (sampling === 0) {
chrtStore.loadData(minutesData);
} else if (sampling === 1) {
chrtStore.loadData(hourData);
} else if (sampling === 2) {
chrtStore.loadData(dayData);
}
}
function setScaling (axes) {
var timeAxis = axes[1];
if (sampling === 0) {
timeAxis.setTitle('Minutes');
timeAxis.setDateFormat('G:i');
timeAxis.setStep([Ext.Date.MINUTE, 1]);
timeAxis.setFromDate(new Date('2/24/2015 01:15:00 PM GMT+530')),
timeAxis.setToDate(new Date('2/24/2015 02:15:00 PM GMT+530'));
} else if (sampling === 1) {
timeAxis.setTitle('Hour');
timeAxis.setDateFormat('G:i');
timeAxis.setStep([Ext.Date.HOUR, 1]);
timeAxis.setFromDate(new Date('2/24/2015 04:00:00 AM GMT+530')),
timeAxis.setToDate(new Date('2/24/2015 04:00:00 PM GMT+530'));
} else if (sampling === 2) {
timeAxis.setTitle('Day');
timeAxis.setDateFormat('d D');
timeAxis.setStep([Ext.Date.DAY, 1]);
timeAxis.setFromDate(new Date('2/16/2015 04:15:00 AM GMT+530')),
timeAxis.setToDate(new Date('2/24/2015 02:15:00 PM GMT+530'));
}
return axes;
}
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
maximizable: true,
layout: 'fit',
items: {
xtype: 'cartesian',
itemId: 'chartCmp',
store: store,
axes: [{
type: 'numeric',
position: 'left',
fields: ['usage'],
title: {
text: 'Sample Values',
fontSize: 15
},
grid: true,
minimum: 0
}, {
type: 'time',
position: 'bottom',
fields: ['time'],
title: 'HOUR',
dateFormat: 'G:i',
step: [Ext.Date.HOUR, 1],
constrain: true,
fromDate: new Date('2/24/2015 04:00:00 AM GMT+530'),
toDate: new Date('2/24/2015 04:00:00 PM GMT+530'),
}],
series: {
type: 'area',
subStyle: {
fill: ['blue']
},
xField: 'time',
yField: ['usage']
}
},
bbar: [{
xtype: "button",
text: 'zoomin',
itemId:'zoomin',
handler: function(button) {
zoomin(button);
}
}, {
xtype: "button",
text: 'zoomout',
itemId:'zoomout',
handler: function(button) {
zoomout(button);
}
}]
}).show();
chart = win.child('#chartCmp');
timeAxis = chart.axes[1];
}
});
ExtJS 5.1 Charts : Unable to load store data after changing the "time" axis
Aucun commentaire:
Enregistrer un commentaire