View Full Version : Chart with listview filter

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: [

constructor: function () {
this.store = Ext.create('store.LocationStatisticsStore', {
autoLoad: true, sorters: [{
property: 'YearMonth',
direction: 'ASC'
this.store.getProxy().api.read = ServerControllers.Dashboard.LocationStatisticsPerMonth;
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.

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


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?

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

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