PDA

View Full Version : chart! how to change the style.....



yanasdf789
8 Jul 2010, 1:57 AM
my chart like this:
items: {
xtype: 'columnchart',
id:'chart_success',
store:storepolice,
//url:'../lib/ext-3.2.1/resources/charts.swf',
xField: 'date

series:
[
new Ext.chart.ColumnSeries({
type: 'column',
displayName: 'total',
yField: 'total',
style: {
image:'bar.gif',
mode: 'stretch',
color:0x3366CC
}
})
]

why my bar in chart don't look like the style of “ bar.gif'?

when i defininate the style
style: {
image:'bar.gif',
mode: 'stretch',
color:0x3366CC
}

what else should i do? if i defininate the bar style with 'bar.gif'?
and the 'url' is a required parameter ?

Condor
8 Jul 2010, 2:10 AM
1. Is bar.gif in the same directory as your html file?
2. The url is not required. It will default to 'http://yui.yahooapis.com/2.8.0/build/charts/assets/charts.swf' when not specified.

yanasdf789
8 Jul 2010, 4:53 AM
yeah~~~i am sure i put the bar.gif in the same directory as my html file...

is there other problem i missed ? Condor

i am waiting ....

Condor
8 Jul 2010, 4:56 AM
Try typing the image url in the browser adress bar to see if it is really available.

The rest of your Chart config looks ok (see here (http://developer.yahoo.com/yui/examples/charts/charts-skins.html) for an example).

yanasdf789
8 Jul 2010, 5:11 PM
how to get the image url in chart?Condor

can you give the example according to "charts example“ in official website

thank you very much

yanasdf789
8 Jul 2010, 7:48 PM
i put my image url in the brower adress bar ,the image is available...
but still can't see in the chart.
compared with example of offical WebSite, mine lack paremeter of "renderto" ,but it Unnecessary in mine .

is it the reason of that i can't see image?do you think .

my whole code ://********chart.js********
var chartPanel1 = new Ext.Panel({
title:' chart',
//renderTo: 'container',
width:1200,
height:500,
layout:'fit',
id:'chart_Panel',

items: {
xtype: 'columnchart',
id:'chart_success',
store:store ,
xField: 'name',
yAxis: new Ext.chart.NumericAxis({
displayName: 'visits,
title:'visits,
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),


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:
[
new Ext.chart.ColumnSeries({
type: 'column',
displayName: 'total',
yField: 'visits',
style: {
image:'bar.gif',
mode: 'stretch',
color:0x3366CC
}
})
]
});

var store = 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}
]
});