Results 1 to 3 of 3

Thread: Flash chart shows me nothing.

  1. #1

    Default Flash chart shows me nothing.

    Hello,

    I tried to embed a flash chart in a tab panel of my app.
    But it shows me nothing like this (in FF):
    awef.jpg

    It doesn't even show any error message..

    Here's my code:
    Code:
    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}
        ]
    });
    
    // more complex with a custom look
    var chartPanel = new Ext.Panel({
        iconCls:'chart',
        frame:true,
        width:500,
        height:300,
        layout:'fit',
    
        items: {
            xtype: 'columnchart',
            store: store,
            url:'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
                }
            }]
        }
    });
    
    var t1={ title: '?????', items: [chartPanel] };
    var t2={ title: '??? ??',    html: '' };
    var t3={ title: '???? ??', html: '' };
    
    var n1 = new Ext.TabPanel({
        region: 'west',
        width: 700,
        items: [t1, t2, t3],
        activeItem: 0
    });
    var n2 = {
        region: 'center',
        title: 'Panel Info'
    }
    
    var nestedSouth = new Ext.Panel({
        title : '????',
        split: true,
        collapsible: true,
        height: 250,
        region: 'south',
        layout: 'border',
        items: [n1, n2]
    });
    Is there any problem with this code or something?
    Thanks.
    Stan

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    t1 doesn't have any layout...
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3

    Default

    I set t1 border layout and chartPanel's region center, but nothing's changed..

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •