Ext.chart.Chart no longer rendering in 3.4

Let's cut to the chase .. do our chart examples work for you?
http://dev.sencha.com/deploy/ext-3.4.0/examples/

Do they work on any other PC?

Scott

Scott:

yes the examples works ok, it's extrange. In our app charts just all charts stop working without change anything.

I found this post and i thought that was a generic problem with flash

thanks for answer i will try to find out where is the problem

It seems the version hosted at Yahoo that we point to has changed, which is causing the issue. The easy fix for now is to point the charts to the copy of charts.swf that we distribute with out version of the library. This is why our online examples work ok.

It's located under /resources/charts.swf

As a sample, you'll want to direct the swf at the start of your app:

Code:

---

Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';

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

---

yeah, I noticed watching the examples.


thanks

Hi
am unable to render charts in extjs3.4,can anyone help..........

Quote:

---

Originally Posted by sabitha.errabelli

Hi
am unable to render charts in extjs3.4,can anyone help..........

---

Without any further information, it's highly unlikely...

Can you view the online example reports?

What OS / browser are you using? What version of 3.4 are you using?

Scott.

You have to set the swf path, the default path do not longer work.Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';

yes am pointing the charts.swf to my local charts.swf,which is located at resources folder only
but,still am not getting the charts.

var chart=new Ext.chart.ColumnChart({
// renderTo: Ext.getBody(),
width: 500,
height: 300,
store: store,
xField:xFieldValue,
yField:yFieldValue,
url:'../static/extjs/resources/charts.swf',
xAxis: new Ext.chart.CategoryAxis({
// title: xTitle,
orientation : 'horizontal'
}),
yAxis: new Ext.chart.NumericAxis({
// title: yTitle,
orientation : 'vertical'
})//,
// series: []
});

here am changing chart_url with url property of chart.