PDA

View Full Version : Ext.chart.Chart no longer rendering in 3.4



jeckels
9 Oct 2012, 5:02 AM
We have an application built with ExtJS 3.4 that uses the Ext.chart.Chart API. Although we're in the process of migrating to ExtJS 4, we're still using 3.4 in production. Over the last few weeks, our uses of the charts (which are Flash-based) have stopped working. There are no JavaScript or Flash errors, but the Flash component just shows up blank. Right-clicking in the area gives the standard Flash popup menu, so I know that Flash is at least loading.

It seems like it may be related to newer versions of Flash, but rolling back to older versions has not restored the functionality. I've tried hosting the Flash component as part of our deployment using the CHART_URL parameter, but with no luck. This reproduces across a variety of browsers and operating systems.

I've been unable to do any real debugging of the problem, because the Yahoo chart component that the API is using underneath is pretty opaque.

Has anyone else seen similar behavior? Any suggestions on how to debug the problem?

Thanks,
Josh

scottmartin
9 Oct 2012, 2:54 PM
Are you able to run YUI charts from their site?
http://developer.yahoo.com/yui/examples/charts/charts-tabview.html

Scott.

offtherailz
10 Oct 2012, 12:06 AM
I've the same problems since yesterday. I've also found a online demo that do not run anymore(just to give you a sample):
http://www.quizzpot.com/demos/extjs/chart/chart.html
I've also tried to use directly yahoo charts and they work.
I tried to update the resource..


Ext.chart.Chart.CHART_URL = 'http:/' + '/yui.yahooapis.com/2.9.0/build/charts/assets/charts.swf';
..but it didn't help.

jeckels
12 Oct 2012, 3:37 PM
Thanks for your reply. Yes, the examples on the Yahoo site work fine for me.

I've done some more debugging into the ExtJS source.

From what I can tell, initialization goes OK at first in Ext.FlashComponent, but the code never gets any events. onFlashEvent() never fires, and initSwf() is never called.

Thanks,
Josh

msantang
7 Nov 2012, 2:12 PM
Any solution for this?

thanks

Martin

jeckels
7 Nov 2012, 5:17 PM
I haven't found any solutions.

Thanks,
Josh

offtherailz
8 Nov 2012, 1:32 AM
the only solution I found is to use directly YAHOO libs.<br>including following scripts and the meta tag&nbsp;<br><br>
<br>&lt;meta http-equiv="X-UA-Compatible" content="IE=8"&gt;<br>&lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" /&gt;<div>&lt;script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"&gt;&lt;/script&gt;</div><div>&lt;script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js"&gt;&lt;/script&gt;</div><div>&lt;script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"&gt;&lt;/script&gt;</div><div>&lt;script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"&gt;&lt;/script&gt;</div><div>&lt;script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/swf/swf-min.js"&gt;&lt;/script&gt;</div>&lt;script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/charts/charts-min.js"&gt;&lt;/script&gt;<br><br><br>and change the code . In this way I can use the same "series" object at least. here a sample:<br>
<br>YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.9.0/build/charts/assets/charts.swf"<br>//...<br><div><div>var currencyAxis = new YAHOO.widget.NumericAxis();</div><div>currencyAxis.stackingEnabled = true;</div><div>currencyAxis.labelFunction = YAHOO.example.numberToCurrency;</div><div>var stat = new YAHOO.util.DataSource(statElements);</div><div>this.getEl().setHeight(545);</div><div>stat.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;&nbsp;</div><div>stat.responseSchema = {&nbsp;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>fields: fields</div><div>};&nbsp;</div><div>var conf = {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>series: series,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>categoryKey : options.xField,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>xAxes: new YAHOO.widget.CategoryAxis(),</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>xField: options.xField,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>yAxes: new YAHOO.widget.NumericAxis(),</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//...</div><div>}<span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div>stat.responseSchema = { fields:fields };</div><span class="Apple-tab-span" style="white-space:pre"><br><br></span>new YAHOO.widget.StackedColumnChart( this.getId(), stat,conf);</div><div><br></div><br>

msantang
14 Nov 2012, 1:38 PM
Any official solution?

msantang
22 Nov 2012, 1:34 PM
anyone?

msantang
29 Nov 2012, 1:02 PM
Chart still not working!!! anyone has found any solution for this?

scottmartin
29 Nov 2012, 1:05 PM
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

msantang
1 Dec 2012, 5:25 AM
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

evant
11 Dec 2012, 8:57 PM
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:



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

msantang
13 Dec 2012, 3:28 AM
yeah, I noticed watching the examples.


thanks

sabitha.errabelli
9 Apr 2013, 4:00 AM
Hi
am unable to render charts in extjs3.4,can anyone help..........

willigogs
9 Apr 2013, 4:02 AM
Hi
am unable to render charts in extjs3.4,can anyone help..........
Without any further information, it's highly unlikely...

scottmartin
9 Apr 2013, 4:08 AM
Can you view the online example reports?

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

Scott.

msantang
9 Apr 2013, 4:37 AM
You have to set the swf path, the default path do not longer work.Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';

sabitha.errabelli
9 Apr 2013, 4:46 AM
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.

sabitha.errabelli
9 Apr 2013, 4:47 AM
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.

sabitha.errabelli
9 Apr 2013, 4:51 AM
@scottmartin

OS : linux
Browser : IE7/mozilla
Extjs3.4.0

these are the versions am using

extjs3.0 charts are rendering in my machine

am very thankful........ if anyone give answer for this