PDA

View Full Version : chart and basic tabs



marcollo
12 May 2009, 2:57 AM
Hello!

I'm creating a basic tabs like:
http://extjs.com/deploy/dev/examples/tabs/tabs.html

in first tab I insert an ext chart with custom colors for each serie, for example

series: [{
type: 'column',
displayName: 'Page Views',
yField: 'ignori',
style: {
image:'bar.gif',
mode: 'stretch',
color:0xff0000 // this serie is red
}
},

if I click on second tab and return to first tab (clicking on first tab) the chart lose my style settings and each serie change his color....
the red serie bacome orange:-/

P.S.
I noticed that if I set style.display of chart's div to "none" property and then set it block the problems is the same, the carth is render with a different set of colors

Animal
12 May 2009, 3:03 AM
use hideMode: 'offsets' on the chart. (Assuming you are not overnesting, and have inserted the chart directly into the TabPanel)

marcollo
12 May 2009, 3:21 AM
many thanks Anima....:-)

I'm try this:

chartStyle: {
padding: 10,
hideMode: 'offsets',
animationEnabled: true,
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},

does'nt work!!!
maybe is the wrong place to edit this property???

Animal
12 May 2009, 3:42 AM
http://extjs.com/deploy/ext-3.0-rc1.1/docs/?class=Ext.chart.Chart&member=hideMode

marcollo
12 May 2009, 5:24 AM
Excuseme, as you sure understand I'm new in ext JS!

Strating from the chart examples find in ext-3.0-rc1.1 downloaded form site how can I set hideMode otpion????

this is the code of example/chart/chart.js:

/*
* Ext JS Library 3.0 Pre-alpha
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/

Ext.onReady(function(){

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

// extra extra simple
new Ext.Panel({
title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
renderTo: 'container',
width:500,
height:300,
layout:'fit',

items: {
xtype: 'linechart',
store: store,
xField: 'name',
yField: 'visits',
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
}
}
});

// extra simple
new Ext.Panel({
iconCls:'chart',
title: 'ExtJS.com Visits Trend, 2007/2008 (Simple styling)',
frame:true,
renderTo: 'container',
width:500,
height:300,
layout:'fit',

items: {
xtype: 'linechart',
store: store,
url: '../../resources/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;
}
}
});

// more complex with a custom look
new Ext.Panel({
iconCls:'chart',
title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',
frame:true,
renderTo: 'container',
width:500,
height:300,
layout:'fit',

items: {
xtype: 'columnchart',
store: store,
url:'../../resources/charts.swf',
xField: 'name',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series){
if(series.yField == 'visits'){
return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
}else{
return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
}
},
chartStyle: {
padding: 10,
animationEnabled: true,
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
},
series: [{
type: 'column',
displayName: 'Page Views',
yField: 'views',
style: {
image:'bar.gif',
mode: 'stretch',
color:0x99BBE8
}
},{
type:'line',
displayName: 'Visits',
yField: 'visits',
style: {
color: 0x15428B
}
}]
}
});
});

MANY THANKS :">

Animal
12 May 2009, 5:27 AM
What don't you understand about that API doc page?

Animal
12 May 2009, 5:29 AM
And DO NOT RENDER!

If you are going to add Components to a Container, the Container's layout manager renders them.

And remove the extraneous wrapping Panel. Just add the Chart to the TabPanel. Like I told you.

Condor
12 May 2009, 5:29 AM
Why are you using renderTo and talk about charts in tabpanels?

Never render inside an Ext.Container! Always use the items config option!

marcollo
14 May 2009, 1:11 AM
Ok I just do as we talk me :-) but dose'nt work.

In the attached document you can find my app folder.

In index.html you'll find <div id="tabs1"></div>

and in tabs.js you'll find all my code that render a pannel with 2 tabs, in the first I insert a chart, in the second a simple html text.

I define the chart as: var pannello_grafico=new Ext.Panel({.......

then:

// second tabs built from JS
var tabs1 = new Ext.TabPanel({
renderTo: 'tabs1',
activeTab: 0,
width:900,
height:650,
plain:true,
defaults:{autoScroll: false},
items:[
pannello_grafico,
{
title: 'Normal Tab',
html: "My content was added during construction."
}
]
});

if you lounch index.html you'll sea the first tab within chart.....if you click on second tab and then again on first tab you'll see the serie's colors changing!!!!:s

can you help me?
many, many tx

Animal
14 May 2009, 2:02 AM
I define the chart as: var pannello_grafico=new Ext.Panel({.......



Well that's not a chart then. It's a Panel.

Like I said, add a Chart to the TabPanel.

A Chart which is configured with hideMode: 'offsets'

marcollo
14 May 2009, 3:18 AM
So you just saing to create a new Ext.TabPanel and add the tabs I need right?
But in the tab of chart I want to add others components......
....For this reason I was souppose to use a TabPanel and insert in each items a serie of panels and in one of this insert the chart.....

anyway I have create e Ext.TabPanel with two items: the chart and a simple element like this

items: [{
xtype: 'columnchart',
store: store,
hideMode: 'offsets', //////right here?!?!?!?!?
title:'Chart Title',
url:'resources/charts.swf',

xField: 'name',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),........

,{
title: 'Normal Tab',
html: "My content was added during construction."

}


switching between the tab the chart lose his colors

Animal
14 May 2009, 3:42 AM
Right, I think that must be a bug. I don't know where, but if you can show a simple testcase, I suggest you report it.

marcollo
14 May 2009, 5:39 AM
In attached file you can test it!
launch index.html you'll see a simple tabPanel with 2 tabs.......try to switch between them and look the chart's colors and style!!!

many tx

Animal
14 May 2009, 5:46 AM
Don't report it to me!

Post on the Bugs folder.

Animal
14 May 2009, 5:47 AM
Try making a 10 line testcase!