PDA

View Full Version : Chart with listview filter



MSB
17 Oct 2013, 1:00 AM
Hello, I'm trying to create a chart where I can filter the data using elements from a list.
The Idea is that the list will contain a collection of items, each of these items are used as a key in the chart for displaying data.

Here's the chart I have:


Ext.define('view.chart.LocationStatisticsPerMonth', {
extend: 'Ext.chart.Chart',
alias: 'widget.LocationStatisticsPerMonthChart',
requires: [
'store.LocationStatisticsStore',
'store.TemplateStore',
'view.TitleToolbar'
],

constructor: function () {
this.store = Ext.create('store.LocationStatisticsStore', {
autoLoad: true, sorters: [{
property: 'YearMonth',
direction: 'ASC'
}]
});
this.store.getProxy().api.read = ServerControllers.Dashboard.LocationStatisticsPerMonth;
this.callParent(arguments);
},
animate: true,
shadow: true,
border: true,

legend: {
position: 'right'
},

axes: [{
type: 'Numeric',
position: 'left',
fields: ['TotalCount'],
title: false,
grid: true,
label: {
renderer: function (v) {
return String(v);
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['Location_Id'],
title: false,
label: {
rotate: {
degrees: 315
}


}


}],


series: [{
type: 'column',
axis: 'left',
gutter: 80,
xField: ['Location_Id'],
yField: ['TotalCount'],

tips: {
trackMouse: true,
width: 125,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String('Visitors: '+item.value[1]));
}
}
}]
});




How would I go about doing this? I haven't really been able to find a good example on this matter. Any help would be greatly appreciated.

Edit: for clarification they key I am aiming to represent in the list to be used as a filter is Location_Id.

scottmartin
21 Oct 2013, 1:32 PM
Can you use an ajax call to simply return the filtered data to the chart?

Scott.

MSB
22 Oct 2013, 10:54 PM
How would I do that? I'm relatively new to web and ext so I'm not really sure how to.
Could you provide some sort of example?

scottmartin
23 Oct 2013, 5:21 AM
Something like this:



Ext.Ajax.request({
url: 'getdata.php', // your server call
params: { myfilter: 'mylocation'}, // your filter to send to server to create filtered data
success: function(response) {
// filtered data from server response
var data = Ext.decode(response.responseText); // get response
chart.store.loadData(data); // load into chart store
},
failure: function(response) {
// oops
}
});


Scott.