PDA

View Full Version : chart!! the skin of series in chart can't be visible!!!!!



yanasdf789
9 Jul 2010, 12:20 AM
my code :

......html
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: 'West',
split: true,
width: 200,
minSize: 175,
maxSize: 700,
collapsible: true,
margins: '0 0 0 5',
layout: {
type: 'accordion',
animate: true
},
items: [{
contentEl: 'west',
title: 'Navigation',
border: false,
iconCls: 'nav', // see the HEAD section for style used
items:[chartPanel1]
}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
border: false,
iconCls: 'settings'
}]
.......
........js........
var store4 = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
data: [
{name:'Jul 07', visits: 245000, views: 3000000},
{name:'Aug 07', visits: 240000, views: 3500000},
{name:'Sep 07', visits: 355000, views: 4000000},
{name:'Oct 07', visits: 375000, views: 4200000},
{name:'Nov 07', visits: 490000, views: 4500000},
{name:'Dec 07', visits: 495000, views: 5800000},
{name:'Jan 08', visits: 520000, views: 6000000},
{name:'Feb 08', visits: 620000, views: 7500000}
]
});




var chartPanel1 = new Ext.Panel({
width:700,
height:500,
layout:'fit',
id:'chart_Panel',
items: {
xtype: 'columnchart',
id:'chart_success',

store:store4 ,
//url:'../lib/ext-3.2.1/resources/charts.swf',
xField: 'name',
chartStyle: {
padding: 10,
animationEnabled: true,
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
legend:{
display:"bottom",
spacing:2,
padding:5,
font:{
name : 'Tahoma',

size : 12,
bold : true
}
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
labelRotation:-45,
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
titleRotation:-90,
color: 0x69aBc8,
//titleFont:{color:0xeeeeee},
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
},
series:[
{
type: 'column',
displayName: 'total',
yField: 'visits',
style: {
image:'bar.PNG', //.............change the style like this "bar.PNG"
mode: 'stretch',
color:0x3366CC,
size:20
}
}

] }

});


why the bar style can't visible like 'bar.PNG' i changed
(
style: {
image:'bar.PNG', //.............change the style like this "bar.PNG"
mode: 'stretch',
color:0x3366CC,
size:20
)

11 Jul 2010, 8:58 AM
Can you PLEASE post code within code tags!?!?

11 Jul 2010, 8:58 AM
is the image in the ROOT of your site or some relative path!?