View Full Version : Set size of axes title using chart gauge

26 Apr 2012, 6:57 AM

I've got a few tweaks I would like to make to the below gauge that I can't seem to work out how from the documentation.

I would like to;

1) Increase the size of the title and numeric indexes on the gauge.
2) Append a number from ['calls'] to the end of the axes title and refresh each time the store is reloaded via ajax.
3) Append the value from ['calls'] (What the gauge is based on) to the axes title.

Many thanks,



Ext.create('Ext.Window', { width: 400,
height: 250,
maximizable: true,
title: '<?=$CCTrimmed?>',
renderTo: Ext.getBody(),
layout: {
type: 'hbox',
align: 'stretch'
items: [{
xtype: 'chart',
style: 'background:#B3D2FF',
animate: {
easing: 'elasticIn',
duration: 1000
store: cc<?=$CCTrimmed?>Store,
insetPadding: 25,
flex: 1,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 10,
steps: 10,
margin: -10,
title: '<?=$CCTrimmed?>'
series: [{
type: 'gauge',
title: '<?=$CCTrimmed?>',
field: ['calls'],
donut: false,
colorSet: ['#3AA8CB', '#ddd'],
label: {
field: '<?=$CCTrimmed?>',
display: 'middle',
renderer: Ext.util.Format.numberRenderer('0'),
color: '#333',
'text-enchor': 'middle'