PDA

View Full Version : refresh chart line, based on the information that was filled in the form



ggleny
1 Jul 2013, 11:03 AM
Hi
I'm currently stuck with something i can't achieve using the library. I have a chart line that refreshes every second. In the same panel i have a form where you can complete day, hour and minutes, which has a "Reload" button for the graph. I would like to refresh the chart line, using the data completed in the form as a parameter. I looked everywhere for some kind of example but i couldn't find anything that helped me. I'm attaching the following link, which has a prototype of what i want to achieve.
http://jsfiddle.net/Ggiani/hrZYN/5/
And here I copy the code of the panel.


Ext.require('Ext.chart.*');


Ext.onReady(function () {
var chart, timeAxis,dateFrom,data1;
var required = '<span style=\"color:red;font-weight:bold\" data-qtip=\"Required\">*</span>';


var top = Ext.widget({
xtype: 'form',
id: 'multiColumnForm',
collapsible: true,
collapsed:true,
frame: true,
url: 'modules/statistics/performance/graphLive.php?contextDevice=mbm_sync&execute=true',
method: 'GET',
height :100,
title: 'Reload Data Statistic Graph',
bodyPadding: '5 5 0',
width: 600,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},


items: [{
xtype: 'container',
anchor: '100%',
layout: 'hbox',
items:[{
xtype: 'container',
flex: 1,
layout: 'anchor',
items: [{
xtype:'datefield',
fieldLabel: 'Start Date',
afterLabelTextTpl: required,
allowBlank: false,
name: 'fromDate',
anchor:'95%',
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
value: new Date()
}]
},{
xtype: 'container',
flex: 1,
layout: 'anchor',
items: [{
xtype: 'numberfield',
anchor: '95%',
name: 'fromHour',
fieldLabel: 'Start Minute',
value: new Date().getHours(),
maxValue: 23,
minValue: 0
}]
},
{
xtype: 'container',
flex: 1,
layout: 'anchor',
items: [{
xtype: 'numberfield',
anchor: '95%',
name: 'fromMinute',
fieldLabel: 'Start Minute',
value: new Date().getMinutes(),
maxValue: 59,
minValue: 0
}]
}]
}],


buttons: [{
text: 'Reload Data',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
//window.console.log(form.getValues());
var valueForm = form.getValues();
window.console.log(valueForm);
var newDate = valueForm.fromDate+' '+valueForm.fromHour+':'+valueForm.fromMinute+':00';
window.console.log('newDate = '+newDate);
store.loadData(generateData(newDate));




}
}
}]
});


var generateData = (function() {
var data = [], i = 0,
last = false,
date = new Date(2011, 1, 1),
seconds = +date,
min = Math.min,
max = Math.max,
random = Math.random,
status = false;
return function() {
data = data.slice();
if(dateFrom || status == true){
if(dateFrom){ data1 = dateFrom; data = [];data = data.slice();}
status = true;
newData = (dateFrom)? new Date(data1): Ext.Date.add(new Date(data1),Ext.Date.SECOND,i++);

data.push({
date: newData,
visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0)),
views: min(100, max(last? last.views + (random() - 0.5) * 10 : random() * 100, 0)),
users: min(100, max(last? last.users + (random() - 0.5) * 20 : random() * 100, 0))
});
}
if(status == false || dateFrom) {
data.push({
date: new Date(),
visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0)),
views: min(100, max(last? last.views + (random() - 0.5) * 10 : random() * 100, 0)),
users: min(100, max(last? last.users + (random() - 0.5) * 20 : random() * 100, 0))
});
}




last = data[data.length -1];
return data;
};
})();


var store = Ext.create('Ext.data.JsonStore', {
fields: ['date', 'visits', 'views', 'users'],
data: generateData()
});


var intr = setInterval(function() {
var gs = generateData();
var toDate = (data1)?Ext.Date.add(new Date(data1), Ext.Date.SECOND,120):timeAxis.toDate,
lastDate = gs[gs.length - 1].date,
markerIndex = chart.markerIndex || 0;
if (+toDate < +lastDate) {
markerIndex = 1;
timeAxis.toDate = lastDate;
timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(timeAxis.fromDate), Ext.Date.SECOND,1);
chart.markerIndex = markerIndex;
}
store.loadData(gs);
}, 1000);


var win = Ext.create('Ext.window.Window', {
width: 800,overflowY :'auto',
height: 600,
minHeight: 400,
minWidth: 550,
maximizable: true,
title: 'Live Animated Chart',
autoShow: true,
layout: 'anchor',
items: [top,{
xtype: 'chart',
style: 'background:#fff',
itemId: 'chartCmp',
anchor:'95% 95%',
store: store,
shadow: false,
animate: true,
axes: [{
type: 'Numeric',
minimum: 0,
maximum: 100,
position: 'left',
fields: ['views', 'visits', 'users'],
title: 'Number of Hits',
grid: {
odd: {
fill: '#dedede',
stroke: '#ddd',
'stroke-width': 0.5
}
}
}, {
type: 'Time',
position: 'bottom',
fields: 'date',
step: [Ext.Date.SECOND, 10],
label:{
rotate: { degrees: 270 }
},
title: 'Time',
dateFormat: 'H:i:s',
groupBy: 'minutes,seconds',
aggregateOp: 'sum',
constrain: true,
fromDate:new Date(),
toDate: Ext.Date.add(new Date(), Ext.Date.SECOND, 120),
grid: true

}],
series: [{
type: 'line',
smooth: false,
axis: ['left', 'bottom'],
xField: 'date',
yField: 'visits',
label: {
display: 'none',
field: 'visits',
renderer: function(v) { return v >> 0; },
'text-anchor': 'middle'
},
markerConfig: {
radius: 5,
size: 5
}
},{
type: 'line',
axis: ['left', 'bottom'],
smooth: false,
xField: 'date',
yField: 'views',
label: {
display: 'none',
field: 'visits',
renderer: function(v) { return v >> 0; },
'text-anchor': 'middle'
},
markerConfig: {
radius: 5,
size: 5
}
},{
type: 'line',
axis: ['left', 'bottom'],
smooth: false,
xField: 'date',
yField: 'users',
label: {
display: 'none',
field: 'visits',
renderer: function(v) { return v >> 0; },
'text-anchor': 'middle'
},
markerConfig: {
radius: 5,
size: 5
}
}]
}]
});
chart = win.child('#chartCmp');
timeAxis = chart.axes.get(1);
});

slemmon
3 Jul 2013, 11:25 AM
Are you looking to completely refresh the chart with the new data paramaters from the form? You'll wipe the chart clean and reload with the new dataset?

ggleny
3 Jul 2013, 11:41 AM
Yes, so the chart would refresh and the data would reload starting at the date and time given in the form.
Thanks for your reply /:)

slemmon
3 Jul 2013, 3:33 PM
You'll be able to clear the chart by clearing all items in the chart's store: chart.getStore().removeAll().

I assume from there you'll also destroy the timer and restart a new one altogether including the params set in your form.