PDA

View Full Version : Big problem with charting.



feanor91
26 Jan 2012, 5:07 AM
Hello

I have big porblem with charting.

I have to :
add a title to my charts
create a separation between charts

Here, what I have to achieve.
31043

Here the same but without fill parameters. You can see the titles.

31044

When I fill, the title disapeared. Here the code for a chart (all are the same, exept the store):



var NumberOOBFChart= Ext.create('Ext.chart.Chart', {
flex: 2,
width: '99.99%',
animate: true,
store: stoOOBF,
shadow: false,
background: {
fill: '#eee'
},
legend: {
//labelFont: '8px Arial',
position: 'bottom',
boxStroke: '#eee',
boxFill: '#eee'
},
items: [{
type : 'text',
text : '# OOBF',
font : '14px Arial',
width : 100,
height: 30,
x : 180, //the sprite x position
y : 10 //the sprite y position
}],
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['OSA', 'Ventilation', '3rd Party products'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
},
{
type: 'Time',
position: 'bottom',
fields: ['month'],
dateFormat: 'M',
constrain: true,
step: [Ext.Date.MONTH, 1],
fromDate: new Date('1/1/2011'),
toDate: new Date('1/1/2012'),
label: {
rotate: {
degrees: 270
}
}
}
],
series: [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'month',
yField: 'OSA',
markerConfig: {
type: 'cross',
size: 3,
radius: 3,
'stroke-width': 0
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'month',
yField: 'Ventilation',
markerConfig: {
type: 'circle',
size: 3,
radius: 3,
'stroke-width': 0
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'month',
yField: '3rd Party products',
markerConfig: {
type: 'circle',
size: 3,
radius: 3,
'stroke-width': 0
}
}
]
});

I try to use border parameters in charts definition, but it did not work.

I try to define the title sprite like that :



var ETTRChartSurface = ETTRChart.createSurface();


var sprite = Ext.create('Ext.draw.Sprite', {
type: 'text',
surface: ETTRChartSurface,
text: 'Simple text',
font: '12px Arial',
x: 50,
y: 0,
width: 100,
height: 100
});
sprite.show(true);
ETTRChartSurface.add(sprite);


but


ETTRChart.createSurface();

return undefined, so js code crash.

I could not put my charts into panel because I must have fit layout since the begining and I use collumn and vbox in each collum to put my charts in.

Chart title are really a missing thing.

Did someone will have a solution I ould apply please?