PDA

View Full Version : MVC, update chart config or push new chart from controller



ffanf
1 Jan 2013, 8:20 AM
Hi,

First happy new year to all of you.

I'm currently using MVC and displaying a chart inside a panel, content of this chart gets updated when I click on a grid cell (the store gets reloaded with new data).
This part is pretty simple and works like a charm.

Now, I would like to be able to change configuration of the chart dynamically, from the controller (for example displaying columns instead of lines, using other elements of the store, ...).

I made different tries but without success.

First, here is my panel and current chart:
Panel:


Ext.define('WPAK.view.mastergrid.MasterGridChartsThumbnail', {
extend: 'Ext.panel.Panel',
alias: 'widget.mastergridchartsthumbnail',
title: 'Chart',
width: 300,
height: 200,
layout: 'fit',
animate: true,
shadow: true,
items: [{
xtype: 'mastergridcharts'
}]
});


Chart (mastergridcharts)


Ext.define('WPAK.view.mastergrid.MasterGridCharts', {
extend: 'Ext.chart.Chart',
alias: 'widget.mastergridcharts',
config: {
store: 'mastergrid.MasterGrid',
axes: [{
type: 'Numeric',
position: 'left',
fields: ['col3']
}, {
type: 'Category',
position: 'bottom',
fields: ['col2'],
grid: true
}],
series: [{
type: 'line',
xField: 'col2',
yField: 'col3',
smooth: true
}]
}
});


I tried with setters, using the following code inside my controller (first to change the series).

Controller:


loadChart: function() {
currentSeries = [{
type: 'column',
xField: 'col2',
yField: 'col3',
smooth: true
}];
this.getMastergridcharts().setSeries(currentSeries);
},


But I get this error with Firebug:


TypeError: seriesItems is undefinedseriesLen = seriesItems.length,

By digging online I saw that some suggest to declare a new chart and "push" it to the view.

Controller:


loadChart: function() {
var newChart = new Ext.chart.Chart({
store: 'mastergrid.MasterGrid',
axes: [{
type: 'Numeric',
position: 'left',
fields: ['col3']
}, {
title: 'Time',
type: 'Category',
position: 'bottom',
fields: ['col2'],
grid: true
}],
series: [{
type: 'column',
xField: 'col2',
yField: 'col3',
smooth: true
}]
});
},


But for this option I have a very simple question, how do I push this chart to my panel to automatically replace

Panel:


items: [{
xtype: 'mastergridcharts'
}]


Thanks a lot for your help, I'm sure the answer is probably very simple but I'm kind of stuck right now.

ffanf
1 Jan 2013, 9:25 AM
Just a quick update, regarding the setter, I think I found a simple way to avoid the error:


var currentSeries = this.getMastergridcharts().getSeries();
currentSeries.items[0].type = 'column';
this.getMastergridcharts().setSeries(currentSeries);


But the chart does not get updated (from line to columns).

I tried with

this.getMastergridcharts().redraw();
But without success.

Any suggestions are welcome

ffanf
3 Jan 2013, 8:50 AM
Hi,

I reply to myself as I found my way around:

In Controller


// Clear previous store
this.getMastergridMasterGridStore().removeAll();

// Declare new chart
var newChartThumb = new Ext.chart.Chart({
store: this.getMastergridMasterGridStore(),
axes: newAxes,
series: newSeries
});
// Push new chart to panel
var thumbItems = this.getMastergridchartsthumbnail().getItems();
thumbItems.items[0] = newChartThumb;
this.getMastergridchartsthumbnail().setItems(thumbItems);

//Then I reload my store (to get new data into the chart)
this.getMastergridMasterGridStore().load();


Result is a new chart, with content coming from store (where store structure could have changed).