PDA

View Full Version : [SOLVED]Simple Chart Displays Blank in IE



Rob Craven
12 Aug 2009, 6:09 AM
I've wired up a simple chart example that works great in Firefox but, same code in Internet Explorer 7 is choking. In I.E. the chart outline and title display correctly but, the body of the chart is just blank. I'm using a simple array as a data source nothing special.

Has anyone else ran into this issue, is there a known fix?


<div id="container"></div>

<script type="text/javascript">

Ext.onReady(function(){

// CREATE THE DATA STORE
var myDataString = 'var myData = [';

<apex:repeat value="{!User_DrillDown_Records}" var="r" id="rptUserDDRecRepeat">
myDataString += "['{!r.Shift__c}', {!r.Unique_Ticket_Count__c}, {!r.Unique_Ticket_Count__c}],";
</apex:repeat>

if(myDataString.substring(myDataString.length - 1) != '[')
myDataString = myDataString.substring(0, myDataString.length - 1);

myDataString += "];";
eval(myDataString);

//document.write(myData);

store = new Ext.data.ArrayStore(
{
fields:['Collection Dates','Unique Tickets','Unique Tickets Count']
});

store.loadData(myData);

// extra extra simple
new Ext.Panel({
title: '{!$Request.User}',
renderTo: 'container',
width:400,
height:250,
layout:'fit',

items: {
xtype: 'linechart',
store: store,
xField: 'Collection Dates',
yField: 'Unique Tickets'
}
});
});
</script>

myDataString output using document.write:
var myData = [['7/16/2009', 16.0, 16.0],['7/23/2009', 22.0, 22.0],['7/30/2009', 19.0, 19.0],['8/6/2009', 24.0, 24.0]];

myData output using document.write:
7/16/2009,16,16,7/23/2009,22,22,7/30/2009,19,19,8/6/2009,24,24

Thanks in advance, any help on this is appreciated.
-Rob

Rob Craven
12 Aug 2009, 11:47 AM
After checking commas, and forum posts till I was blue in the face. I found that the solution is to ensure you set the following property, else you get a big blank spot in Internet Explorer rather than a chart:


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


Strange no JavaScript error is displayed for this issue, and it renders fine without in Firefox?

Hope this helps others,
-Rob

hankin
16 Sep 2009, 9:48 AM
I tried that fix, but it is not working for me in IE. I can get it to work when I don't try to specify a URL (making the charts.swf file local). Any suggestions?

Thanks,
-Hank

Rob Craven
16 Sep 2009, 11:03 AM
It seems that the ExtJs library is just wrapping functionality provided by yahoo UI library. You may be able to find additional information by searching there developer site?

http://developer.yahoo.com/yui/charts/

I do see under listed know issues:
Charts don't work inside a <form> tag with Internet Explorer

SWFs embedded in HTML forms will not be initialized correctly when the page is viewed in Internet Explorer. When trying to embed a YUI chart into any descendant of a <form> tag, you may see an error that says yuigen0 not found and the chart will not be drawn. This problem has been fixed in Adobe Flash Player starting with version 9.0.115. If you must display a chart in an HTML form, you should override the version attribute to require a newer version of Flash Player:


-Rob

hankin
16 Sep 2009, 12:06 PM
I am using version 10 of Flash. I tested the pie-chart.html provided in the examples folder and it does not work in IE7. I also downloaded the YUI control suite and tested a chart in IE7 using a local swf file and that did work. So the issue seems to be with Extjs.

-Hank

hankin
18 Sep 2009, 6:39 AM
I got some more time to play with it. I set the flashVersion to the version you mentioned, but I am still not getting it to render.

Matthias_WB
14 Oct 2009, 10:53 AM
Iam using IE6SP2 with FlashPlayer10. I have same problem, when i insert a chart in a new Ext.window or child-panel-element. When I insert directly in Ext.Viewport it working fine. In FF3 all variants lead to success.