PDA

View Full Version : Charting with ExtJS



esqueleto
19 Aug 2009, 6:43 AM
Hello to all

My name is Paulo and I'm from Lisbon, Portugal and for some time now that I want to start use the ExtJS framework, but some how never got the opportunity.

Now had found and excellent project to show this framework on work and I stuck on something.

My main application is developed in ASP.NET 3.5 using Microsoft MVC and what I want to do is using the charting features of the ExtJS 3.0.

I can put the chart on my WebPage in a static way. I have a aspx that returns the XML with the data I bind it to my chart.
To load the xml I use this code:

var store = new Ext.data.XmlStore({
url: '/InterventionReport.aspx',
record: 'test',
fields: [{ name: 'name' }, { name: 'visits', type: 'int' }, { name: 'views', type: 'int'}]
});
store.load();

then in the Items array in the linechart I say that my store is the loaded variable.
This works .. and everyone are pleased with this. When they are pleased, they ask for more things and now I don't know what to do.

Has been asked to create a criteria search and only show the chart with the selected data. In this case, they want to select an schedule intervention and check the impact on the network.

Using ASP.NET was simple. I should add some text boxes or combo boxes and according with that, I should get different data and everything works. Using this, I hope is the same, but how?
How can I selected different data according with the information provide by the user? What control should I use to do that? A ExtJS form?


can anyone show me how can I do this?


regards
Paulo Aboim Pinto
Odivelas - Portugal

StuartAshworth
19 Aug 2009, 7:29 AM
Firstly you need to add the user input to allow criteria to be supplied. I just made a chart with a datefield in the tbar property for example which restricts the date range of the chart. Then you can attach these values to the store's reload call (as POST or GET paramaters) and then deal with them as you see fit in your ASPX page so that the XML returned is only a subset of the complete data.




//store
var store = new Ext.data.XmlStore({
url: '/InterventionReport.aspx',
record: 'test',
baseParams: { criteria1: 'test, criteria2: 'test' },
fields: [{ name: 'name' }, { name: 'visits', type: 'int' }, { name: 'views', type: 'int'}]
});
store.load();

//toolbar definition example
tbar: [{
xtype: 'datefield',
value: new Date().add(Date.DAY, -7),
format: 'd/m/Y'
}]



Then you can add a refresh button to pick up the field values and supply them in as your baseParams' values.

Hope this helps you get on the right track...

Stuart

esqueleto
19 Aug 2009, 7:50 AM
I understand what you said . .that what I want to do, by I'm a .NET guy and not a JavaScript guy .. and I did not understand nothing from the code.

what I have is this:

Chart.js


/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.chart.Chart.CHART_URL = 'charts.swf';

Ext.onReady(function() {

/*
var store = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
data: [
{name:'Jul 07', visits: 245000, views: 3000000},
{name:'Aug 07', visits: 240000, views: 3500000},
{name:'Sep 07', visits: 355000, views: 4000000},
{name:'Oct 07', visits: 375000, views: 4200000},
{name:'Nov 07', visits: 490000, views: 4500000},
{name:'Dec 07', visits: 495000, views: 5800000},
{name:'Jan 08', visits: 520000, views: 6000000},
{name:'Feb 08', visits: 620000, views: 7500000}
]
});
*/

var store = new Ext.data.XmlStore({
url: '/InterventionReport.aspx',
record: 'test',
baseParams: { criteria1: 'test', criteria2: 'test' },
fields: [{ name: 'name' }, { name: 'visits', type: 'int' }, { name: 'views', type: 'int'}]
});
store.load();

//toolbar definition example
tbar: [{
xtype: 'datefield',
value: new Date().add(Date.DAY, -7),
format: 'd/m/Y'
}]

// extra extra simple
new Ext.Panel({
title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
renderTo: 'container',
width: 500,
height: 300,
layout: 'fit',

items: {
xtype: 'linechart',
store: store,
xField: 'name',
yField: 'visits',
listeners: {
itemclick: function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
}
}
});
});


Where I put my fields? how can I send the value (after submit) to the URL?


regards
Paulo

StuartAshworth
19 Aug 2009, 8:50 AM
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.chart.Chart.CHART_URL = 'charts.swf';

Ext.onReady(function() {

/*
var store = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
baseParams: { dateRange: '' },
data: [
{name:'Jul 07', visits: 245000, views: 3000000},
{name:'Aug 07', visits: 240000, views: 3500000},
{name:'Sep 07', visits: 355000, views: 4000000},
{name:'Oct 07', visits: 375000, views: 4200000},
{name:'Nov 07', visits: 490000, views: 4500000},
{name:'Dec 07', visits: 495000, views: 5800000},
{name:'Jan 08', visits: 520000, views: 6000000},
{name:'Feb 08', visits: 620000, views: 7500000}
]
});
*/

var store = new Ext.data.XmlStore({
url: '/InterventionReport.aspx',
record: 'test',
baseParams: { criteria1: 'test', criteria2: 'test' },
fields: [{ name: 'name' }, { name: 'visits', type: 'int' }, { name: 'views', type: 'int'}]
});
store.load();

// extra extra simple
new Ext.Panel({
title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
renderTo: 'container',
width: 500,
height: 300,
layout: 'fit',
tbar: [{
xtype: 'datefield',
value: new Date().add(Date.DAY, -7),
format: 'd/m/Y',
listeners: {
'select': function(){
this.items.get(0).store.baseParams.dateRange = this.getTopToolbar().items.get(1).getValue();
this.items.get(0).store.load();
}.createDelegate(this)
}
}],

items: {
xtype: 'linechart',
store: store,
xField: 'name',
yField: 'visits',
listeners: {
itemclick: function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
}
}
});
});

Try something like this. Ive not tested it so cant guarantee it works!

esqueleto
19 Aug 2009, 9:14 AM
tkx again for the reply ...

It's almost working. Now I have the tbar on the pannel I can write anything and when I press enter, the page submit.

I think that the problem now it's how the data is returned. I return an XML but maybe I should use another kind of reader (Jason Reader or ProxyURL).
I saw several examples using different readers and I don't understand what's the big differences.

What I don't understand is how my ASPX (or controller.. whatever) receive the search criteria that user supply in the form.
In your example you are trying to send the data to the store. What should I have in the store to receive this data?


Regards
Paulo Aboim Pinto
Odivelas - Portugal



PS: tkx one more time for the patience with me.

StuartAshworth
19 Aug 2009, 9:51 AM
If you look at the store's fetch in FireBug you can see the parameters being passed with the POST method. You can then access them in your ASPX page using something like..



string myVar = Request["dateRange"];


Your store doesnt have to do anything else to receive the filtered data except request the page with the necessary parameters - all it does is deal with the received XML/JSON and keep track of it. Its the ASP page that decides what data to send back based on the values set in the input fields.

Hope that makes sense!

esqueleto
20 Aug 2009, 1:33 AM
unfortunately this solution didn't work. This should be the solution but some how I cannot make it work.

First, there are no "dateRange" object. Because of that I add the name to the object. I did like this:

tbar: [{
xtype: 'datefield',
name: 'dateRange',
value: new Date().add(Date.DAY, -7),
format: 'd/m/Y'
}]

even with this, it's not working. Some how there is a problem.
I'm trying to install the firebug here. The problem is the administration privileges that I don't have and I cannot install firefox (company politics)

this is the way to define the name of my object?


regards
Paulo Aboim Pinto
Odivelas - Portugal

mjhaston
8 Apr 2010, 6:52 AM
Trying to accomplish what Stoot98 has. I'm close, but as usual I'm missing having my button submit to my store. I'm going off of the sample chart that does the reload. I'd like to reload my chart when a date is chosen and tbar button clicked.

Any suggestions are greatly appreciated.






Ext.onReady(function(){

var store = new Ext.data.JsonStore({
url: '/path/r_fillrate.pgm',
autoLoad: true,
root: 'data',
baseParams: {
invoiceDate: 'invoiceDate'
},
fields: [{
name: 'warehouse',
type: 'string'
}, {
name: 'orders',
type: 'int'
}, {
name: 'backOrders',
type: 'int'
}]
});


var chartPanel = new Ext.Panel({
width: 800,
height: 400,
renderTo: document.body,
title: 'Fill Rate Demo',
tbar: [ //'->',
{
xtype: 'datefield',
fieldLabel: 'Invoice Date',
name: 'invoiceDate',
id: 'invoiceDate',
format: 'd/m/Y',
handler: function(){
store.baseParams = {
invoiceDate: Ext.getCmp('invoiceDate').getRawValue(),
dummy: 'button'
};
}

}, '-', {
text: 'Refresh Chart',
tooltip: 'Refresh Chart',
id: 'reset',
iconCls: 'reset'
}],
items: {
xtype: 'stackedbarchart',
store: store,
yField: 'warehouse',
xAxis: new Ext.chart.NumericAxis({
stackingEnabled: false,
title: "Quantities"
}),
//yAxis: new Ext.chart.NumericAxis({
// title: 'Warehouse',
// titleRotation: -45
//}),
extraStyle: {
yAxis: {
titleRotation: -90
}
},
series: [{
xField: 'backOrders',
displayName: 'Back Orders for '
}, {
xField: 'orders',
displayName: 'Orders for '

}]
}
});

});