1. #1
    Ext User
    Join Date
    May 2009
    Posts
    17
    Vote Rating
    0
    marcollo is on a distinguished road

      0  

    Question chart and basic tabs

    chart and basic tabs


    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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    use hideMode: 'offsets' on the chart. (Assuming you are not overnesting, and have inserted the chart directly into the TabPanel)

  3. #3
    Ext User
    Join Date
    May 2009
    Posts
    17
    Vote Rating
    0
    marcollo is on a distinguished road

      0  

    Default


    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???

  4. #4

  5. #5
    Ext User
    Join Date
    May 2009
    Posts
    17
    Vote Rating
    0
    marcollo is on a distinguished road

      0  

    Default


    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:
    Code:
    /*
     * Ext JS Library 3.0 Pre-alpha
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * 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
    Last edited by Condor; 12 May 2009 at 5:30 AM. Reason: Please post using [ CODE ] tags!

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What don't you understand about that API doc page?

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Why are you using renderTo and talk about charts in tabpanels?

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

  9. #9
    Ext User
    Join Date
    May 2009
    Posts
    17
    Vote Rating
    0
    marcollo is on a distinguished road

      0  

    Default Next step?!?!?

    Next step?!?!?


    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!!!!

    can you help me?
    many, many tx
    Attached Files

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by marcollo View Post

    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'

Thread Participants: 2