View Full Version : The problem with the size chart.

6 Aug 2009, 6:44 AM
In the API for the chart can be placed

autoHeight: true,
autoWidth: true, but with such paramterami chart does not appear, but if you do.

height: 500,
width: 500, it works...
My code, and took from the example

new Ext.chart.LineChart ((
autoScroll: true,
autoHeight: true,
autoWidth: true,
store: store,
url: '/ images/ext3/charts.swf',
xField: 'name',
yField: 'visits',
yAxis: new Ext.chart.NumericAxis ((
displayName: 'Visits',
labelRenderer: Ext.util.Format.numberRenderer ('0, 0 ')
tipRenderer: function (chart, record) (
return Ext.util.Format.number (record.data.visits,'0, 0 ') +' visits in '+ record.data.name;
)); What I am doing is not right? Why not work?
Thanks in advance.

6 Aug 2009, 7:49 AM
Where in the examples (http://www.extjs.com/deploy/dev/examples/chart/charts.js) does it show using autoHeight/Width for charts?

The examples use the size of a parent container, which you don't provide in your code.

6 Aug 2009, 10:43 PM

CLASS Ext.chart.LineChart (http://extjs.com/forum/../deploy/dev/docs/source/Chart.html#cls-Ext.chart.LineChart)

autoHeight (http://extjs.com/forum/../deploy/dev/docs/source/BoxComponent.html#cfg-Ext.BoxComponent-autoHeight) : Boolean
autoWidth (http://extjs.com/forum/../deploy/dev/docs/source/BoxComponent.html#cfg-Ext.BoxComponent-autoWidth) : Boolean

There is a API, then should work. Just try it with the parent component as an example to set the value effect is the same.

My problem can be solved or Ext can not do this?

6 Aug 2009, 11:29 PM
new Ext.Panel({
items: {
xtype: 'linechart',
store: this.finanseDataStore,
url: '/images/ext3/charts.swf',
xField: 'name',
yField: 'visits',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
tipRenderer : function(chart, record){
return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;

It works, but I'd like that would be the height of a dynamic

7 Aug 2009, 5:08 AM
Then you will need to attach your panel to some sort of layout that maintains the size of your components for you (like Viewport).

And I said where in the examples (as you listed), not in the API. The API also caveats autoWidth/Height (see autoWidth note below).

Note: Although many components inherit this config option, not all will function as expected with a width of 'auto'. Setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all.

If the browser is managing the width, be aware that resizes performed by the browser in response to changes within the structure of the Component cannot be detected. Therefore changes to the width might result in elements needing to be synchronized with the new width.

ie. using autoWidth/Height prevents Ext from managing the width/height of the object entirely.