PDA

View Full Version : ux.Media.ChartPack 2.1.2 (Fusion, OFC2, amChart) released.



Pages : [1] 2 3

hendricd
14 Apr 2008, 11:27 AM
ux.Media ChartPack 2.1.2 is also available on Google Code (http://code.google.com/p/uxmedia/) (SVN (http://code.google.com/p/uxmedia/source/browse/#svn/tags/2.0/source)).

Supported Ext Releases

RC1: (deprecated) Supported Ext Releases: 2.0.x, License: LGPL3
ChartPack2.1 : Supported Ext Releases: 2.1, 2.2, 3.0, License: GPL3

A set of ux.Chart Components designed for use with:
-- InfoSoft's Fusion (http://www.fusioncharts.com/) Charts (Flash)
-- Open Flash Chart 2 (http://teethgrinder.co.uk/open-flash-chart-2/index.php) (Flex/Flash)
-- amChart (and amStock) (Flash)

All ux.Chart classes come in standard Component Flavors:

Component, Panel, Portlet, Window

All charts may also be rendered inline in markup.

As these classes inherit from the ux.Media/Flash (http://extjs.com/forum/showthread.php?t=23983) classes (required), it is not necessary to load the SWFObject.js or FusionCharts.js files.

Examples: While still evolving, are available online:

See the Fusion.Window demo (http://demos.theactivegroup.com/?demo=charts&script=fusion#).
See the OFC2 demo (http://demos.theactivegroup.com/?demo=charts&script=ofc).

Fusion Chart Sample with common (to all supported charts) config options:


<head>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/ux/uxfusionpak-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){

fusionPanel = new Ext.ux.Chart.Fusion.Panel({
title : 'ux.FusionPanel',
collapsible : true,
renderTo : Ext.getBody(),

chartCfg :{ id : 'chart1'
,params:{
flashVars : {
debugMode : 0,
lang : 'EN'
}
}
},
autoScroll : true,
id : 'chartpanel',
chartURL : 'fusioncharts/Column3D.swf',
//dataURL : 'fusioncharts/data/Column3D.xml' , //let the Flash chartObj load it
autoLoad :'fusioncharts/data/Column3D.xml' , //let Ext autoLoad do the same.

loadMask : {msg: 'Loading data...'},
autoMask : true,

width : 500,
height : 400,
listeners :{
,chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')},
,chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
},
tools : [
{id:'gear', handler:function(e,t,p){ p.refreshMedia();},qtip: {text:'Refresh the Chart'} },
{id:'print', handler:function(e,t,p){ p.print();},qtip: {text:'Print the Chart'} }
]
});
fusionPanel.show();
});
</script>
</head>
Notes:
(1) The ux.Chart.Fusion classes are compatible with the older FCF (FusionChartsFree) but you won't like the result on IE much (poor rendering quality and weak remote URL loading support).

(2) RE: Fusion: Answers to questions regarding Fusions chart formatting and XML definition options for charting may be found in their site's (http://www.fusioncharts.com/) forums and documentation.

(3) RE: OFC2: Answers to questions regarding OFC2 chart formatting and JSON definition options for charting may be found in their site's (http://teethgrinder.co.uk/open-flash-chart-2/index.php) forums and documentation.

(4) RE: amCharts: Answers to questions regarding amChart chart formatting and definition options for charting may be found in their site's (http://www.amcharts.com/) forums and documentation.

(5) The 2.1.x distribution now includes a /build path (with JSB build files). Choose you ux[flavor]pak.js for the chart you use, and include that package on your page. It includes all the necessary classes. ;)


Note: the current vBulletin config gzips attachments which IE hates. Download this with Firefox (or other browser) instead of IE.

galdaka
14 Apr 2008, 11:41 AM
Live example please!! ;)

Thanks!

hendricd
14 Apr 2008, 11:43 AM
Sorry, its still your Ext-2.x/examples/fusion for now. ;)

jay@moduscreate.com
14 Apr 2008, 6:56 PM
Go with your bad self dude :)

wm003
14 Apr 2008, 9:50 PM
Fantastic Widget.=D> Thank you very much for sharing!

smartinec
15 Apr 2008, 6:49 AM
This is awesome. I did notice that the "Print Chart" toolbar item doesn't appear to work.

hendricd
15 Apr 2008, 7:06 AM
What browser you on? It works fine for me on IE, FF, Opera, Safari (win).

What error are you getting, if any?

jerrybrown5
15 Apr 2008, 2:16 PM
Doug,
This is really solid. Have you looked at the current Ext 3 implementation of YUI Charts? It would be nice to have a consistent client implementation between Ext charts.

Here is Jack's sample implementation of the charts in the svn trunk.


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

new Ext.Panel({
title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
renderTo: 'container',
width:500,
height:300,
layout:'fit',

items: {
xtype: 'barchart',
store: store,
url: 'charts.swf',
yField: 'name',
xField: 'visits'
}
});
Best regards,
Jerry Brown

hendricd
15 Apr 2008, 3:07 PM
Yes, I've seen Jack's first round in SVN, and I'm contemplating a ux.Chart.YUI interface already. Still wondering what data interfaces to support initially (just Ext.stores ? etc.).

GWT has already published one for YUI charts (but, data bindings?).

But, they're so easy to wrap now with the ux.Media/Flash classes.

jerrybrown5
15 Apr 2008, 5:42 PM
Doug,
All of my data comes in through stores which I share across my application so Databinding or more particular store binding (like how it is done in Jack's implementation) would be preferable to me. Also, it keeps options open since it is easy to populate store with XML or JSON data.

Best regards,
Jerry

stoober
18 Apr 2008, 11:26 PM
(1) These classes are compatible with the older FCF (FusionChartsFree) but you won't like the result on IE much.

Doug

Could you expand on what you mean by this?

Thanks,
Stuart

sb32
22 Apr 2008, 5:44 PM
Does this not work with v2.1? Getting strange error.. Will try reverting to 2.0.2 in the mean time..

sb32
22 Apr 2008, 6:13 PM
noob <script type="text/javascript" src="/javascripts/ext-basex-min.js"></script> should come before the media, flash & fusion as you were :)

sb32
22 Apr 2008, 7:01 PM
I wish I could supply dataURL a hash. (similar to the autoLoad option)

When using autoLoad, it works fine but says 'no data' until the xml is supplied from the server. w/ dataURL, loading is shown.

there's probably some ext util to create a url string from an array of some sort.. /me checks

edit: found it! Ext.urlEncode(friend: 'apidocs')

hendricd
25 Apr 2008, 10:18 PM
Does this not work with v2.1? Getting strange error.. Ext 2.1+ is not currently supported.


I wish I could supply dataURL a hash. (similar to the autoLoad option)

When using autoLoad, it works fine but says 'no data' until the xml is supplied from the server. w/ dataURL, loading is shown.
If not mistaken, they are ways do redefine that message in your XML. Check their site for more details.

Also, keep in mind all fusionCfg members are 'function asserted' at runtime, so you could attach a function to any param to obtain its desired value.

hendricd
25 Apr 2008, 10:24 PM
Doug

Could you expand on what you mean by this?

Thanks,
Stuart

I initially developed ux.Fusion classes using FCF, but found that FCF did not handle chart scaling well when the Containing Ext Component was resized . Those issues were addressed only in Fusion's latest offering. Printing support is much better as well.

jebirch
26 Apr 2008, 10:13 PM
Hi

I have a problem using the FusionPanel with FusionMaps in a autoloaded/added panel.

I have a tabpanel where I autoloads the panels when needed. And in the loaded panel I do a tabpanel.add and tabpanel.doLayout. It normally works perfect.

One of the panels have a FusionMap, but nothing happens, no chartload or chartrender events. It generates the object code and it marks the area as a flashobject, but with no visible content.
But if I try with a FusionChart instead then it works perfects (only changes the chartURL nothing else ). Or if I move the added panel to the tabpanel definition directly without autoload then it works with FusionMap as well.

I have tested FusionMaps in the fusion.html example application, and there is works perfect. The funny part is that if I start load the FusionMap in the example application before opening my tabpanel then it works with the tabpanel and autoload.

Anybody have any idea to what the problem can be ?

Here is some sample code where the problem exists:


// This is called from a tabpanel with autoload
var mappanel = new Ext.Panel({
layout:'border',
items: [
new Ext.ux.FusionPanel({
id: 'overviewmap',
title: 'Overview Map',
layout: 'fit',
region: 'west',
tools: getTools(),
chartURL: '/swf/Charts/Column3D.swf', // This works
dataURL: '/NewData.xml',
width: 400,
fusionCfg: { id: 'charting1' },
listeners: {
'show': function() { console.log( 'SHOW' ) },
'chartload': function() { console.log( 'LOAD' ) },
'chartrender': function() { console.log( 'RENDER' ) }
}
})
,new Ext.ux.FusionPanel({
title: 'Region Map',
id: 'regionmap',
layout: 'fit',
region: 'center',
tools: getTools(),
chartURL: '/swf/Maps/FCMap_Europe.swf', // This works not
dataURL: '/NewData.xml',
width: 400,
fusionCfg: { id: 'charting2' },
listeners: {
'show': function() { console.log( 'SHOW2' ) },
'chartload': function() { console.log( 'LOAD2' ) },
'chartrender': function() { console.log( 'RENDER2' ) }
}
})
]
});

Ext.getCmp('maptab').add( mappanel );

mappanel.show();


/Jesper

wdragon27
26 Apr 2008, 11:21 PM
Try passing parameters like milliseconds in the URL to avoid cache. Taken from fusionchart helpdesk.

chart1.setDataURL(escape("xmlfile.xml?currTime=" + getTimeForURL()));

/**
* getTimeForURL method returns the current time
* in a URL friendly format, so that it can be appended to
* dataURL for effective non-caching.
*/

function getTimeForURL(){
var dt = new Date();
var strOutput = "";
strOutput = dt.getHours() + "_" + dt.getMinutes() + "_" + dt.getSeconds() + "_" + dt.getMilliseconds(); return strOutput;
}

hendricd
27 Apr 2008, 7:37 AM
@jebirch -- ux.Fusion.chart classes are designed for the Fusion Chart classes only. I suspect FCMaps have a slightly different event nomenclature than the charting objects (and autoLoad is specifically designed to load XML chart resources).

You might try using the more generic ux.Flash components instead for the Maps:



new Ext.ux.FlashPanel({
title: 'Region Map',
id: 'regionmap',
region: 'center',
tools: getTools(),
width: 400,
mediaCfg: {
id: 'map2',
url: '/swf/Maps/FCMap_Europe.swf',
autoSize : true,
params:{
flashVars:{.......}
}
}
})

To be honest, I haven't even looked at their Map objects yet. Time permitting, maybe I'll create a set of ux classes for them as well. ;)

jebirch
27 Apr 2008, 9:44 PM
@hendricd - Thanks for your suggestion. That works with FusionMaps.

I am looking forward to a Ext.ux.FusionMaps ;-)

/Jesper

jschick
13 May 2008, 1:01 PM
Hello,

I'm having what seems like a z-index problem with the chart in the media panel. Split bars and modal dialogs display under the chart rather than over top of it. What is the best way to fix this problem?

hendricd
13 May 2008, 1:04 PM
Can you post a bit of your layout code, might be easier to spot.

jschick
13 May 2008, 1:13 PM
Here's most of it...



DistributionPanel = function(config) {
Ext.apply(this, config);

this.chartPanel = new Ext.ux.FusionPanel({
region: 'center',
floating: false,
fusionCfg: {
id: Ext.id()
},
autoScroll: true,
chartURL: 'charts/Column2D.swf'
});

this.distCm = new Ext.grid.ColumnModel([{
header: 'Range',
dataIndex: 'range',
sortable: true,
width: 90,
renderer: function(value) {
var base = value * 3;
return (base+" - "+(base+3));
}
},{
header: 'Quantity',
dataIndex: 'count',
sortable: true,
width: 70
},{
header: 'Avg Wt',
dataIndex: 'avg',
sortable: true,
width: 70
},{
header: 'Total Wt',
dataIndex: 'total',
sortable: true,
width: 80
}]);

this.distStore = new Ext.data.Store({
reader: new Ext.data.ArrayReader({id: 0}, SRev.record.DistributionRange),
sortInfo: {
field: 'range',
direction: 'ASC'
}
});

this.distGrid = new Ext.grid.GridPanel({
region: 'center',
store: this.distStore,
cm: this.distCm,
autoExpandColumn: '3',
disableSelection: true
});

this.distTree = new Ext.tree.TreePanel({
region:'west',
split:true,
autoScroll: true,
lines: false,
animate: false,
width: 215,
minSize: 50,
rootVisible:false,
root: new Ext.tree.AsyncTreeNode('Activities'),
collapseFirst:false,
loader: new Ext.tree.TreeLoader({
baseParams: {action_id: 1},
dataUrl: '/cgi-bin/report.cgi',
preloadChildren: true
}),
bbar: [{
iconCls: 'refresh-icon',
handler: function() {
this.distTree.root.reload();
},
scope: this,
tooltip: 'Refresh',
tooltipType: 'title'
}],
listeners: {
click: {
fn: this.loadNode,
scope: this,
}
}
});

this.distSummaryQty = new Ext.form.TextField({
fieldLabel: 'Quantity',
width: 50,
disabled: true,
disabledClass: 'x-item-textonly'
});

this.distSummaryAvgWt = new Ext.form.TextField({
fieldLabel: 'Avg Wt',
width: 50,
disabled: true,
disabledClass: 'x-item-textonly'
});

this.distSummaryTotalWt = new Ext.form.TextField({
fieldLabel: 'Total Wt',
width: 70,
disabled: true,
disabledClass: 'x-item-textonly'
});

this.distSummary = new Ext.form.FormPanel({
region: 'west',
title: 'Summary',
border: true,
split: true,
width: 135,
minSize: 50,
labelWidth: 65,
labelAlign: 'right',
bodyStyle: 'padding-top: 10px',
items: [this.distSummaryQty, this.distSummaryAvgWt, this.distSummaryTotalWt]
});

/* Call superclass constructor */
DistributionPanel.superclass.constructor.call(this, {
layout: 'border',
closable:true,
frame: true,
header: false,

items: [{
region: 'center',
layout: 'border',
items: [this.chartPanel, {
region: 'south',
layout: 'border',
split: true,
height: 175,
minSize: 50,
items: [this.distGrid, this.distSummary]
}]
}, this.distTree]
});

this.on('render', function() {
this.distTree.root.expand(false, false);
}, this, {delay:10});

};

hendricd
13 May 2008, 1:24 PM
See if this addition provides any relief:


this.chartPanel = new Ext.ux.FusionPanel({
region: 'center',
floating: false,
fusionCfg: {
id: Ext.id(),
params:{ wmode:'transparent' }
},
autoScroll: true,
chartURL: 'charts/Column2D.swf'
});

hendricd
13 May 2008, 1:27 PM
see prev post again

jschick
13 May 2008, 1:29 PM
No, the problem remains :-/

jschick
13 May 2008, 1:30 PM
Ok, let me try that...

jschick
13 May 2008, 1:31 PM
Still doesn't work with


params:{ wmode:'transparent' }

hendricd
13 May 2008, 1:34 PM
I'll have to work up an sample in that configuration and get back to you.

What browsers are we talking about here?

jschick
13 May 2008, 1:35 PM
I can see that that parameter is set in firebug and according to google results that should be the way to fix the problem....

jschick
13 May 2008, 1:36 PM
FF 2.0.0.2 on Linux is what I'm using. I'm going to reboot into windows and see if the problem exists with this new parameter set.

hendricd
13 May 2008, 1:37 PM
Indeed, looking at the code again, 'transparent' is the default. I suspect there is z-index issue involved. I'll let you know more as I find it.

jschick
13 May 2008, 1:43 PM
Works OK with FF 2.0.0.14 in Windows.

hendricd
13 May 2008, 1:44 PM
Hmm, bummer, no Linux for me :(

See if Fusion forums has any insight ?

hendricd
13 May 2008, 2:06 PM
Just for grins, try wmode:'window'. Lemme know..

jschick
13 May 2008, 2:12 PM
It seems to be a bug in FF and/or flash player on linux.

http://bugs.adobe.com/jira/browse/FP-80

hendricd
13 May 2008, 2:21 PM
Yes, I'm seeing plenty of FF/Linux chatter about Flash problems. :(

hendricd
13 May 2008, 2:23 PM
Try adding this to your FusionPanel:



bodyStyle:{ position: 'relative', z-index: 0}

ealpha
14 May 2008, 12:50 AM
'chartload': function() { console.log( 'LOAD' ) },
'chartrender': function() { console.log( 'RENDER' ) }

can't working

hendricd
14 May 2008, 2:34 AM
'chartload': function() { console.log( 'LOAD' ) },
'chartrender': function() { console.log( 'RENDER' ) }

can't working

Does it work for you in the demo fusion.html example (removing the comments below) ?


listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);}
//,chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')},
//,chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
}
What version of FusionCharts, browser(s)? /:)

ealpha
14 May 2008, 5:36 PM
chartrender is the xml data loaded??
how to get the XML data loaded OK Events ??

hendricd
14 May 2008, 6:59 PM
@ealpha - I believe chartloaded is raised when the Flash Chart objects are first initialized. chartrendered is raised when the XML is loaded and rendered inside the chart.

basshcm
15 May 2008, 5:16 AM
Doug,

I am having trouble with your zip file. After downloading it, I receive an error message saying it is invalid or corrupted. I am able to download other forum post zip files and I do not receive this error. I also receive the error on your ux.media/flash zip files.

Thanks for your assitance
Matt

hendricd
15 May 2008, 5:44 AM
@Matt -- The Zip files are created using Winzip 11.1 (in Legacy Zip 2.0 compatible mode). Wonder if you're using an older version that may not be quite as compatible?

mystix
15 May 2008, 6:35 AM
:-? seems like various ppl have been having problems with forum zip attachments this past week.

if it helps, i'm using 7-zip (http://www.7-zip.org) and all attachments unzip painlessly for me.

FlexIDX
16 May 2008, 1:10 AM
will this be made to work with 2.1?

ealpha
16 May 2008, 2:24 AM
//,chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')},
//,chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}

when i use autoLoad to load the xml

when the url don't loaded , the chartrender has doing

hendricd
16 May 2008, 3:55 AM
will this be made to work with 2.1?

Yes.

@ealpha -- I'm having difficulty understanding your question.

ealpha
16 May 2008, 5:45 AM
sorry for my poor english



listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);}
,chartload : function(p,obj){
Ext.MessageBox.show({
msg : 'loading',
progressText : '……',
width : 300,
wait : true,
waitConfig : {
interval : 1000
}
});
}
,chartrender : function(p,obj){
Ext.MessageBox.hide();
}
},


the chart can't show in my brower ,the MessageBox has hiden.

how cat i,hide the MessageBox util the chart show all

hendricd
16 May 2008, 6:06 AM
@ealpha = chartloaded only tells you that the SWF is loaded -- not useful for masking/progress. Try:



id: 'myChart',
listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);},
chartrender : function(p,obj){
Ext.MessageBox.hide();
}
},.....

var loadChart ( urlXML ) {
var chart= Ext.getCmp('myChart');
if(chart){
Ext.MessageBox.show(....);
chart.setDataURL.defer(30,chart,[urlXML, true]);
}
};

ealpha
16 May 2008, 6:07 AM
[PHP]


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ux.Fusion Charts with ux.MediaFlash</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />


<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>


<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="ext-basex-min.js"></script>
<script type="text/javascript" src="uxmedia.js"></script>
<script type="text/javascript" src="uxflash.js"></script>
<script type="text/javascript" src="uxfusion.js"></script>


<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />

<script type="text/javascript">

var fusion;
Ext.lib.Ajax.forceActiveX = true;
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function(){

Ext.QuickTips.init();
Ext.QuickTips.getQuickTip().interceptTitles = true;

Ext.QuickTips.enable();

var getTools = function(){
return [{id:'gear', handler:function(e,t,p){ p.refreshMedia();},qtip: {text:'Refresh the Chart'} },
{id:'print', handler:function(e,t,p){ p.print();},qtip: {text:'Print the Chart'} }
];};


panel = new Ext.ux.FusionPanel({
title : 'ux.FusionPanel',
collapsible : true,
renderTo : Ext.getBody(),
floating:false,
fusionCfg :{ id : 'chart1'
},
autoScroll : true,
id : 'chartpanel',
chartURL : 'Pie3D.swf',
//dataURL : 'Column3D.xml',

autoLoad : {
url: 'Column3D.xml'
},

width : '80%',
height : 300,
listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);}
,chartload : function(p,obj){
Ext.MessageBox.show({
msg : 'loading',
progressText : '

hendricd
16 May 2008, 6:17 AM
@ealpha -- For autoLoad with MsgBox, this would be better:



id: 'myChart',
autoLoad : false,
listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);},
chartrender : function(p,obj){
Ext.MessageBox.hide();
},
render: function(panel){ //when the panel is rendered
loadChart('chartData.XML',true);
}
},.....

var loadChart ( urlXML , immediate ) {
var chart= Ext.getCmp('myChart');
if(chart){
Ext.MessageBox.show(....);
chart.setDataURL.defer(30,chart,[urlXML, immediate ]);
}
};

hendricd
16 May 2008, 6:27 AM
@ealpha --

When you use dataURL config option (or the setDataURL function), the SWF chart object loads the XML when rendered.

When you use autoLoad, Ext loads the XML into the SWF object.

The chartloaded event is only fired when the SWF object initializes it's container, not when XML loading starts or ends. Useless for masking, etc.

The chartrender event is always raised after SWF has rendered the XML.

basshcm
16 May 2008, 7:11 AM
Doug, I was just using Windows XP default extractor. Do you have the file zipped twice? A zip file inside of the zip file. I got it to exported using a command line tool but it looks like it was zipped twice.

Thanks
Matt

hendricd
16 May 2008, 7:36 AM
Fresh zip just posted on #1. Give that a shot.

basshcm
16 May 2008, 9:40 AM
Doug. I still get the same error. I am able to extract it though other means so I am moving. Thanks again for your assistance.

jschick
19 May 2008, 1:26 PM
bodyStyle: "position: 'relative'; z-index: 0"

This doesn't solve the problem either...I'll just have to wait until flash player and/or FF take care of this bug for Linux.

I have run into another peculiar glitch which occurs on both Linux and Windows using FF (didn't try IE on Windows). When charts are added to multiple TabPanel tabs and focus is changed between tabs the charts behave as though no data is loaded (they display the standard 'No data to display.' message). If the browser window is resized they begin working as expected. I'm guessing an event is being missed somewhere but I haven't started digging into the code yet. A brute force solution might be to listen to the TabPanel's activate event and manually reload the chart but that really shouldn't be necessary.

Have you encountered this problem before?

hendricd
19 May 2008, 4:00 PM
that should be (no quotes):


bodyStyle: "position: ' relative ' ; z-index: 0"

I have run into another peculiar glitch which occurs on both Linux and Windows using FF (didn't try IE on Windows). When charts are added to multiple TabPanel tabs and focus is changed between tabs the charts behave as though no data is loaded (they display the standard 'No data to display.' message). If the browser window is resized they begin working as expected. I'm guessing an event is being missed somewhere but I haven't started digging into the code yet. A brute force solution might be to listen to the TabPanel's activate event and manually reload the chart but that really shouldn't be necessary.

Have you encountered this problem before?

Let me check on something and get back to you on that. Can you post your tabPanel and chart configs?

jschick
20 May 2008, 6:05 AM
You're right, I got the CSS wrong.


bodyStyle: "position: relative; z-index: 0"

Unfortunately, it still doesn't work.

About the tab problem...I'll whip up an example. Give me 15-20 minutes.

hendricd
20 May 2008, 6:24 AM
@jschick - I think the problem is you are not running the XML data thru a web-server and using autoLoad to load the chart. For 'autoLoad' (Ext-based) requests against a local-file system (without HTTP server) you'll need to include my other extension ext-basex-min.js

Paste this into a new page (ie fusiontabs.html) and drop it in the examples/fusion path.
Seems to work as expected for me. Lemme know.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ux.Fusion Charts with ux.MediaFlash</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="ext-basex-min.js"></script>
<script type="text/javascript" src="uxmedia.js"></script>
<script type="text/javascript" src="uxflash.js"></script>
<script type="text/javascript" src="uxfusion.js"></script>


<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />

<script type="text/javascript">


Ext.lib.Ajax.forceActiveX = true;
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){

Ext.QuickTips.init();
Ext.QuickTips.getQuickTip().interceptTitles = true;

Ext.QuickTips.enable();

view = new Ext.TabPanel({

height : 400,
width : 650,
activeTab: 0,
renderTo : Ext.getBody(),
items:[{
xtype:'fusionpanel',
title : '3D Columns',
fusionCfg :{ id : 'chart2'}
,id :'demoFusion'
,chartURL : 'Column3D.swf'
//, dataURL :'Column3D.xml' //let the chartObj load it
,autoLoad :'Column3D.xml' //let Ext autoLoad do the same. (basex-min required for local file systems)
},

{
xtype:'fusionpanel',
title : 'Pie Chart',
fusionCfg :{ id : 'chart1'},
id : 'chartpanel',
chartURL : 'Pie3D.swf',
dataURL : 'Column3D.xml',
listeners :{
//,chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')}
//,chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
}

}]
});

view.show();

Ext.EventManager.on(window, "beforeunload", function(){
Ext.destroy( view);
} ,window ,{single:true});

});
</script>
</head>
<body>
<div id="aboutFusion">
For more on FusionCharts visit <a href="http://www.fusioncharts.com/" target="_blank">fusioncharts.com</a>
</div>
</body>
</html>

jschick
20 May 2008, 7:22 AM
I'm getting json data via XHR, creating the chart XML from the json data, and calling setDataXML on the chart with the XML string.

hendricd
20 May 2008, 7:43 AM
@jschick -- How did the test page I sent work out for you? The SWF objects SHOULD NOT have refreshed at all during the tab transitions. If they did, that may explain what your seeing. I don't believe they (Fusion) cache the chart data you provide with the setDataXML method. So, if the SWF gets reniitialized by the browser it will appear to render nothing when that happens.

Thylia
20 May 2008, 7:53 AM
bodyStyle: "position: 'relative'; z-index: 0"This doesn't solve the problem either...I'll just have to wait until flash player and/or FF take care of this bug for Linux.

I have run into another peculiar glitch which occurs on both Linux and Windows using FF (didn't try IE on Windows). When charts are added to multiple TabPanel tabs and focus is changed between tabs the charts behave as though no data is loaded (they display the standard 'No data to display.' message). If the browser window is resized they begin working as expected. I'm guessing an event is being missed somewhere but I haven't started digging into the code yet. A brute force solution might be to listen to the TabPanel's activate event and manually reload the chart but that really shouldn't be necessary.

Have you encountered this problem before?

I have a same problem

jschick
20 May 2008, 8:01 AM
Your example works except I get the follow error when the chart data is loaded for the first tab.

"Error calling method on NPObject!"

The error occurs in uxfusion.js on line 137.

I've been trying to put a simple example together to mimic how I'm using the charts but I'm getting the same error in my example. What follows is my example; it's a bit crude but it'll give you an idea of how I'm loading the charts.



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Tab Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="uxmedia.js"></script>

<script type="text/javascript" src="uxflash.js"></script>

<script type="text/javascript" src="uxfusion.js"></script>


<script type="text/javascript">

Ext.onReady(function() {

Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';


this.chartXML = "<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' decimals='0' formatNumberScale='0'><set label='Jan' value='462' /><set label='Feb' value='857' /><set label='Mar' value='671' /><set label='Apr' value='494' /><set label='May' value='761' /><set label='Jun' value='960' /><set label='Jul' value='629' /><set label='Aug' value='622' /><set label='Sep' value='376' /><set label='Oct' value='494' /><set label='Nov' value='761' /><set label='Dec' value='960' /></chart>";

this.tabCount = 0;


this.tabs = new Ext.TabPanel({

region: 'center',

activeTab: 0,

margins: '5 5 5 0',

resizeTabs: true,

minTabWidth: 115,

tabWidth: 135,

enableTabScroll: true,

layoutOnTabChange: true,
tbar: [{
text: 'Add Tab',

handler: function() {
var tab = this.tabs.add(new Ext.ux.FusionPanel({
title: 'Tab '+(++this.tabCount),

floating: false,

fusionCfg: {
id: Ext.id(),
params:{ wmode:'transparent' }

},

autoScroll: true,

chartURL: (this.tabCount % 2)?'Column3D.swf':'Pie3D.swf'

}));
this.tabs.activate(tab);
},

scope: this,
tooltip: 'Load Chart',
tooltipType: 'title'
}],
bbar: [{
text: 'Load Chart',

handler: function() {
var tab = this.tabs.getActiveTab();
if(tab) {
tab.setDataXML(this.chartXML, true);
}
},

scope: this,
tooltip: 'Load Chart',
tooltipType: 'title'
}]

});



var viewport = new Ext.Viewport({

layout:'border',

items: [this.tabs, {
xtype:'panel',
region: 'west',
split: true,
width: 200,
html: '<p>West Region</p>'
}]

});

});

</script>

</head>

<body>



</body>

</html>



The SWF objects being refreshed may be what is causing my problem. After I resize the browser window to get the charts to display again they continue to work properly after that point but every time one of the tabs is activated the animation plays again as though the data was reloaded.

Thylia
20 May 2008, 8:09 AM
I have a same problemSee Video : http://www.thylia.fr/VideoExport/ExtJs/2008-05-19_1803.swf

Edit : The problem occurs only under firefox

hendricd
20 May 2008, 8:26 AM
@jschick - Just played with your example. I don't get any errors on XP/FF(2.0.0.14)

By default uxfusion forces a re-render of the SWF object during a resize operation because Fusion does not re-scale for you (not RIA friendly in that respect), so it must be rendered again to fit the Container. You can override this by setting:


fusionCfg: {
id: Ext.id(),
params:{ wmode:'transparent' },
renderOnResize: false
}But, I don't think you'll like the results ;)

What browser/platform is this?

jschick
20 May 2008, 8:37 AM
What browser/platform is this?

The server is a single board computer running an embedded version of Linux and I'm using FF on Linux and Windows.

I transferred the example to the server and I'm no longer getting the NPObject errors but I'm also not reproducing the issue I'm seeing in my full blown app. I'm going to continue adding to the example to try to get it as close as possible to what I'm doing in my app to see if I can figure out what's going on. Hopefully I'll have something to report before too long.

jschick
20 May 2008, 8:51 AM
Ok, here is an example that reproduces the problem. It has something to do with the combinations of layouts because the main difference between this example and the first one is the amount of nested layouts.



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Tab Example</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ux/uxmedia.js"></script>

<script type="text/javascript" src="extjs/ux/uxflash.js"></script>

<script type="text/javascript" src="extjs/ux/uxfusion.js"></script>


<script type="text/javascript">
ExamplePanel = function(config) {
Ext.apply(this, config);

this.chartPanel = new Ext.ux.FusionPanel({
region: 'center',

floating: false,

fusionCfg: {
id: Ext.id(),
params:{ wmode:'transparent' }

},

autoScroll: true,

chartURL: 'Column3D.swf'

});


ExamplePanel.superclass.constructor.call(this, {
layout: 'border',
closable:true,
frame: true,
header: false,

items: [{
region: 'center',
layout: 'border',
items: [this.chartPanel, {
region: 'south',
split: true,
height: 175,
minSize: 50,
html: '<p>South Region</p>'
}]
},{
xtype: 'panel',
region: 'west',
split: true,
width: 175,
html: '<p>West Region</p>'
}]
});

};



Ext.extend(ExamplePanel, Ext.Panel, {

loadData : function(xml) {
this.chartPanel.setDataXML(xml, true);
}
});


Ext.onReady(function() {

Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';


this.chartXML = "<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' decimals='0' formatNumberScale='0'><set label='Jan' value='462' /><set label='Feb' value='857' /><set label='Mar' value='671' /><set label='Apr' value='494' /><set label='May' value='761' /><set label='Jun' value='960' /><set label='Jul' value='629' /><set label='Aug' value='622' /><set label='Sep' value='376' /><set label='Oct' value='494' /><set label='Nov' value='761' /><set label='Dec' value='960' /></chart>";

this.tabCount = 0;


this.tabs = new Ext.TabPanel({

region: 'center',

activeTab: 0,

margins: '5 5 5 0',

resizeTabs: true,

minTabWidth: 115,

tabWidth: 135,

enableTabScroll: true,

layoutOnTabChange: true,
tbar: [{
text: 'Add Tab',

handler: function() {
var tab = this.tabs.add(new ExamplePanel({title: 'Tab '+(++this.tabCount)}));
tab.show();
},

scope: this,
tooltip: 'Load Chart',
tooltipType: 'title'
}],
bbar: [{
text: 'Load Chart',

handler: function() {
var tab = this.tabs.getActiveTab();
if(tab) {
tab.loadData(this.chartXML);
}
},

scope: this,
tooltip: 'Load Chart',
tooltipType: 'title'
}]

});



var viewport = new Ext.Viewport({

layout:'border',

items: [this.tabs, {
xtype:'panel',
region: 'west',
split: true,
width: 200,
html: '<p>West Region</p>'
}]

});

});

</script>

</head>

<body>

</body>

</html>




You'll have to change the paths in the javascript includes to run it.

hendricd
20 May 2008, 9:11 AM
Wow, yeah you've got doubled-nested border layouts going into those tabs. ;)

jschick
20 May 2008, 9:18 AM
To achieve the desired layout I had to /:)

hendricd
20 May 2008, 11:00 AM
@jschick - I played, and played, and played. What you're missing is the all anti-reflow enhancements (http://extjs.com/forum/showthread.php?p=152546#post152546) for your layout (that uxmedia and subclasses already have built-in). That is new visibilityMode for Containers/Layouts.

Other issues:
- autoScroll for a Fusion chart class just causes overflow problems. Stick with the defualts for resizing and overflow and you should be fine.
- tabPanels do NOT render well without any items in them, so I added an ExamplePanel for the first tab to demonstrate:



ExamplePanel = function(config) {
Ext.apply(this, config);

this.chartPanel = new Ext.ux.FusionPanel({
region: 'center',
fusionCfg: {
id: Ext.id(),
params:{ wmode:'transparent' }
},
autoScroll: false, //the default
chartURL: 'Column3D.swf'
});

ExamplePanel.superclass.constructor.call(this, {
layout: 'border',
closable:true,
frame: true,
header: false,
defaults: {hideMode : !Ext.isIE?'nosize':'display', animCollapse: false },
items: [{
region: 'center',
layout: 'border',
defaults: {hideMode : !Ext.isIE?'nosize':'display', animCollapse: false },
items: [this.chartPanel,
{
region: 'south',
split: true,
height: 50,
//minSize: 50,
html: '<p>South Region</p>'
}]
},{

region: 'west',
split: true,
width: 175,
html: '<p>West Region</p>'
}]
});

};

Ext.extend(ExamplePanel, Ext.Panel, {

loadData : function(xml) {
this.chartPanel.setDataXML(xml, true);
}
});
and...



this.chartXML = "<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' decimals='0' formatNumberScale='0'><set label='Jan' value='462' /><set label='Feb' value='857' /><set label='Mar' value='671' /><set label='Apr' value='494' /><set label='May' value='761' /><set label='Jun' value='960' /><set label='Jul' value='629' /><set label='Aug' value='622' /><set label='Sep' value='376' /><set label='Oct' value='494' /><set label='Nov' value='761' /><set label='Dec' value='960' /></chart>";
this.tabCount = 0;


this.tabs = new Ext.TabPanel({

region: 'center',

activeTab: 0,

margins: '5 5 5 0',

resizeTabs: true,
deferredRender : false,
minTabWidth: 115,
tabWidth: 135,
enableTabScroll: true,

defaults: {hideMode : !Ext.isIE?'nosize':'display'},
items : new ExamplePanel({title: 'Tab '+(++this.tabCount)}),
layoutOnTabChange: true, //helpful

tbar: [{
text: 'Add Tab',

handler: function() {
var tab = this.tabs.add(new ExamplePanel({title: 'Tab '+(++this.tabCount)}));
this.tabs.activate(tab);
},

scope: this,
tooltip: 'Load Chart',
tooltipType: 'title'
}],bbar:[{
text: 'Load Chart',

handler: function() {
var tab = this.tabs.getActiveTab();
if(tab) {
tab.loadData(this.chartXML, true);
}
},

scope: this,
tooltip: 'Load Chart',
tooltipType: 'title'
}]

});

Ext.fx = null;

var viewport = new Ext.Viewport({

layout:'border',
defaults: {hideMode : !Ext.isIE?'nosize':'display', animCollapse: false },
items: [this.tabs, {
xtype:'panel',
region: 'west',
split: true,
width: 200,
html: '<p>West Region</p>'
}]

});With all upstream containers covered by the new visibilityMode, your SWF refreshes are reduced substantially.

Give that a shot. Lemme know (you too @Thylia ).

jschick
20 May 2008, 12:12 PM
Those additions did it. Thank you so much. Everything works beautifully now.

Thylia
21 May 2008, 5:08 AM
I set my problem by simply changing the "autoScroll" true to false

jschick
22 May 2008, 11:19 AM
hendricd you may want to run uxmedia.js, uxflash.js, and uxfusion.js through jslint; there are some missing commas and semicolons.

On a different note...is there a way to reset a chart that has data loaded back to the 'No data to display' state?

hendricd
22 May 2008, 11:32 AM
hendricd you may want to run uxmedia.js, uxflash.js, and uxfusion.js through jslint; there are some missing commas and semicolons. Thanks, I will again. jslint often complains about comma placement (not at the end of a line vs beginning of next ) when run with it's default settings.


On a different note...is there a way to reset a chart that has data loaded back to the 'No data to display' state?

I believe that would be a simple:
panel.setDataXML('<chart><chart/>',true);The Fusion Forums may have alternate approaches available.

jschick
22 May 2008, 11:40 AM
Thanks, that worked.

When using jslint I just check 'Tolerate sloppy line breaking' to avoid the line breaking errors.

Another quick question: How do I pass values to the chart for params like ChartNoDataText? I tried putting this is the fusionCfg but it didn't work.

hendricd
22 May 2008, 11:57 AM
Their forum is also searchable: http://www.fusioncharts.com/forum/Topic5005-28-1.aspx?Highlight=ChartNoDataText

Just add any custom variable in your fusionCfg:



fusionCfg:{
params: {
flashVars: { ChartNoDataText : 'Some message' }
}
}

hendricd
22 May 2008, 12:07 PM
Prev post edited

jschick
22 May 2008, 12:10 PM
Yes, I've tried that and I can't get it to work...that's why I asked ;)

Here is my chart config.



this.chartPanel = new Ext.ux.FusionPanel({
region: 'center',
floating: false,
fusionCfg: {
id: Ext.id(),
params:{
wmode:'transparent',
ChartNoDataText: 'Select a chart.'
}
},
chartURL: 'charts/Column2D.swf'
});

hendricd
22 May 2008, 12:27 PM
See my prev post revised?

jschick
22 May 2008, 12:27 PM
Ah! Thanks.

stever
22 May 2008, 7:13 PM
Thanks, I will again. jslint often complains about comma placement (not at the end of a line vs beginning of next ) when run with it's default settings.


I believe that would be a simple:
panel.setDataXML('<chart><chart/>',true);The Fusion Forums may have alternate approaches available.

I started adding a setData() method that would take an object data and convert it into xml, then call setDataXML to pass it to the chart. My idea was to take setStore() from Chart from Ext3 so FusionCharts would use Ext store data, and setData would be a method to act as a bridge (or to change current data based on some other non-store clienside data).

The main idea being that this FusionChart class could be a drop in replacement for the Chart in Ext3, and that the semantics would be the same (perhaps using the same Ext.chart.ColumnSeries, etc). Have you looked it over? Is that a direction you are going or are interested in going?

hendricd
23 May 2008, 4:59 AM
Have you looked it over? Is that a direction you are going or are interested in going?

Yes, I have reviewed Jack's API for the YUI chart impl. As you may already be aware, chart solutions all take different approaches towards chart series/catagorization.

YUI is largely array(copies)-based but allows updates to the data series programatically via Flash ExternalInterfaces.

Fusion is strictly XML-stream based (all chart attributes must go in the document).

OpenFlashCharts (http://teethgrinder.co.uk/open-flash-chart/index.php)2.0 (just completed a ux.Chart.OFC for that one too) has switched to an all JSON approach. Some chart rendering attributes can be set via an ExternalInterface.

The YUI API probably maps the closest to Ext.Stores because it supports native JS arrays so easily, but I still can't help but wonder whether the server-side isn't still the best place to generate all this. Using Ext.Stores (usually) means some type of columnModel linkage or sub-store aggregation client-side just to render a relevant chart series. Complex data series (stocks: open/high/lo/close) would always be better served gathering all that from hardware capable of aggregating (AVG, MIN, MAX, DATEMATH, etc) result-sets.

And PagingToolbar adds another layer of complexity to the picture when they try to link scrolling editable grids to a chart (I can just hear it now... ;) ).

A sub-classable Chart.StoreAdaptor might make sense, but it would mean potentially heavy maintenance along the way. :-?

Still on the fence,

zerodivide
23 May 2008, 9:23 AM
zip file is corrupted, unable to open it :(

stever
23 May 2008, 3:52 PM
A sub-classable Chart.StoreAdaptor might make sense, but it would mean potentially heavy maintenance along the way. :-?

Well, for now I have added refresh() and setStore() to GoogleChart. Jack will have to give some guidance here if it is OK to post or not. The only column model-ish thing I did was to check what the user gave for the legend and only pick those columns from the store. Quick and dirty perhaps, but it works. ;)

I do agree that when using complex cases, most of the time, the chart <--> server doesn't need the client JS to get in the way. Excepts might be:

* If you have several "gauges" or the like, one call to get them all is probably preferred.
* The data is on the client side
* You are graphing what is also in a grid or similar and they should match.

I like Fusion the best, but their licensing is screwy. They don't license just per developer, but also per website. Since we are offering free subdomains (and later on your own domain), etc., that will require us to get the most expensive licenses. At that point, it doesn't matter if they are better or not. Good enough works fine too.

That is part of the reason I'd like to see a common interface -- so if the landscape changes, we could change the tech for the charts with the smallest change in code.

Keep up the good work!

enihs
26 May 2008, 5:39 PM
uxfusion_RC1.zip
why this download can not be unzipped ?

Jinping
26 May 2008, 7:07 PM
uxfusion_RC1.zip Unzip on firefox,not unzip in ie

uxfusion_RC1.zip download Unzip on firefox,not unzip in ie

enihs
27 May 2008, 3:21 AM
3x jingping

damien
12 Jun 2008, 4:17 AM
I have a menu on my webpage. Clicking the menu reloads a submenu. The page with the fushioncharts is still visible. Problem is that when i mask and unmask the viewport (i do this when loading the data from the server to populate the submenu) the fushionchart is reloaded. Example:

browser.el.mask('Laden pagina. Ogenblik geduld a.u.b...');
and

browser.el.unmask();
reloads the fushionchart and loads all the data from the server again. Is it possible to prevent this? thanks

hendricd
12 Jun 2008, 4:38 AM
Is it possible to prevent this? thanks

I'm afraid not. Masking document.body (viewport.el) injects an absolute-positioned DIV (the mask) high in the DOM structure, which is what causes non-IE browsers to reflow.

Have you tried masking just the menu.el?

Edit: BTW, maximize/minimize an Ext.Window does the same thing if shadow is enabled (another abspos DIV involved).

damien
12 Jun 2008, 11:20 PM
Thanks for your reply. I will look for a workaround.

sigaref
17 Jun 2008, 3:55 AM
Does someone already have a solution for exporting FusionCharts server side on Linux server into an image withouth any client webbrowser?

james.tucker
27 Jun 2008, 8:26 AM
EDIT: Ignore this, I read through the rest of the thread and found my answer.

I am unable to unzip the files for this UX component. It sounds really cool, but I can't get into it. Suggestions?

hendricd
27 Jun 2008, 8:32 AM
Download with FF2/3. Lotsa people have trouble with IE :-?

jschick
27 Jun 2008, 9:13 AM
When is Extjs 2.1 support expected? What has to be done for it to be supported?

hendricd
27 Jun 2008, 9:20 AM
When is Extjs 2.1 support expected? What has to be done for it to be supported?

Should be wrapping up testing soon. ;)

jschick
27 Jun 2008, 9:37 AM
Any chance I could get a pre-release copy of the 2.1 code to play around with?

hendricd
27 Jun 2008, 10:13 AM
Here's a beta1 release for Ext 2.1 only(sorry, no samples yet).

jschick
27 Jun 2008, 10:57 AM
Thanks! From what I can tell so far everything works just as it did in RC1.

hendricd
27 Jun 2008, 11:00 AM
Good to hear, but there will likely be a few more changes -- especially when Ext 2.2 is released and FF3 settles down a bit. ;)

jschick
30 Jun 2008, 7:47 AM
When I call mask on the element for the Container that contains my chart panel while the chart data is being loaded and then unmask the element after loading has completed the chart data isn't displayed. I'm sure this problem is related to the hideMode workaround for panels but I haven't been able to figure out how to work around it. The chart XML is generated on the client and then loaded using setDataXML. I figured it might be as easy as unmasking the element before the setDataXML call but when I do that I get "o.SetVariable is not a function" when " o.SetVariable("_root.dataURL","");" is called. Any ideas?

Of course just as is the case with the panel problem after the container is resized the chart is displayed.

jschick
30 Jun 2008, 7:58 AM
The following css is applied to the chart object when masked. My guess is it has something to do with the problem.



.x-masked select, .x-masked object, .x-masked embed {
visibility:hidden;
}

hendricd
30 Jun 2008, 8:04 AM
Can you post your mask/load/unmask sequence?

hendricd
30 Jun 2008, 8:16 AM
The base Media class uses the "standard" Element.mask. But, for Flash objects thats a problem as the absolute-positioned mask forces reflows and hides the flash object. Adding a custom masking solution is likely required and is the "last-item-on-my-list" for the Flash classes. (Wondering if its really worth all the effort tho? :-?).

jschick
30 Jun 2008, 8:21 AM
Here are the two functions that load the chart data and process it after it's loaded.



processResponse : function(respObj, caption, subCaption) {
var ranges = respObj.dist.ranges;
var xmlStr = "<chart palette='2' caption='"+caption+"' subCaption='"+subCaption+"' xAxisName='Weight' yAxisName='Quantity' showValues='0' decimals='0' formatNumberScale='0' useRoundEdges='1' animation='0'>";
if(ranges.length > 0) {
for(var i=0, len=ranges.length;i < len;++i) {
xmlStr += "<set label='"+ranges[i][3]+"' value='"+ranges[i][1]+"'/>";
}
}
else {
// Show empty chart rather than 'No data' message
xmlStr += "<set label='empty' value='0' alpha='0' showLabel='0'/>";
}
xmlStr += "</chart>";
this.chartPanel.setDataXML(xmlStr, true);
this.distStore.loadData(ranges);
var totalCount = parseFloat(respObj.dist.totalCount);
var totalWeight = parseFloat(respObj.dist.totalWeight);
this.distSummaryQty.setRawValue(totalCount);
this.distSummaryAvgWt.setRawValue((totalCount == 0)?0:Math.round(totalWeight/totalCount));
this.distSummaryTotalWt.setRawValue(totalWeight);
},

loadDistribution : function(params, caption, subCaption) {
this.startLoading({text: 'Generating report', clear: false});
Ext.Ajax.request({
url: '/cgi-bin/report.cgi',
method: 'post',
params: params,
scope: this,
callback: function(options, success, resp) {
var respObj = Ext.util.JSON.decode(resp.responseText);
if(!success || respObj.success === false) {
Ext.Msg.alert('Error', (respObj && respObj.message) || 'Error loading distribution. Please try again.');
this.stopLoading();
return;
}
this.stopLoading();
this.processResponse(respObj, caption, subCaption);
}
});
},


This is a plugin I created which provides a simple way of displaying loading status for panels using a StatusBar.



/**
* BasicLoad plugin
* Adds basic functions to show loading status for a Panel.
*
*/
Ext.ux.plugins.BasicLoad = function(config) {

// initialize plugin
this.init = function(panel) {
Ext.apply(panel, {

clearFn : (config && config.clearFn)?config.clearFn:Ext.emptyFn,

startLoading : function(cfg) {
var tb = this.getBottomToolbar();
if(!cfg) {
cfg = {};
}
this.getEl().mask();
tb.showBusy(cfg.text || 'Loading');
if(cfg.clear !== false) {
this.clearFn();
}
},

stopLoading : function() {
var tb = this.getBottomToolbar();
this.getEl().unmask();
tb.clearStatus();
}
});
if(config && (config.store || config.tree)) {
var o = (config.store)?config.store:config.tree.root;
o.on('beforeload', panel.startLoading, panel);
o.on('load', panel.stopLoading, panel);
}
}; // end of function init
}; // BasicLoad plugin end

hendricd
30 Jun 2008, 12:52 PM
@jschick -- Ah, yes, your plugin is unaware of reflow issues presented by absolute-positioned masks (for container.el) so it causes the downstream Flash object to redraw (except on IE).

The standard Element.mask will not "play well" with these type of embedded objects. :-?

Ted Gaunt
30 Jun 2008, 1:02 PM
does ex.Chart.Fusion (or fusion for that matter) allow javascript processing for click events? I want to be able to do some data drill down. Clicking on bar #5 to do something (reload different data, etc.)

If this doesn't work today, is it feasible?

hendricd
30 Jun 2008, 1:21 PM
@Ted -- Yes, the ux.Chart.Fusion classes do support inline listeners:



var chartEvents = {
'mousemove':function(){console.log(['mousemove',arguments])},
'click' : ???
};

var fChart= new Ext.ux.FusionWindow({

height : 600,
width : 350,
x : 570,
title : 'ux.FusionWindow',
collapsible : true,
maximizable : true,
constrainHeader : true,
fusionCfg :{ id : 'chart2'
,listeners: chartEvents
}
,id :'demoFusion'
,chartURL : 'Column3D.swf'
, dataURL :'Column3D.xml' //let the chartObj load it
});

But, what additional DOM events are actually raised is up to Fusioncharts.com and you. ;)

jschick
1 Jul 2008, 10:11 AM
What would cause the SetVariable function to not be defined when it's called in setDataXML?


o.SetVariable("_root.dataURL","");

I'm aware that I haven't given you much information but I don't have much to give. I get the error under just the right circumstances in IE7 when I open two tabpanel tabs in rapid succession containing charts that are loaded when they are opened. It only happens when the site is loaded for the first time after IE is opened (I'm guessing this is the only time IE loads a fresh copy of the chart SWFs). It seems like it's a timing issue of some kind.

I'll see if I can get it to happen in an example but I thought maybe you'd have some wisdom to offer that might aide in troubleshooting this error.

hendricd
1 Jul 2008, 10:27 AM
I would need to see this baby in action before I could even guess.

If this were any browser but IE, i'd recommend you remove your plugin to eliminate reflow issues.

jschick
1 Jul 2008, 10:38 AM
Ok, I'll see if I can get a simplified example to exhibit the same problem.

BTW I modified the plugin to optionally use an array of components which are to be masked rather than always masking the whole panel. I specify only the components that should be masked which never includes the chart panel or a parent container of the chart panel.

The IE error happens with and without the plugin masking elements.

jschick
1 Jul 2008, 12:16 PM
Well this is the best I've been able at reproducing something. Interestingly enough the example works fine in IE7 but produces errors in FF. Just put it in your example directory and make sure it can find the chart SWF and ux.Chart files. To get the error in FF open the file, click 'Add Tab' a couple times very fast, then click on one of the previous tabs other than the first one.

I suspect the root of this problem may be what's causing problems with IE in the real application.

hendricd
1 Jul 2008, 2:21 PM
@jschick -- I think your timing is the problem. The render event is a better guarantee that the <object> tag is rendered and in a usable state. Use this tbar instead:



tbar: [{
text: 'Add Tab',
handler: function() {
var ex = new Ext.ux.FusionPanel({
border: false,
fusionCfg: {
id: Ext.id(),
params:{ wmode:'transparent' }
},
chartURL: 'fusion/Charts/Column3D.swf',
closable: true,
title: 'Tab '+(++this.tabCount),
listeners: {
render: {
fn: function(panel) {
panel.setDataXML (this.chartXML, true);
},
scope: this
}
}
});
this.tabs.activate(this.tabs.add(ex));

},
scope: this,
tooltip: 'Load Chart',
tooltipType: 'title'
}]

jschick
1 Jul 2008, 2:51 PM
@hendricd -- Thanks for your time. After considering your changes to the example code I got to thinking about the fact that the tabpanel has deferredRender = false. I picked through the dom and sure enough everything is there before a tab is opened except the object element. Why doesn't it render right away like everything else? Is there a way to force it to render up front?

hendricd
1 Jul 2008, 2:58 PM
@hendricd -- Thanks for your time. After considering your changes to the example code I got to thinking about the fact that the tabpanel has deferredRender = false. I picked through the dom and sure enough everything is there before a tab is opened except the object element. Why doesn't it render right away like everything else? Is there a way to force it to render up front?

Yes ;)

Just pass the dataXML in the constructor and the component will pass it to the chart object when it's initialized:


tbar: [{
text: 'Add Tab',
handler: function() {
var ex = new Ext.ux.FusionPanel({
border: false,
fusionCfg: {
id: Ext.id(),
params:{ wmode:'transparent' }
},
chartURL: 'fusion/Charts/Column3D.swf',
closable: true,
title: 'Tab '+(++this.tabCount),
dataXML : this.chartXML
});
this.tabs.activate(this.tabs.add(ex));

},
scope: this,
tooltip: 'Load Chart',
tooltipType: 'title'
}]

jschick
3 Jul 2008, 12:16 PM
Here is the summary of my problem and solution for anyone who might benefit from it.

Summary + Hypothesis:

I have several tabs in a tabpanel that contain charts among other things. When a tab is opened for the first time the chart data needs to be loaded. Each tab has a function called loadContents which is called after the tab is activated by code external to the tab (the same code that set the tab to the active). The problem where the chart object element didn't exist when setDataXML was called occurred because setDataXML was called in the XHR callback that got the chart data from the server which thus creating a race condition.

Solution:

The tabs use a border layout with the chart in the center and a grid in the south. Instead of creating the chart panel along with the rest of the tab's components I added an empty panel to the center region which uses a fit layout (centerPanel in the code below) and create and add the chart panel to the centerPanel when it is loaded for the first time. The key to all of this working is using the dataXML property of the chart panel as hendricd suggested to load the data for the first time. The function I use to set the chart data is below.



setChartData : function(xmlStr) {
if(!this.chartPanel) {
this.chartPanel = this.centerPanel.add(new Ext.ux.FusionPanel({
floating: false,
border: false,
bodyStyle: 'padding: 5 5 0 5',
fusionCfg: {
id: Ext.id(),
params: {
wmode:'transparent',
flashVars: { ChartNoDataText: ' ' }
}
},
chartURL: 'charts/MSLine.swf',
dataXML: xmlStr
}));
this.centerPanel.doLayout();
return;
}
this.chartPanel.setDataXML(xmlStr, true);
}


The solution adds an extra layer of nesting but the problem seems to be gone and I couldn't think of a better way to fix it.

OakGoat
7 Aug 2008, 10:05 AM
Does anyone have an example of a Fusionchart window nested inside complex layout center panel? I need to nest several windows with charts and can't get my mind around it.

kubens
9 Aug 2008, 6:40 AM
Congratulation to this very nice plugin :D

I played a little bit with your plugin and with fusion charts. My idea is to use your plugin with fusion charts on a dash board. Unfortunatelly I recognized that in this combination the fusion charts are not rendered correctly in our lovely IE. I have prepared two examples:

Example A. http://extjs.kaffill.de/site.tmp/test_fusion_looks_good.html
Example B. http://extjs.kaffill.de/site.tmp/test_fusion_looks_notsogood.html

In example A. you can see six fusion charts and two clocks. All flash objects are rendered correct as expected.

In example B. you can see eight fusion charts. The first seven charts are rendered correct, but chart 8 is rendered to small.

The only difference between both examples is the usage of other flash components beside fusion charts.

My question are:
Has anybody else seen this problem with this plugin and fusion charts anytime before?
Has anybody an idea what the reason of this problem could be?

Thanks in advance
Wolfgang

kubens
17 Aug 2008, 4:27 AM
@Kubens-- Just got a chance to examine both sites on IE and they seem to render things just fine. Have you found a solution since you originally posted the issue?
No, I did not changed anything and the problem which you can see on the screenshots above is still existing. But I have seen that this does not occur everytime if I use the online playground. If I use my local playground then this occurs everytime. The only differnce between online and local playground is the response time. Everything else is identical.

Furthermore I find out that the same silly behaviour is reproducable in IE 6.x too :-(

Br
Wolfgang

hendricd
18 Aug 2008, 6:48 AM
@Kubens -- Just tried 'nosogood.html' again and it happened to me too on IE7. Try setting autoScroll:false on all those Panels. They are layed out properly, and the last chart is rendered, but Fusion didn't render it where it's supposed to go :-?

kuzi
20 Aug 2008, 6:59 PM
Hi,
I want to create a chart after clicking a row in the grid. I send the ID of the field by URL (it's own name based on database field) to the grid panel listener, where I should create xml string (I use php script to support it -it gets some data from database and create xml output). Xml string is passed to fusion panel (by dataURL attribute - how can I pass it to fusion panel in the click listener?). The chart is shown in one of the Ext panels (great job, hendricd :) ), but I couldn't get chart after clicking other row in the grid. I know that this matter refers to rendering panels, but I can't solve it. Can anybody help me?
Fusion panel is defined outside rowclick listener. I need to get xml string based on ID - how can I pass it to dataURL attribute (I can't handle setDataURL function)?
Thanks in advance!

Chris

evant
20 Aug 2008, 8:23 PM
myGrid.on('rowclick', function(g, index)
{
var rec = g.getStore().getAt(index);
var id = rec.get('id');
}
);

kuzi
20 Aug 2008, 11:24 PM
I use something like this:



listeners: {
rowdblclick: function(grid, rowIndex, e) {
IDanalysis = AnalysisDataStore.getAt(rowIndex).data.IDanalysis;
}
}

inside grid to get an ID of clicked row, but how to pass it to fusion panel to create xml output before it gets rendered?
I need something like this: fusionpanel.setDataURL("./charts.php?IDanalysis="+IDanalysis+"",true). Do I have to set all of the values to fusionpanel and finally render it?

kuzi
21 Aug 2008, 1:58 AM
Here is a part of the code which is responsible for creating dynamic charts:



var IDanalysis;

AnalysisListingGrid = new Ext.grid.GridPanel({
id: 'AnalysisListingGrid',
store: AnalysisDataStore,
cm: AnalysisColumnModel,
border: false,
listeners: {
rowdblclick: function(grid, rowIndex, e) {
IDanalysis = AnalysisDataStore.getAt(rowIndex).data.IDanalysis;

getTools = function(){
return [{id:'gear', handler:function(e,t,p){ p.refreshMedia();},qtip: {text: 'Odswiez'} },
{id:'print', handler:function(e,t,p){ p.print();},qtip: {text:'Drukuj'} }
];};

fusionpanel = new Ext.ux.FusionPanel({
title: 'Line chart',
floating:false,
fusionCfg :{ id : 'chart1'
},
autoScroll : true,
chartURL : 'Line.swf?ChartNoDataText=Wybierz badanie z lewego panelu&XMLLoadingText=Pobieranie danych. Prosze czekac...',
dataURL : "./charts.php?IDanalysis="+IDanalysis+"",
width : 680,
height : 400,
listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);}
,chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')}
,chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
},
tools : getTools(),
bodyStyle: 'padding:10px;',
margins: '5 5 5 5',
layout: 'fit',
region: 'center'
});
}
}
});


var getTools = function(){
return [{id:'gear', handler:function(e,t,p){ p.refreshMedia();},qtip: {text:'Odswiez'} },
{id:'print', handler:function(e,t,p){ p.print();},qtip: {text:'Drukuj'} }
];};

var fusionpanel = new Ext.ux.FusionPanel({
title: 'Line chart',
floating:false,
fusionCfg :{ id : 'chart1'
},
autoScroll : true,
chartURL : 'Line.swf?ChartNoDataText=Wybierz badanie z lewego panelu Choose analysis from left panel&XMLLoadingText=Pobieranie danych. Prosze czekac...',
width : 680,
height : 400,
listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);}
,chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')}
,chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
},
tools : getTools(),
bodyStyle: 'padding:10px;',
margins: '5 5 5 5',
layout: 'fit',
region: 'center'
});

fusionpanel.show();


As you see, I need ID to pass it to dataURL attribute inside fusion panel. The same object is created to show "No data to display" info on first rendering. After clicking a row in the grid fusion panel should be updated. It has to render inside Tabpanel in one of the border layout panel.



...
items: [{
layout: 'fit',
region: 'center',
items: fusionpanel
}
...


How to use rendering and passing dataURL attribute to proper display the chart?

hendricd
21 Aug 2008, 4:06 AM
@kuzi -- I moved your thread here as it relates to the ux.Fusion objects.

You need to get you basic layout arranged first. You don't need to create two FusionPanels, the one you had for the initial layout was fine, but it lacked a way to reference it later within your click handler and you were over-nested in your border layout. Give it a component ID:



layout:'border',
items: [
new Ext.ux.FusionPanel({
region: 'center',
id: 'chartDetail',
title: 'Line chart',
floating:false,
fusionCfg :{ id : 'chart1'},
chartURL : 'Line.swf?ChartNoDataText=Wybierz badanie z lewego panelu Choose analysis from left panel&XMLLoadingText=Pobieranie danych. Prosze czekac...',
listeners :{
chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')}
,chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
},
tools : [{id:'gear', handler:function(e,t,p){ p.refreshMedia();},qtip: {text:'Odswiez'} },
{id:'print', handler:function(e,t,p){ p.print();},qtip: {text:'Drukuj'} }
],
bodyStyle: 'padding:10px;',
margins: '5 5 5 5'

}),
AnalysisListingGrid
]

...
Then your grid click handler would look like this:


listeners: {
rowdblclick: function(grid, rowIndex, e) {
var IDanalysis = AnalysisDataStore.getAt(rowIndex).data.IDanalysis;
Ext.getCmp('chartDetail').setDataURL( "./charts.php?IDanalysis="+IDanalysis,true);
}
}.....

kuzi
21 Aug 2008, 6:27 AM
It works great, thanks a lot hendricd :)

Chris

stumpy_uk
28 Aug 2008, 9:32 AM
Doug,

I dont knwo if you have come across this one, but I am using this extenion but struggle with the formatting of number, I have set them in the params in various ways etc but cannot stop the system changing to 1.6k instead of 1645 etc..


items: new Ext.ux.FusionPanel({
id: 'fusionchart',
collapsible : false,
floating:false,
fusionCfg :{ id : 'chart1'
,params:{
flashVars : {
formatNumberScale: 0,
formatNumber: 0,
lang : 'EN'
}
}
},
autoScroll : true,
id : 'chartpanel',
chartURL : chart,
dataURL : '../vote/PollGraph.asp?pollid=' + pollId,
//dataURL : xmlfile,

width : 400,
height : 300
}),

Not sure if you have come across or have any hints etc.

hendricd
28 Aug 2008, 5:11 PM
@stumpy_uk -- all that is controlled by the XML stream itself. Check their docs. ;)

cmendez21
30 Aug 2008, 1:52 PM
hi everyone i just found something strange and i cant find solution yet

If i use the code as exactly here




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ux.Fusion Charts with ux.MediaFlash</title>
<link rel="stylesheet" type="text/css" href="../../ext-2.1/resources/css/ext-all.css" />

<a href="../../ext-2.1/adapter/ext/ext-base.js">ext-base.js</a>
<script type="text/javascript" src="../../ext-2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-2.1/ext-all.js"></script>

<script type="text/javascript" src="ext-basex-min.js"></script>
<script type="text/javascript" src="uxmedia.js"></script>
<script type="text/javascript" src="uxflash.js"></script>
<script type="text/javascript" src="uxfusion.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />

<script type="text/javascript">

var fusion;
Ext.lib.Ajax.forceActiveX = true;
Ext.BLANK_IMAGE_URL = '../../ext-2.1/resources/images/default/s.gif';
Ext.onReady(function(){

Ext.QuickTips.init();
Ext.QuickTips.getQuickTip().interceptTitles = true;
Ext.QuickTips.enable();

var menuHandler = {
render: function(p){
p.body.on({
'click': function(e, t){
e.stopEvent();
if(String(t.getAttribute('target')).toLowerCase() == 'fusion'){
var p = Ext.getCmp('demoFusion');
if(p && p.mediaCfg.url != t.getAttribute('chart')){
p.mediaCfg.url=t.getAttribute('chart');
p.renderMedia();
}

}
},
delegate:'span'
});
}
};

var getTools = function(){
return [ {id:'gear', handler:function(e,t,p){
p.refreshMedia();
}, qtip: {text:'Refresh the Chart'} },
{id:'print', handler:function(e,t,p){
p.print();
}, qtip:{text:'Print the Chart'} }
];
};

var chartEvents = {
//'mousemove':function(){console.log(['mousemove',arguments])}
};

panel = new Ext.ux.FusionPanel({
title : 'ux.FusionPanel',
collapsible : false,
renderTo : Ext.getBody(),
floating : false,
fusionCfg :{id : 'chart1',
params:{
chartWidth:"750",
chartHeight:"500"
}
,listeners:chartEvents,
renderOnResize: true
},
// mediaCfg: {
// height : 450,
// width : 750,
// autoSize : true, //Fusion required after reflow
// renderOnResize:true, //Fusion required after reflow
// scripting : 'always',
// cls :'x-media x-media-swf x-chart-fusion',
// params : {
// wmode :'transparent',
// scale :'exactfit'
// }
// },
autoScroll : true,
id : 'chartpanel',
chartURL : 'Gantt.swf',
dataURL : 'cms_gantt.xml',
autoLoad : 'cms_gantt.xml',
width : 750,
height : 500,
listeners :{
show : function(p){
if(p.floating)
p.setPosition(p.x||0,p.y||0);
}
//, chartload : function(p,obj){console.log('chart '+p.id+' loaded.')}
//,chartrender : function(p,obj){console.log('chart '+p.id+' rendered.')}
},
tools : getTools()
});


//(view = new Ext.ux.FusionWindow({
//
// height : 600,
// width : 350,
// x : 570,
// title : 'ux.FusionWindow',
// renderTo : Ext.getBody(),
// collapsible : true,
// maximizable : true,
// renderTo : Ext.getBody(),
// tools : getTools(),
// fusionCfg :{ id : 'chart2'
// ,listeners: chartEvents
// }
// ,id :'demoFusion'
// ,chartURL :'Column3D.swf'
// //, dataURL :'Column3D.xml' //let the chartObj load it
// ,autoLoad :'Column3D.xml' //let Ext autoLoad do the same.
//
//
//
// })).show();



panel.show();
// Ext.EventManager.on(window, "beforeunload", function(){
// Ext.destroy( view, panel);
// } ,window ,{single:true});

});
</script>
</head>
<body>
<div id="aboutFusion">
For more on FusionCharts visit <a href="http://www.fusioncharts.com/" target="_blank">fusioncharts.com</a>
</div>
</body>
</html>



it appears like image #1 in the attachments but if i click on refresh button appears normal as it should be

now if i remove comments on this part appears like the second image on the attachments



// mediaCfg: {
// height : 450,
// width : 750,
// autoSize : true, //Fusion required after reflow
// renderOnResize:true, //Fusion required after reflow
// scripting : 'always',
// cls :'x-media x-media-swf x-chart-fusion',
// params : {
// wmode :'transparent',
// scale :'exactfit'
// }
// },


and again i click on the refreshbutton and appears normal but from the beggining i cant make it appear right (:|

I used the gantt chart from the fusion charts free but no clue what is wrong, i dont know if i cant make it work fine the uxmedia component i tested before and i had the same issues always at the beggining of loading the file the media objects didnt show right

hendricd
30 Aug 2008, 3:27 PM
@cmendez21 -- Use one, not both:


autoScroll : true,
id : 'chartpanel',
chartURL : 'Gantt.swf',
dataURL : 'cms_gantt.xml', //the chart fetches it
autoLoad : 'cms_gantt.xml', //Ext ux.Fusion fetches it
width : 750,
height : 500,

cmendez21
30 Aug 2008, 5:02 PM
but still if i use one appears as the first image (:|

BlueCamel
2 Sep 2008, 8:20 PM
I've seen references to the ux.chart.OFC but I can't seem to find it? Does it exist yet or is this still work in progress? I saw a recent OFC2 Beta which looked fairly nice for basic charts. :)

Thanks much for your help and the great ux work!

hendricd
2 Sep 2008, 11:31 PM
I've seen references to the ux.chart.OFC but I can't seem to find it? Does it exist yet or is this still work in progress? I saw a recent OFC2 Beta which looked fairly nice for basic charts. :)

Thanks much for your help and the great ux work!

@BlueCamel -- Just packaging up some updated demos for the dist. Coming soon...

hendricd
3 Sep 2008, 6:47 AM
See first post for the latest.

aserron
15 Sep 2008, 3:18 PM
Hello, i implement a fusion-panel into a card layout. I define it by xtype with common params. When I run the app in FF or Chrome an small box appears down the treepanel in the second slot of the card. IE shows nothing wrong.
I test with FireBug and found that the box is the 'title' of the panel that's has no "display:none" later reading shows me that they had problems regarding visibility of the component, in fact I added display:none to the hide css and the panel just doesn

aserron
18 Sep 2008, 7:12 AM
Hello, I have a Fusion Panel into a card layout, located in the center region of the viewport a "border layout". I have two issues.

1) the most important print btn doesn

hendricd
18 Sep 2008, 7:20 AM
[quote=aserron;226012]Hello, I have a Fusion Panel into a card layout, located in the center region of the viewport a "border layout". I have two issues.

1) the most important print btn doesn

aserron
18 Sep 2008, 9:54 AM
@aserron -- Try to keep thread posts in the extension forum they belong to (not everyone uses extensions and may ignore your post).

Can you post more of your layout. That's usually the problem with rendering things where you want them. It's likely you have handler scope issues (or, you are using the FusionChartsFree) which has no print support.

Thanks 4 the advice and for moving the post.

Im using the full version of the chart.

We have a viewport variable with a "border" lay.
The center panel is defined as a Card lay.

Inside we have the items, all of them components as global vars.

For the fusion chart i try xtype lazy, with that strange issue in FF and Chrome, the title of the panel had maskin problems and shows inside the tree panel slot as a small box (i suppose that was unable to reach the nosize state).

Then again by xtype pack the fusion panel inside a fit layout created as global var, and positioned inside the card layout,

So mask it hides correctly, but no matter wich method always get the same result.

Could be something related with the main viewport definition?
How i could test this?

Thanks in advance.

hendricd
18 Sep 2008, 10:20 AM
....
Could be something related with the main viewport definition?
How i could test this?


Won't know till we see how you've coded the layout.

BlueCamel
18 Sep 2008, 5:49 PM
@BlueCamel -- Just packaging up some updated demos for the dist. Coming soon...

Thank you much! I'm excited about this but I'm also not sure I'll be able to make use of OFC. I really need a nice scrolling line chart similar to the Google stock chart but for trending multiple series of performance data, not stocks. (throughput vs latency over time)

I don't think OFC has a chart that handles this.

JoyfulBobHome
21 Sep 2008, 1:28 PM
What browser you on? It works fine for me on IE, FF, Opera, Safari (win).

What error are you getting, if any?

First off, thank you very much; this is simply awesome! =D>

Here's the error I'm getting in FF:


i.print is not a function
print()()uxfusion.js (line 240)
handler()()uxFusion.html (line 55)
initComponent()()ext-all.js (line 76)
camelFn()()ext-all.js (line 13)
getViewWidth()()ext-base.js (line 10)
[Break on this error] var i; if(i=this.getInterface())i.print();

Thanks in advance!

aserron
22 Sep 2008, 8:11 AM
First off, thank you very much; this is simply awesome! =D>

Here's the error I'm getting in FF:


i.print is not a function
print()()uxfusion.js (line 240)
handler()()uxFusion.html (line 55)
initComponent()()ext-all.js (line 76)
camelFn()()ext-all.js (line 13)
getViewWidth()()ext-base.js (line 10)
[Break on this error] var i; if(i=this.getInterface())i.print();

Thanks in advance!


(i=this.getInterface())i.print() is the problematic one.

When used as in the examples seems to reach some target at Dom with the specified feature, but when inserted into my layout manager a border layout, in the center region inside a card layout, a dom inspect show me that it was unable to reach something similar with the getInterface method.

There is some wise out here that understand how to fix this, I was unable to dig into the source perhaps an extension could fix it while the issue isn't fixed.

hendricd
22 Sep 2008, 11:43 AM
First off, thank you very much; this is simply awesome! =D>

Here's the error I'm getting in FF:


i.print is not a function
print()()uxfusion.js (line 240)
handler()()uxFusion.html (line 55)
initComponent()()ext-all.js (line 76)
camelFn()()ext-all.js (line 13)
getViewWidth()()ext-base.js (line 10)
[Break on this error] var i; if(i=this.getInterface())i.print();Thanks in advance!


(i=this.getInterface())i.print() is the problematic one.

When used as in the examples seems to reach some target at Dom with the specified feature, but when inserted into my layout manager a border layout, in the center region inside a card layout, a dom inspect show me that it was unable to reach something similar with the getInterface method.

There is some wise out here that understand how to fix this, I was unable to dig into the source perhaps an extension could fix it while the issue isn't fixed.

@JoyfulBobHome, @aserron -- The fact that it works in the demo, and not in your layout(s) makes me suspect you may have scope issue on that tool's handler. Can someone post those relevant portions of your layout for a peek ?

aserron
24 Sep 2008, 1:55 PM
@JoyfulBobHome, @aserron -- The fact that it works in the demo, and not in your layout(s) makes me suspect you may have scope issue on that tool's handler. Can someone post those relevant portions of your layout for a peek ?

There is procedure you could name to check for that issue?
I tryied many configs like xtype and and currently is working inside a global variable that's is managed by a card a layout on the center region of the viewport.

What i saw is the demos show the panel using the render-to param, i dont how could be this so diferent.

my code goes like this


var x = fusionpanel

tree.on = cardId.0setActiveItem (x);

viewport = layout border..

..
items:..

..
region:center,
layout:card,
items:[0,..,x]
..

JoyfulBobHome
24 Sep 2008, 8:41 PM
@JoyfulBobHome, @aserron -- The fact that it works in the demo, and not in your layout(s) makes me suspect you may have scope issue on that tool's handler. Can someone post those relevant portions of your layout for a peek ?

This is running the demo without any changes. I downloaded and unzipped the files and hit page fusion.html, which calls uxfusion.js and dies on line 240:


i.print is not a function
print()()uxfusion.js (line 240)
handler()()fusion.html (line 55)
initComponent()()ext-all.js (line 76)
camelFn()()ext-all.js (line 13)
getViewWidth()()ext-base.js (line 10)
[Break on this error] var i; if(i=this.getInterface())i.print();

fusion.html has no layout; just panels. The panel has:

,
tools : getTools()

and uxFsio.js has:


var fusionAdapter = Ext.extend( Media.Flash , {
...
,print : function() {
var i; if(i=this.getInterface())i.print();
}


Am I missing something?

hendricd
25 Sep 2008, 3:34 AM
@JoyfulBobHome, @aserron -- Here is a live link (http://freeport.theactivegroup.com/ext/ext-2.2/examples/charts/fusion.html) to the ChartPak2 demo.

Beyond that, without seeing your layouts and button handlers (for executing your desire to print the chart) I can't possible help.

Post more details, guys.

Joyfulbob
25 Sep 2008, 4:47 AM
Thanks for your reply.

I guess I'm confused. I downloaded chartpack2.zip and unzipped it to a new folder named "charts" in my 2.2 directory per your instructions:


Examples: Unzip the contents of chartpack2.zip to your /examples/uxcharts directory of the Standard Ext 2.1+ distribution.

..and just hit the fusion.html page; I didn't make any changes. Is there something else I need to do? I didn't have a charts folder; we're at Ext 2.2.

Thanks.

xblitz
25 Sep 2008, 5:32 AM
hey .. any plans to support amCharts? (http://www.amcharts.com) which is the only chart that i can use that supports real Time-based irregular interval data !

it probably works like the other charts that are supported!

Eric

Joyfulbob
25 Sep 2008, 6:39 AM
Interesting; I got my page I developed to print; however, the unzipped version, fusion.html, still does not print. I guess it's not an issue for me since now our developed pages print. :-/ =D>

aserron
25 Sep 2008, 12:12 PM
Interesting; I got my page I developed to print; however, the unzipped version, fusion.html, still does not print. I guess it's not an issue for me since now our developed pages print. :-/ =D>

Have you been able to print the fusion chart while its inside a layout manager?
Are you using the render-to property?

aserron
26 Sep 2008, 6:56 AM
Regarding the print issue.

here is my code:

viewport



var viewport = new Ext.Viewport({
layout:'border',
title: 'Ext Layout Browser',

//Items as an Array of objects
items:[{
//Item1: Header of the Page
},{
//Item2: Content Page - defines the look and feel auf the page
possible variants
layout : 'card',
deferredRender : true,
margins : '5 5 5 0',
activeItem : 0,
border : false,

items: [
item1,
item2,
..,
item n,

fusionChart,
]
},{
//Item3: Menu on the left
items: [treePanel]
}]


The config object:


fusionChart = {

id : 'fusion-panel',
xtype : 'fusionpanel',

title : 'Report Chart 1',


collapsible : false,
floating : false,
bodyBorder : false,
border : false,



loadMask : true,
mediaMask : {msg:'Loading Chart Object'},
autoMask : true,



fusionCfg :{
id : 'fusionpanel_swf',
title : 'Flash Chart'
listeners : chartEvents
},
autoScroll : true,


chartURL : '../fusioncharts/Column2D.swf',
dataURL : '../transactions/xml.chart.transact.php',


listeners :{

show : function(p){
if(p.floating)p.setPosition(p.x||10,p.y||10);
}
,chartload : function(p,obj){
p.setTitle(p.title.split(":")[0]+': Loaded.');
}
,chartrender : function(p,obj){
p.setTitle(p.title.split(":")[0]+': Rendered.');
}
};//eo listeners


tools : [
{
id:'gear',
handler:function(e,t,p){ p.refreshMedia();},
qtip: {text:'Refresh the Chart'}
},{
id:'print',
handler:function(e,t,p){
p.print();
},
qtip: {text:'Print the Chart'}
}
]//eo tools

};//eo fusionCfg




Note: I have comment all the config option to test if the handlers or second elementes were making the trouble.

Please i need that print btn, i also would like to see an example of a similar working layout.

Many thanks in advance.

Andres.

hendricd
26 Sep 2008, 8:22 AM
@aserron -- I've constructed a basic Viewport layout example here (http://freeport.theactivegroup.com/ext/ext-2.2/examples/charts/fusion2.html). It does not use a card layout, and has no trouble with the print interface.

It looks like you need a little more work on that type of layout.

Google-forum search 'card layout' and review some of the examples.

Joyfulbob
26 Sep 2008, 8:50 AM
Yes; it is in a layout. My HTML has the layout, and includes a .js which defines the chart in a window (from the zip file) which does a barWindow.show(); to render it to a <div>.

However, since it's a window I don't think the layout is affecting it, since the window is independent and is displayed above and outside the layout??

aserron
26 Sep 2008, 12:01 PM
@aserron -- I've constructed a basic Viewport layout example here (http://freeport.theactivegroup.com/ext/ext-2.2/examples/charts/fusion2.html). It does not use a card layout, and has no trouble with the print interface.

It looks like you need a little more work on that type of layout.

Google-forum search 'card layout' and review some of the examples.


Thanks a lot for the sample. As you said works perfectly.

I added a watch fusionpanel.getInterface.

And compared the passed result (object) with the working one.

They are as expected almost identical.

So could be the dom position, because it uses the javascript print function must be linked with the dom element.

Could be an issue of the extension?

aserron
26 Sep 2008, 2:04 PM
Thanks a lot for the sample. As you said works perfectly.

I added a watch fusionpanel.getInterface.

And compared the passed result (object) with the working one.

They are as expected almost identical.

So could be the dom position, because it uses the javascript print function must be linked with the dom element.

Could be an issue of the extension?


I made some test based on the supposed layout problem.

I simplified the border layout first turning it like the demo with dropping the chart inside on of the regions of the layout, the button still doesn

hendricd
26 Sep 2008, 6:41 PM
@aserron -- the demo presented uses the latest (Sept 08) release of FusionCharts.

It sounds like your version of FusionCharts may not expose an (ExternalInterface) print method. What version(s) are you using?

aserron
29 Sep 2008, 12:51 PM
Thanks you, im upgrading to .06 wich has JS print support.

Saeven
30 Sep 2008, 10:15 PM
First, thanks for introducing me to Open Flash Chart, it's great! We'd subscribed to a number of charting solutions in the past (commercial) but this one is actually nicer than most!

Continuing, I read that you have selected GPLV3 as license for your UX. Is there any reason you have chosen a license model that is incompatible with the Ext (commercial) license?

hendricd
6 Oct 2008, 3:29 PM
.... Continuing, I read that you have selected GPLV3 as license for your UX. Is there any reason you have chosen a license model that is incompatible with the Ext (commercial) license?

@Saeven -- The ux.Media component is dual-licensed for those who solicit the "essence" of the GPL and/or the commercial entity who might need to entertain the (often ambiguous) concept of licensing extensions that compliment their current commercial Ext License.

John Milton
11 Oct 2008, 1:32 PM
Firstly, thanks for this great extension.

I'm having an issue with a Fusion chart panel failing to re-render when the browser window is resized on Mac Safari.

The demo (http://freeport.theactivegroup.com/ext/ext-2.2/examples/charts/fusion2.html) you posted above works absolutely fine, so I thought I'd use this to track down my problem...

However, copying your demo to my own server and changing only the links to the ext library etc results in the same rendering glitch that I was previously experiencing?

My version of the demo is here (http://abcselfstoreonline.co.uk/ext-test/charts/fusion2.html).

Once the demo loads, if the browser window is resized the chart (panel) fails to re-render. The FusionWindow works just fine and the panel works OK if the viewport regions are resized - just not if the window is resized. All works fine in FF, however.

I've also noticed that doing something to cause a screen redraw *will* trigger the reloading of the data and render of the chart, eg close the FusionWindow or just hover over one of the tools in the panel title to display the quick tip - then the reload is triggered???

I'm stumped... any ideas?

Cheers

John

Safari 3.1.2 Mac

ZooKeeper
12 Oct 2008, 11:13 PM
The OFC2 demo doesn't seam to be working with FF3. Works just fine in IE

ZooKeeper
13 Oct 2008, 4:09 AM
I must be doing something wrong here.



this.chart = new Ext.ux.OFCPanel({
height: '100%',
width: '70%',
region: 'center',
chartURL : 'open-flash-chart.swf',
//dataURL : '/services/get_log_chart_data/',
ofcCfg :{
id : 'chart_new',
autoSize : true
//listeners: chartEvents
}
,mediaMask : {msg:'Loading Chart Object'}
,loadMask : {msg:'Gathering Chart Data'}
});


var tab = new Ext.Panel({
id: id,
cls:'preview single-preview',
title: service.service_name,
tabTip: service.service_name,
height:500,
closable:true,
layout: 'border',
border:true,
//defaults: {hideMode : !Ext.isIE?'nosize':'display', animCollapse: false },
items:[this.chart,{
region: 'east',
width: '30%',
border:false,
autoScroll:true,
tpl: tplServiceStatistic,
itemSelector: 'div.right_column',
xtype:'dataview',
emptyText: '<div class="item_service_statistic"><div class="title"><h2>'+ service.service_name +'</h2><span class="tatiff_title">'+service.service_tariff + '</span></div></div>',
store:this.store,
singleSelect:true
}

var data = {
"title":{
"text":"Banner Advertisement",
"style":"{font-size: 20px;}"
},

"elements":[
{
"type": "line_hollow",
"colour": "#80a033",
"width": 2,
"text": "Money",
"font-size": 10,
"dot-size": 6,
"values" : [5,7,9,7,4,6,1,2,5]
}
],

"x_axis":{
"labels": {
"labels":
["January","February","March","April","May","June","July"]
}
}
}

this.chart.loadData(data);


Throws
Error calling method on NPObject!
[Break on this error] o.load(typeof json == 'object'? Ext.encode(json) : json);

The same json loads just fine through open_flash_chart_data

hendricd
13 Oct 2008, 5:04 AM
@Zookeeper -- A couple of issues I notice here.

#1: Percentage heights/widths are not supported on Ext.Components. Define initial integer height/widths for one region of your border layout and let the layout figure out the rest.

#2: There appears to something in your data object structure that either Ext.encode (OFC requires a JSON string for its load method), or the OFC load method doesn't like.

ZooKeeper
13 Oct 2008, 5:28 AM
Thanks for the advice:

The thing though is that if I plug the very same data into
function open_flash_chart_data() {
return Ext.encode(data)
}
it works like a charm. Double checked it.
The data is taken from data-3.txt of examples

If you ask me, I blame load method of ux. Can the component be loaded after creation?
On the compont it reads
Open Flash Chart
IO ERROR
Loading test data
Error #2032

hendricd
13 Oct 2008, 6:42 AM
@Zookeeper -- OFC2 is designed such that if there are no data sources available when the SWF object is created:

- either function open_flash_chart_data()
- data-file=someurl flashVar
...you get that:

Open Flash Chart
IO ERROR
Loading test data
Error #2032

because it thinks there is nothing to render (or other screw-up).


To demonstrate, consider this example. It loads nothing at render time, then the ux's loadData method loads the JSON afterwards.


data = { "title":{ "text":"Many data lines", "style":"{font-size: 30px;}" }, "elements":[ { "type": "line", "colour": "#9933CC", "text": "Page views", "width": 2, "font-size": 10, "dot-size": 6, "values" : [15,18,19,14,17,18,15,18,17] }, { "type": "line_dot", "colour": "#CC3399", "width": 2, "text": "Downloads", "font-size": 10, "dot-size": 5, "values" : [10,12,14,9,12,13,10,13,12] }, { "type": "line_hollow", "colour": "#80a033", "width": 8, "text": "Bounces", "font-size": 10, "dot-size": 8, "values" : [5,7,9,7,4,6,1,2,5] } ], "y_axis":{ "max": 20 }, "x_axis":{ "steps": 2, "labels": ["January","February","March","April","May","June","July","August","September"] } };

view = new Ext.ux.OFCWindow({
x : 100,
y : 100,
autoHeight : true,
autoWidth : true,
title : 'Open Flash Chart Window',
collapsible : true,
tools : getTools(),
ofcCfg :{ id : 'chart2',
height : 300,
width : 350
}
,mediaMask : {msg:'Loading Chart Object'}
,loadMask : {msg:'Gathering Chart Data'}
,autoMask : true
,listeners :{
chartload: function(comp, obj){
comp.loadData(data); //load data after the SWF is loaded

}

}
,id :'demoOFC'
,chartURL : 'open-flash-chart.swf'

//,dataURL : 'data-files/data-3.txt' // a JSON formatted response
// ,autoLoad :'data-files/data-3.txt' //or, let Ext autoLoad do the same.
});

view.show();

..would yield the thumb attached below. Pretty ugly, huh?

OFC2 (not the ux), is designed with the concept of embedding something with some data for initial rendering.

I have yet to find anything in its docs about rendering nothing initially.

ZooKeeper
14 Oct 2008, 1:43 AM
Even if I specify
chartData: {data},
It still renders with this nag thumbnail

So it appears that it's supposed to have a dataurl and get data out of it anyway.

ZooKeeper
14 Oct 2008, 1:50 AM
I'm not sure what you're doing to load the data, but the example states that you can specify the function that will get the data for the chart.
"get-data"

Also please note that you're not specifying labels correctly in your examples.
It's a nested object.
labels: {
labels : ['', '']
}

hendricd
14 Oct 2008, 2:57 AM
Even if I specify
chartData: {data},
It still renders with this nag thumbnail

So it appears that it's supposed to have a dataurl and get data out of it anyway.


I'm not sure what you're doing to load the data, but the example states that you can specify the function that will get the data for the chart.
"get-data"

To use OFC's get-data callbacks, you would modify your ofcCfg flashVars to accomodate that "feature".



ofcCfg :{ id : 'chart2',
height : 300,
width : 350,
params: {
flashVars : {
'get-data' : 'yourDataFunc',
id : '@id'

}
}
}

Loading this way, you would not use the ux's autoLoad/chartData/dataURL config options at all.



Also please note that you're not specifying labels correctly in your examples.
It's a nested object.
labels: {
labels : ['', '']
}

:) I just copy/pasted that object (at his time of publication) from his sample data.

ZooKeeper
14 Oct 2008, 4:59 AM
As for the labels I was just pointing it out so you'll fix it and none will be confused as i was.

Can you please take a look at this code. It's driving me absolutely nuts.


MyProfile.Expenses = function(){
this.services_descr = new Ext.Panel({
id: 'services-preview',
height: 200,
border:true,
region:'south',
split: true,
frame:true,
collapsedTitle: this.strDetailedPanel,
title: this.strDetailedPanel,
collapsible: true,
collapsed: false
});

this.grid = new ServicesGrid({
url:'/services/get_user_tariffs/',
columnsCfg: ['service_name', 'service_tariff', 'expire_date', 'gridActions'],
contextMenuCfg: ['new_service'],
tBarCfg: ['new_service']
});


MyProfile.Expenses.superclass.constructor.call(this);

this.gsm = this.grid.getSelectionModel();

this.gsm.on('rowselect', function(sm, index, record){
this.getServiceDescription().overwrite(this.services_descr.body, record.data);
}, this, {buffer:250});

//this.grid.store.on('beforeload', this.services_descr.clear, this.services_descr);
this.grid.store.on('load', this.gsm.selectFirstRow, this.gsm);

this.grid.on('rowdblclick', function(grid, rowIndex, e){
this.openTab(grid.getStore().getAt(rowIndex).data);
}, this);
};


Ext.extend(MyProfile.Expenses, Ext.TabPanel, {
strExpensesList : 'Expenses list',
strDetailedPanel : 'Detailed panel',
strOperationLog : 'Operation log',

strCurrentYear : 'Current year',
strCurrentMonth : 'Current month',
strCurrentDay : 'Current day',
strAfterCreateDate : 'Full history',
strSetInterval : 'Set date interval',
strDateIntervalError : 'Please set the correct date interval',

getServiceDescription : function(){
var tpl = new Ext.Template(
'<div class="service_descr"><p>{service_descr}</p> <p>{service_tariff_descr}</p></div>');
tpl.compile();

tpl.getBody = function(v, all){
return Ext.util.Format.stripScripts(v || all.description);
}
return tpl;
},

openTab : function(service){

var tplServiceStatistic = new Ext.XTemplate(
'<div class="item_service_statistic">',
'<div class="right_column">',
'<h3>{this.scope.strOperationLog}</h3>',
'<ul>',
'<tpl for=".">',
'<li><span class="date">{create_date:TimestampToStr(c.Date.patterns.ShortDateTime)}</span> - ${value}</li>',
'</tpl>',
'</ul>',
'</div>',
'</div>', {
scope: this,
service: service,

getMaxValue: function(items) {
var max = -100;
var len = items.length;
for (var i = 1; i < len; i++) if (items[i].value > max) max = items[i].value;
return max;
}
});

this.chart = new Ext.ux.OFCPanel({
region: 'east',
chartURL : 'open-flash-chart.swf',
chartData: {},
height: 300,
width: 400,
ofcCfg :{
autoSize : true
},
listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);},
chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')},
chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
}
,mediaMask : {msg:'Loading Chart Object'}
,loadMask : {msg:'Gathering Chart Data'}
});

this.store = new Ext.data.JsonStore({
autoLoad: {params: { service_tariff_id: service.service_tariff_id }},
url: '/services/get_log_operations/',
id : 'id',
root: 'items',
totalProperty : 'total',
fields :[
'id',
'value',
'create_date'
],
listeners:{
'load': function(store,records,options){
values = []
store.each(
function(rec){
values.push(rec.get('value'))
}
)
data = {
"title":
{
"text":"Many data lines",
"style":"{font-size: 30px;}"
},
"elements":[
{
"type": "line",
"colour": "#9933CC",
"text": "Page views",
"width": 2,
"font-size": 10,
"dot-size": 6,
"values" : values
}
],
"x_axis":{
"steps": 2,
"labels":{
"rotate": "vertical",
"labels":
["January","February","March","April","May","June","July","August","September"]
}
}
}
this.chart.loadData(data);
this.getActiveTab().doLayout();
},
scope: this
}
});

var id = service.service_tariff_id;
if(!(tab = this.getItem(id))){

var tab = new Ext.Panel({
id: id,
cls:'preview single-preview',
title: service.service_name,
tabTip: service.service_name,
height:500,
closable:true,
layout: 'border',
border:true,
items:[{
region: 'center',
layout: 'fit',
height: 400,
width: 300
},{
region: 'east',
width: '30%',
border:false,
autoScroll:true,
tpl: tplServiceStatistic,
itemSelector: 'div.right_column',
xtype:'dataview',
store:this.store,
singleSelect:true
},{
xtype: 'form',
labelWidth: 125,
frame: true,
bodyStyle:'padding:5px 5px 0',
border:false,
width: 350,
height:150,
region: 'south',
items: []
}]
});

tab.on('activate', function(panel){
panel.layout.center.panel.add(this.chart);
panel.layout.center.panel.doLayout();
this.store.load({service_tariff_id: panel.id});
panel.doLayout();
}, this);

this.add(tab);
};

this.setActiveTab(tab);
this.doLayout();
},

initComponent:function(config) {

Ext.apply(this, {
id:'services-main-tabs',
activeTab:0,
region:'center',
margins:'0 5 5 0',
resizeTabs:true,
tabWidth:150,
minTabWidth: 120,
enableTabScroll: true,
items: {
id:'services-main-view',
layout:'border',
title: this.strExpensesList,
hideMode:'offsets',
items:[
this.grid,
this.services_descr
]
}
});

MyProfile.Expenses.superclass.initComponent.apply(this, arguments);
}
});

The deal here is that I'm trying to use just one OFC in multiple tabs to avoid rendering another one over and over. And use the data from the store for this matter.

The problem is the rendering. When I first open the tab the OFC blinks for a sec and then it's just white panel. After opening another one, switching between them it starts to work and display data on one of them.

hendricd
14 Oct 2008, 6:15 AM
Lofty goal, but every call to openTab creates a new store and chart anyhow (whether the tab already exists or not).

You cannot share Ext.Components across other Containers (tabs in your case).

You should really consider driving tab creation based upon store.load success first. What if it fails?

There is no reason why you can't use one store for gathering the series for each chart as needed.
psuedo-coded:


this.SM.on.doubleclick / this.on.beforetabchange (

this.store.load ( params:{service_tariff_id:id} , callback:function(r,o,success){
if (success){
data = parseTheStore() || complain();

if(data && !tabExists(id)) {
addTab with items [chart = new chart({chartData:null, region:'center' }) , form, ...] ,
}
if(data)chart.loadData(data);
} else { complain() }

);

ZooKeeper
14 Oct 2008, 11:37 AM
Thanks a lot for the tip!

It's so not-Ext-like to not be able to create a chart without any data and populate it later on.. Are you by any chance aware of any movement toward this behavior by the OFC creator?

So your advice will be to use one store, but create the tab with all new items including new chart?

I'm just thinking if like five of this charts will be present in the dom, how will it impact the performance :-?

ZooKeeper
14 Oct 2008, 11:27 PM
Ok, I've changed the code like you said it still renderes the chart properly only after few clicks back and forth with tabs.
For some reason it's not rendered or not shown right away and the loading mask is gone as well.

Can you please take a look at it. I think I'm not the only one having this issue.

John Milton
15 Oct 2008, 12:08 AM
Well I'm still working on my (lack of) rendering problem too FWIW :-?

I'm also seeing the 'line 137' error in setDataXML that has been referred to previously.

At the moment it's looking like a timing issue - in my case at least - so I'm working on calling setDataXML from a chartLoad handler. Probably exacerbated by using local small test data files...

Not come up with anything yet on the (Mac Safari only) window resize issue though. Movie demonstrating issues (http://abcselfstoreonline.co.uk/ext-test/charts/Fusion.mov).

Cheers

John

hendricd
15 Oct 2008, 4:18 AM
I'm having an issue with a Fusion chart panel failing to re-render when the browser window is resized on Mac Safari.

The demo (http://freeport.theactivegroup.com/ext/ext-2.2/examples/charts/fusion2.html) you posted above works absolutely fine, so I thought I'd use this to track down my problem...

However, copying your demo to my own server and changing only the links to the ext library etc results in the same rendering glitch that I was previously experiencing?

My version of the demo is here (http://abcselfstoreonline.co.uk/ext-test/charts/fusion2.html).

Once the demo loads, if the browser window is resized the chart (panel) fails to re-render. The FusionWindow works just fine and the panel works OK if the viewport regions are resized - just not if the window is resized. All works fine in FF, however.

I've also noticed that doing something to cause a screen redraw *will* trigger the reloading of the data and render of the chart, eg close the FusionWindow or just hover over one of the tools in the panel title to display the quick tip - then the reload is triggered???

I'm stumped... any ideas?

Safari 3.1.2 Mac
@John -- My link uses the latest build of the ux.Media*/ChartPack. There are couple of fixes that I'll be releasing shortly (adding some enhancements and height/width macro fixes. Give that a shot when you see it....

hendricd
15 Oct 2008, 4:19 AM
Ok, I've changed the code like you said it still renderes the chart properly only after few clicks back and forth with tabs.
For some reason it's not rendered or not shown right away and the loading mask is gone as well.

Can you please take a look at it. I think I'm not the only one having this issue.

@ZooKeeper -- Take a look at ? Post your latest attempt.

John Milton
15 Oct 2008, 5:44 AM
@John -- My link uses the latest build of the ux.Media*/ChartPack. There are couple of fixes that I'll be releasing shortly (adding some enhancements and height/width macro fixes. Give that a shot when you see it....

Ah OK - that does indeed make my version of the demo work.

My own app is still misbehaving but it's a more complicated layout (border layout with charts in tabpanels and regions)... Anyway I have a working base to start with now.

Many thanks!

John

ZooKeeper
15 Oct 2008, 6:10 AM
Sorry, Doug. my bad.


MyProfile.Expenses = function(){
this.services_descr = new Ext.Panel({
id: 'services-preview',
height: 200,
border:true,
region:'south',
split: true,
frame:true,
collapsedTitle: this.strDetailedPanel,
title: this.strDetailedPanel,
collapsible: true,
collapsed: false
});

this.grid = new ServicesGrid({
url:'/services/get_user_tariffs/',
columnsCfg: ['service_name', 'service_tariff', 'expire_date', 'gridActions'],
contextMenuCfg: ['new_service'],
tBarCfg: ['new_service']
});


this.store = new Ext.data.JsonStore({
//autoLoad: {params: { service_tariff_id: service.service_tariff_id }},
url: '/services/get_log_operations/',
id : 'id',
root: 'items',
totalProperty : 'total',
fields :[
'id',
'value',
'create_date'
],
listeners:{
'load': function(store,records,options){
values = []
store.each(
function(rec){
values.push(rec.get('value'))
}
)
data = {
"title":
{
"text":"Many data lines",
"style":"{font-size: 30px;}"
},
"elements":[
{
"type": "line",
"colour": "#9933CC",
"text": "Page views",
"width": 2,
"font-size": 10,
"dot-size": 6,
"values" : values
}
],
"x_axis":{
"steps": 2,
"labels":{
"rotate": "vertical",
"labels":
["January","February","March","April","May","June","July","August","September"]
}
}
}
//panel.layout.center.panel.doLayout();
this.getActiveTab().layout.center.panel.loadData(data);
//this.getActiveTab().doLayout();
},
scope: this
}
});

this.tplServiceStatistic = new Ext.XTemplate(
'<div class="item_service_statistic">',
'<div class="right_column">',
'<h3>{this.scope.strOperationLog}</h3>',
'<ul>',
'<tpl for=".">',
'<li><span class="date">{create_date:TimestampToStr(c.Date.patterns.ShortDateTime)}</span> - ${value}</li>',
'</tpl>',
'</ul>',
'</div>',
'</div>', {
scope: this,

getMaxValue: function(items) {
var max = -100;
var len = items.length;
for (var i = 1; i < len; i++) if (items[i].value > max) max = items[i].value;
return max;
}
});
this.tplServiceStatistic.compile();

MyProfile.Expenses.superclass.constructor.call(this);

this.gsm = this.grid.getSelectionModel();

this.getServiceDescription = new Ext.Template(
'<div class="service_descr">',
'<p>{service_descr}</p>',
'<p>{service_tariff_descr}</p>',
'</div>'
);
this.getServiceDescription.compile();

this.gsm.on('rowselect', function(sm, index, record){
this.getServiceDescription().overwrite(this.services_descr.body, record.data);
}, this, {buffer:250});

//this.grid.store.on('beforeload', this.services_descr.clear, this.services_descr);
this.grid.store.on('load', this.gsm.selectFirstRow, this.gsm);

this.grid.on('rowdblclick', function(grid, rowIndex, e){
this.openTab(grid.getStore().getAt(rowIndex).data);
}, this);
};


Ext.extend(MyProfile.Expenses, Ext.TabPanel, {

openTab : function(service){
var id = service.service_tariff_id;
if(!(tab = this.getItem(id))){


var tab = new Ext.Panel({
id: id,
cls:'preview single-preview',
title: service.service_name,
tabTip: service.service_name,
height:500,
closable:true,
layout: 'border',
border:true,
items:[{
region: 'center',
xtype: 'openchartpanel',
layout: 'fit',
chartURL : 'open-flash-chart.swf',
chartData: {},
height: 300,
width: 400,
ofcCfg :{
autoSize : true
},
listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);},
chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')},
chartrender : function(p,obj){

console.log('chart '+obj.id+' rendered.')
}
}
,mediaMask : {msg:'Loading Chart Object'}
,loadMask : {msg:'Gathering Chart Data'}
},{
region: 'east',
width: '30%',
border:false,
autoScroll:true,
tpl: this.tplServiceStatistic,
itemSelector: 'div.right_column',
xtype:'dataview',
store:this.store,
singleSelect:true
},{
xtype: 'form',
labelWidth: 125,
frame: true,
bodyStyle:'padding:5px 5px 0',
border:false,
width: 350,
height:150,
region: 'south',
items: []
}]
});

tab.on('show', function(panel){
this.store.load({service_tariff_id: panel.id});
}, this);

this.add(tab);
};

this.setActiveTab(tab);
this.doLayout();
},

initComponent:function(config) {

Ext.apply(this, {
id:'services-main-tabs',
activeTab:0,
region:'center',
margins:'0 5 5 0',
resizeTabs:true,
tabWidth:150,
minTabWidth: 120,
enableTabScroll: true,
items: {
id:'services-main-view',
layout:'border',
title: this.strExpensesList,
hideMode:'offsets',
items:[
this.grid,
this.services_descr
]
}
});

MyProfile.Expenses.superclass.initComponent.apply(this, arguments);
}
});

There doesn't appear to be a ux.Chart repo :-?

hendricd
15 Oct 2008, 7:14 AM
There doesn't appear to be a ux.Chart repo :-?

@Zookeeper -- Try it this way, worry about the repo (http://code.google.com/p/uxmedia/source/browse/#svn/trunk/source)later:



MyProfile.Expenses = function(){
this.services_descr = new Ext.Panel({
id: 'services-preview',
height: 200,
border:true,
region:'south',
split: true,
frame:true,
collapsedTitle: this.strDetailedPanel,
title: this.strDetailedPanel,
collapsible: true,
collapsed: false
});

this.grid = new ServicesGrid({
url:'/services/get_user_tariffs/',
columnsCfg: ['service_name', 'service_tariff', 'expire_date', 'gridActions'],
contextMenuCfg: ['new_service'],
tBarCfg: ['new_service']
});


this.chartStore = new Ext.data.JsonStore({

url: '/services/get_log_operations/',
id : 'id',
root: 'items',
totalProperty : 'total',
fields :[
'id',
'value',
'create_date'
],
listeners:{
'load': function(store,records,options){
var values = []
store.each(
function(rec){
values.push(rec.get('value'))
}
)
var data = {
"title":
{
"text":"Many data lines",
"style":"{font-size: 30px;}"
},
"elements":[
{
"type": "line",
"colour": "#9933CC",
"text": "Page views",
"width": 2,
"font-size": 10,
"dot-size": 6,
"values" : values
}
],
"x_axis":{
"steps": 2,
"labels":{
"rotate": "vertical",
"labels":
["January","February","March","April","May","June","July","August","September"]
}
}
};

var chart, id = options.service.service_tariff_id ;

//Pass the service object used in the store.load call
this.selectTab(options.service);

if(chart = Ext.getCmp(id + '_chart')){ //be specific !
chart.loadData(data);
}

},
loadexception : function() { complain() },
scope: this
}
});

this.tplServiceStatistic = new Ext.XTemplate(
'<div class="item_service_statistic">',
'<div class="right_column">',
'<h3>{this.scope.strOperationLog}</h3>',
'<ul>',
'<tpl for=".">',
'<li><span class="date">{create_date:TimestampToStr(c.Date.patterns.ShortDateTime)}</span> - ${value}</li>',
'</tpl>',
'</ul>',
'</div>',
'</div>', {
scope: this,

getMaxValue: function(items) {
var max = -100;
var len = items.length;
for (var i = 1; i < len; i++) if (items[i].value > max) max = items[i].value;
return max;
}
});
this.tplServiceStatistic.compile();

MyProfile.Expenses.superclass.constructor.call(this);

this.gsm = this.grid.getSelectionModel();

this.getServiceDescription = new Ext.Template(
'<div class="service_descr">',
'<p>{service_descr}</p>',
'<p>{service_tariff_descr}</p>',
'</div>'
);
this.getServiceDescription.compile();

this.gsm.on('rowselect', function(sm, index, record){
this.getServiceDescription().overwrite(this.services_descr.body, record.data);
}, this, {buffer:250});

//this.grid.store.on('beforeload', this.services_descr.clear, this.services_descr);
this.grid.store.on('load', this.gsm.selectFirstRow, this.gsm);

this.grid.on('rowdblclick', function(grid, rowIndex, e){
var service = grid.getStore().getAt(rowIndex).data;
this.chartStore.load({service: service, params:{'service_tariff_id': service.service_tariff_id}});

}, this);
};


Ext.extend(MyProfile.Expenses, Ext.TabPanel, {

selectTab : function(service){
var tab, id = service.service_tariff_id;
if(!(tab = this.getItem(id))){

tab = new Ext.Panel({
id: id,
cls:'preview single-preview',
title: service.service_name,
tabTip: service.service_name,
height:500,
closable:true,
layout: 'border',
border:true,
items:[{
region: 'center',
xtype: 'openchartpanel',
layout: 'fit',
id : id + '_chart',
chartURL : 'open-flash-chart.swf',
chartData: null, //always render empty
height: 300,
width: 400, //this is a border layout, no good here in center
ofcCfg :{
autoSize : true
},
listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);},
chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')},
chartrender : function(p,obj){

console.log('chart '+obj.id+' rendered.')
}
}
,mediaMask : {msg:'Loading Chart Object'}
,loadMask : {msg:'Gathering Chart Data'}
},{
region: 'east',
width: 200, '30%', //Components do not support %
border:false,
id : id + '_dv',
autoScroll:true,
tpl: this.tplServiceStatistic,
itemSelector: 'div.right_column',
xtype:'dataview',
store:this.store,
singleSelect:true
},{
xtype: 'form',
labelWidth: 125,
frame: true,
id : id + '_form',
bodyStyle:'padding:5px 5px 0',
border:false,
width: 350,
height:150,
region: 'south',
items: []
}]
});

this.add(tab);
this.doLayout(); //only after adds !
};

this.setActiveTab(tab);

return tab;
},

initComponent:function(config) {

Ext.apply(this, {
id:'services-main-tabs',
activeTab:0,
region:'center',
margins:'0 5 5 0',
resizeTabs:true,
tabWidth:150,
minTabWidth: 120,
enableTabScroll: true,
items: {
id:'services-main-view',
layout:'border',
title: this.strExpensesList,
hideMode:'offsets',
items:[
this.grid,
this.services_descr
]
}
});

MyProfile.Expenses.superclass.initComponent.apply(this, arguments);
}
});

ZooKeeper
15 Oct 2008, 11:56 PM
Thanks, Doug. That sure made my code more crisp. But the issue is still there. Only after clicking around the tabs and reloading the chart all of them finally render something after a while.
It's some sort of timing issue here.

I think I can provide a short movie demonstrating the issue or even remote debug it.
In IE after opening the second tab. Everything but chart disappears from the fist tab o__O

ZooKeeper
16 Oct 2008, 12:08 AM
Ok, so specifying open_flash_chart_data() solves it all. It sure is not the native Ext way, but at least it works like a charm.

Doug, with all due respect, it's pretty obvious at least to me that the loadData mechanism causes the problem.

hendricd
16 Oct 2008, 5:57 AM
Ok, so specifying open_flash_chart_data() solves it all. It sure is not the native Ext way, but at least it works like a charm.

Doug, with all due respect, it's pretty obvious at least to me that the loadData mechanism causes the problem.

@Zookeeper -- Your layout is indeed a challenge because you have no idea exactly when the right time is "to ask the chart object to load something". By making your data results available to the open_flash_chart_data callback, you ultimately let the chart object decide when its ready to do so, but loose ability to handle refreshes on existing tab activation.

In hindsight, I'm thinking using a single store for all charts is not going to work with your busy tab changes. Each tab should have its own store because you'll need to manage two async events: chart object loading and store.loading!

Tab changes (grid.dblclicks) are going to wreak havoc on a single-chart-store design.

Consider this approach instead:



MyProfile.Expenses = function(){
this.services_descr = new Ext.Panel({
id: 'services-preview',
height: 200,
border:true,
region:'south',
split: true,
frame:true,
collapsedTitle: this.strDetailedPanel,
title: this.strDetailedPanel,
collapsible: true,
collapsed: false
});

this.grid = new ServicesGrid({
url:'/services/get_user_tariffs/',
columnsCfg: ['service_name', 'service_tariff', 'expire_date', 'gridActions'],
contextMenuCfg: ['new_service'],
tBarCfg: ['new_service']
});


this.tplServiceStatistic = new Ext.XTemplate(
'<div class="item_service_statistic">',
'<div class="right_column">',
'<h3>{this.scope.strOperationLog}</h3>',
'<ul>',
'<tpl for=".">',
'<li><span class="date">{create_date:TimestampToStr(c.Date.patterns.ShortDateTime)}</span> - ${value}</li>',
'</tpl>',
'</ul>',
'</div>',
'</div>', {
scope: this,

getMaxValue: function(items) {
var max = -100;
var len = items.length;
for (var i = 1; i < len; i++) if (items[i].value > max) max = items[i].value;
return max;
}
});
this.tplServiceStatistic.compile();

MyProfile.Expenses.superclass.constructor.call(this);

this.gsm = this.grid.getSelectionModel();

this.getServiceDescription = new Ext.Template(
'<div class="service_descr">',
'<p>{service_descr}</p>',
'<p>{service_tariff_descr}</p>',
'</div>'
);
this.getServiceDescription.compile();

this.gsm.on('rowselect', function(sm, index, record){
this.getServiceDescription().overwrite(this.services_descr.body, record.data);
}, this, {buffer:250});

//this.grid.store.on('beforeload', this.services_descr.clear, this.services_descr);
this.grid.store.on('load', this.gsm.selectFirstRow, this.gsm);

this.grid.on('rowdblclick', function(grid, rowIndex, e){
var service = grid.getStore().getAt(rowIndex).data;
this.selectTab( service );

}, this);
};


Ext.extend(MyProfile.Expenses, Ext.TabPanel, {

newChart : function(id){
var svcChartId = id + "_chart';

var chart = new Ext.ux.Chart.OFC.Panel(
{
region: 'center',
id : svcChartId,
chartURL : 'open-flash-chart.swf',
chartData: null, //always render empty
ofcCfg :{
autoSize : true
},
isLoaded : false,
listeners :{
//SWFchart is now ready for action
chartload : function(p,obj){
this.isLoaded = true;
this.loadChartStore();
}

}
,mediaMask : {msg:'Loading Chart Object'}
,loadMask : {msg:'Gathering Chart Data'}
,autoMask : true

,service_tariff_id : id

,loadChartStore : function(){
this.loadMask.show();
this.chartStore.load({params:{'service_tariff_id': this.service_tariff_id}});

}
,chartStore : new Ext.data.JsonStore({

url: '/services/get_log_operations/',
id : 'id',
root: 'items',
totalProperty : 'total',
fields :[
'id',
'value',
'create_date'
],
listeners:{
'load': function(store,records,options){
var values = [];
store.each(
function(rec){
values.push(rec.get('value'))
}
);

Ext.getCmp(svcChartId).loadData( {
"title":
{
"text":"Many data lines",
"style":"{font-size: 30px;}"
},
"elements":[
{
"type": "line",
"colour": "#9933CC",
"text": "Page views",
"width": 2,
"font-size": 10,
"dot-size": 6,
"values" : values
}
],
"x_axis":{
"steps": 2,
"labels":{
"rotate": "vertical",
"labels":
["January","February","March","April","May","June","July","August","September"]
}
}
});

},
loadexception : function() { complain() },
scope: this
}
});
});
return chart;

},

selectTab : function(service){
var tab, id = service.service_tariff_id;
if(!(tab = this.getItem(id))){

tab = new Ext.Panel({
id: id,
cls:'preview single-preview',
title: service.service_name,
tabTip: service.service_name,
height:500,
closable:true,
layout: 'border',
border:true,
items:[
this.newChart(id)
,{
region: 'east',
width: 200,
border:false,
id : id + '_dv',
autoScroll:true,
tpl: this.tplServiceStatistic,
itemSelector: 'div.right_column',
xtype:'dataview',
store:this.store,
singleSelect:true
},{
xtype: 'form',
labelWidth: 125,
frame: true,
id : id + '_form',
bodyStyle:'padding:5px 5px 0',
border:false,
width: 350,
height:150,
region: 'south',
items: []
}],
listeners: {
activate : function(serviceTab){

var chart = serviceTab.getComponent(id + '_chart');

if(chart && chart.isLoaded){
chart.loadChartStore();
}

//update your form, statistics, etc.....

}
});

this.add(tab);
this.doLayout(); //only after adds !
};

this.setActiveTab(tab);

return tab;
},

initComponent:function(config) {

var VisFix = !Ext.isIE ? new Ext.ux.Media.VisibilityFix({mode:'x-hide-nosize', hideMode:'nosize'}) : null;

Ext.apply(this, {
id:'services-main-tabs',

//Your charts WILL re-paint on tabChange without this!
// give all tabs and the tabPanel the same Flash visibility fix
plugins: VisFix ,
defaults: { plugins: VisFix },

activeTab:0,
region:'center',
margins:'0 5 5 0',
resizeTabs:true,
tabWidth:150,
minTabWidth: 120,
enableTabScroll: true,
items: {
id:'services-main-view',
layout:'border',
title: this.strExpensesList,
hideMode:'offsets',
items:[
this.grid,
this.services_descr
]
}
});

MyProfile.Expenses.superclass.initComponent.apply(this, arguments);
}
});

hendricd
16 Oct 2008, 12:48 PM
@Zookeeper -- Try the latest repo (http://code.google.com/p/uxmedia/source/browse/#svn/trunk)version of uxofc.js. I've fully implemented all the callBacks he recently added in the latest beta which might improve your initial load struggle (trunk/demo/openchart.html should show you most everything -- including 'save-as-image' support.)

Now you have too many ways avail to shoot one's self in the foot with it. ;)

ZooKeeper
17 Oct 2008, 3:34 AM
Ok... Here I am again.

hideMode:'offsets' caused a lot of trouble.

The solution you provided doesn't work on the new ux.ofc build at all. All I see is loading mask. chartload event never fires.

With old one I get.
uncaught exception: Error calling method on NPObject! [plugin exception: Error in Actionscript. Use a try/catch block to find error.].
[Break on this error] chart.loadData(this.chartStore.curData);

There's no doubt that my code is far from perfect, but store for each chart haven't changed anything.

hendricd
17 Oct 2008, 11:29 AM
Ok... Here I am again.

hideMode:'offsets' caused a lot of trouble.

The solution you provided doesn't work on the new ux.ofc build at all. All I see is loading mask. chartload event never fires.

With old one I get.
uncaught exception: Error calling method on NPObject! [plugin exception: Error in Actionscript. Use a try/catch block to find error.].
[Break on this error] chart.loadData(this.chartStore.curData);

There's no doubt that my code is far from perfect, but store for each chart haven't changed anything.

@Zookeeper -- Zip up the relevant source files for your project and send them my way for review. I'll see if I can't find anything obvious.

ZooKeeper
28 Oct 2008, 12:14 AM
Have you got the email?

Richie1985
29 Oct 2008, 8:28 AM
hi,

i want to display some ofc charts in on a portal, but how can i do this? there are only windows and panels available, no Portlets :(

ca you help me?

hendricd
29 Oct 2008, 9:32 AM
hi,

i want to display some ofc charts in on a portal, but how can i do this? there are only windows and panels available, no Portlets :(

ca you help me?

Make one!




Ext.ux.Chart.OFC.Portlet = Ext.extend(Ext.ux.Chart.OFC.Panel, {
anchor : '100%',
frame : true,
collapseEl : 'bwrap',
collapsible : true,
draggable : true,
cls : 'x-portlet'
});

Ext.reg('ofcportlet', Ext.ux.Chart.OFC.Portlet);

Richie1985
30 Oct 2008, 12:09 AM
ahhh thats cool and easy, thank you very much.

but now the loadmask would not be hide, only the last chart.

look here:

http://img401.imageshack.us/img401/1598/unbenanntlc3.jpg

have you a idea?

Richie1985
30 Oct 2008, 6:35 AM
no idea?

hendricd
30 Oct 2008, 9:36 AM
no idea?

Not without seeing some of your layout.

nicholasnet
3 Nov 2008, 7:49 AM
I ma having one weird problem. When I use dataURL it tries to fetch data.xml which does not exist. When I use autoLoad it works but it tacks this ?_dc=1225727072681 behind the URL which is causing 404 Error. I know URL is perfect is there any way to get rid of this problem. I even tried to fix code in uxfusion.js by doing this


if(method === "GET"){
if(disableCaching){
var append = "/" + (new Date().getTime());
url += append;

}
}
But this didn't worked my code goes like this



items: new Ext.ux.FusionPanel
({
height: 250,
width: '100%',
fusionCfg:
{
id: 'IlumaSales',
params:
{
wmode:'transparent'
}
},
mediaMask :
{
msg:'Loading Chart Object'
},
loadMask:
{
msg:'Gathering Chart Data'
},
autoMask: true,
chartURL: BASEURL+'swf/Area2D.swf',
autoLoad: BASEURL+'categories/totalByCategories'
})
Please help me out I am using extJs 2.1.

hendricd
3 Nov 2008, 8:13 AM
I ma having one weird problem. When I use dataURL it tries to fetch data.xml which does not exist. When I use autoLoad it works but it tacks this ?_dc=1225727072681 behind the URL which is causing 404 Error. I know URL is perfect is there any way to get rid of this problem. I even tried to fix code in uxfusion.js by doing this


if(method === "GET"){
if(disableCaching){
var append = "/" + (new Date().getTime());
url += append;

}
}
But this didn't worked my code goes like this



items: new Ext.ux.FusionPanel
({
height: 250,
width: '100%',
fusionCfg:
{
id: 'IlumaSales',
params:
{
wmode:'transparent'
}
},
mediaMask :
{
msg:'Loading Chart Object'
},
loadMask:
{
msg:'Gathering Chart Data'
},
autoMask: true,
chartURL: BASEURL+'swf/Area2D.swf',
autoLoad: BASEURL+'categories/totalByCategories'
})
Please help me out I am using extJs 2.1.

Try disabling it on the FusionPanel:


new Ext.ux.FusionPanel
({
height: 250,
width: '100%',
fusionCfg:
{
id: 'IlumaSales',
params:
{
wmode:'transparent'
}
},
mediaMask :
{
msg:'Loading Chart Object'
},
loadMask:
{
msg:'Gathering Chart Data'
},
autoMask: true,
disableCaching : false ,
chartURL: BASEURL+'swf/Area2D.swf',
autoLoad: BASEURL+'categories/totalByCategories'
})

nicholasnet
3 Nov 2008, 9:00 AM
Thanks a lot for your concern however solution did not worked it is still tacking ?_dc=1225731348232 at the end.
Now my code is like this


new Ext.ux.FusionPanel
({
height: 250,
width: '100%',
constrainHeader : true,
fusionCfg:
{
id: 'IlumaSales',
params:
{
wmode:'transparent'
}
},
mediaMask :
{
msg:'Loading Chart Object'
},
loadMask:
{
msg:'Gathering Chart Data'
},
autoMask: true,
disableCaching: false,
chartURL: BASEURL+'swf/Area2D.swf',
autoLoad: BASEURL+'categories/totalByCategories'
})

Please help me out!!!

hendricd
3 Nov 2008, 9:05 AM
Please use the uxfusion.js included in the chartpack2.zip distribution, not from SVN trunk. The SVN version(s) are changing again -- in a big way.

nicholasnet
3 Nov 2008, 9:23 AM
I must say you are very quick. Thanks a lot.
I am using uxfusion.js from chartpack2.zip but it is doing the same thing
Just to make sure I am pasting the whole file here
Thanks a lot for your cooperation.

hendricd
3 Nov 2008, 9:36 AM
For autoLoad, use the standard Ext autoLoad syntax for autoLoad options:


autoLoad : {url :BASEURL+'categories/totalByCategories', disableCaching : false }

EDIT: and, make sure you are using all the media/flash classes from the same build.

nicholasnet
3 Nov 2008, 9:58 AM
Finally something worked. I can't explain in words how thankful I am. I was working in this problem for 2 days. Thanks a lot. But just curious why this didn't solve my problem


if(method === "GET"){
if(disableCaching){
var append = "/" + (new Date().getTime());
url += append;

}
}

Once a thanks a lot.

newbie23
7 Nov 2008, 8:23 AM
I have a panel like this:

panel = new Ext.ux.OFCPanel({
title : 'Statistics',
renderTo :'tabsdiv',
floating:false,
ofcCfg :{ id : 'chart1'
},
autoScroll : true,
id : 'chartpanel',
chartURL : '../chartpack2/open-flash-chart.swf',
dataURL : '../chartpack2/ofc.txt' , //let the chartObj load it
//autoLoad :'../chartpack2/ofc.php' , //let Ext autoLoad do the same.
width : 500,
height : 400,
listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);}
//,chartload : function(p,obj){alert('chart load');},
//,chartrender : function(p,obj){alert('chart render');}
}
});
panel.show();
I also have another panel (gridPanel) and when I select a row in the grid panel, I want to refresh the chart panel with another data (let`s say dataURL :'../chartpack2/ofc.php?id="my_id"'). How can I do this?
Thanks!

hendricd
7 Nov 2008, 12:00 PM
@newbie23 -- The simplest way to load new data into OFC2 from a URL is to use the Components load method:


chartComp.load({
url: '../chartpack2/ofc.php',
params : { id : "my_id" },
method : 'POST'
});
... and the Component will gather the chart series for you and feed your JSON response to OFC upon receipt.

newbie23
8 Nov 2008, 4:06 AM
Thanks, I resolved the issue.

cprompt
13 Nov 2008, 11:44 AM
Hi,

i am using a code like in

http://extjs.com/forum/showthread.php?p=246364#post246364

The difference to my code is, that I do not use autoLoad, because I use a script which needs some parameters:
var data={
'messpunkte': selStr,
'objektname': objektName,
'referenz': referenz
};


var tabPanel=mainWindow.getComponent('tabPanel');
var tab2=tabPanel.getComponent(1);
tabPanel.activate(tab2);

if(!failure){

chartPanel.load('./index/drawgraph',data,function(){});
var theChart=tab2.add(chartPanel);
tab2.doLayout();

}else{ Ext.Msg.alert('Fehler',failure);}
}

When I run the application I get an error in Firebug "this.loadMask.show() is not a function. The same thing for Ext 2.1 and 2.2.

Could anyone help?

Sorry for my bad english...

dolittle
18 Nov 2008, 8:19 AM
Hi,

- Do you have an experience with charts based on javascript instead of FLASH.
I know that canvas is not cross-browser yet and you have to use the IE adapter but is there a fundamental advantage of FLASH over javascript in charting?

- Are there issues with the performance and memory usage of a large number of points (1K points)?

- Is it possible to manipulate charts like on the desktop (zoom, pan...) ? Will there be performance issues with large number of points in this case?

Thanks

cmd.ares
18 Nov 2008, 11:01 PM
need an ux for FusionWidgets panel.

could you show some realtime widgets panel using portal demo

look the demo
http://www.fusioncharts.com/widgets/Demos/RealTimeJS/Index.html


regard

fangzhouxing
20 Nov 2008, 10:37 PM
In order to use the Open Flash Chart 2, I must include files in this order:


uxmedia.js
uxflash.js
uxchart.js
uxofc.js


Am I right?

By the way, what does 'uxmedia\source\media22' dir mean in SVN repo?

mystix
21 Nov 2008, 12:32 AM
found a minor doc bug (uxmedia.js svn version):


this.addEvents(
// ... ... ...

/**
* @event mediarender
* Fires when the mediaObject has reported a loaded state (IE, Opera Only)
* @param {Object} This Media Class object instance.
* @param {Object} mediaObject The {@link Ext.Element} object loaded.
*/
'mediaload'
);



finally got the chance to fiddle with this ux today :)

hendricd
21 Nov 2008, 6:41 AM
SVN and docs were just refreshed moments ago with the (seemingly) final versions for 2.1.

amChart/amStock is included !

BlueCamel
21 Nov 2008, 3:24 PM
So so happy about amChart. I've been busy working on the server side code and dumping the output into a simple HTML doc. I hope to take a shot this weekend at integrating the flash into ExtJS.

BlueCamel
21 Nov 2008, 10:27 PM
I pulled the media22 out of SVN and was able to get an amChart sample rendered painlessly. It seems to work rather well and I wanted to say thank you again for adding amCharts to this package.

FYI, I noticed in the uxmedia docs that the chartData() states that object, json, or function can return the chart series to load. Was this a doc error? As far as I know the amCharts only accepts xml or csv-ish data inputs.

hendricd
22 Nov 2008, 4:56 AM
FYI, I noticed in the uxmedia docs that the chartData() states that object, json, or function can return the chart series to load. Was this a doc error? As far as I know the amCharts only accepts xml or csv-ish data inputs.
@BlueCamel --

The base FlashAdapter class defines methods (supers) common to all underlying chart classes, thus exposing the same interface to all members of the chartPack. amChart, for example, would also share the same config options as a Fusion chart. The base Chart Adapter classes will undoubtedly need (and will get) some more documentation updates as time goes along (especially examples and data-binding alternatives).

In fact, if any of you out there have working example configs of various charts/data-bindings that you care to share for documentation/wiki purposes, I'd be happy to post them as I'm sure many would benefit from such examples.

The docs for the chartData config option should state:
'Chart data series to load when initially rendered. May be an object, string or other format as required by the sub-classed chart component (or Function that returns it).'

mystix
24 Nov 2008, 8:16 AM
hey @hendricd, here's a mind-boggler that sucked away > 4 hours of my life ;)

use the standard includes from the official 2.2 download / 2.2SVN, and either

uxmedia.js from the <SVN>/source/media22 directory, or
uxmedia.js (from <SVN>/source) and the removeNode() override + Ext.Element overrides from <SVN>/demo/mediademo.js

and run the following code:


Ext.onReady(function() {
new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'tabpanel',
layoutOnTabChange: true,
activeTab: 1,
items: [{
xtype: 'panel',
title: 'Tab One',
html: 'Tab One'
}, {
xtype: 'form',
title: 'Tab Two',
closable: true,
items: [{
xtype: 'trigger',
name: 'trigger',
fieldLabel: 'Test TriggerField',
listeners: {
render: function(self) {
// focus the triggerfield when it has been rendered
self.focus(true, true);
}
}
}]
}]
}
});
});




Problem: An error will be thrown only if the triggerfield is focused while attempting to close "Tab Two".

i traced the root cause down to the following two lines in the override for Ext.Element.remove():


remove : function(cleanse, deep){
if(this.dom){
this.removeAllListeners(); //remove any Ext-defined DOM listeners
if(cleanse){ this.cleanse(true, deep); }
Ext.removeNode(this.dom);
this.maskEl = null;
this.dom = null; //clear ANY DOM references
delete this.dom;

}
},


HTH (and that i haven't lost my mind...)

hendricd
24 Nov 2008, 8:32 AM
@mystix -- You can remove those two lines if you like, but without them, you run the risk of the DOM orphanage on IE (especially Flash objects, iframes, and other windowed elements).

I purposefully excluded the Element.remove override from the ux's themselves, because the 'orphanage' issue on IE needs to be looked at system-wide. The other aspects of the Element.remove included in that override solve most, but not all orphanage problems (but only if all the UI classes properly implement
el.remove(true). To be 100% effective the entire ext-core would need to assert el.dom to make sure it's dealing with an 'active' DOM node.

Does that happen on IE only or all browsers ?

mystix
24 Nov 2008, 8:44 AM
@mystix -- You can remove those two lines if you like, but without them, you run the risk of the DOM orphanage on IE (especially Flash objects, iframes, and other windowed elements).

I purposefully excluded the Element.remove override from the ux's themselves, because the 'orphanage' issue on IE needs to be looked at system-wide. The other aspects of the Element.remove included in that override solve most, but not all orphanage problems (but only if all the UI classes properly implement
el.remove(true). To be 100% effective the entire ext-core would need to assert el.dom to make sure it's dealing with an 'active' DOM node.

Does that happen on IE only or all browsers ?
woah... and i remember seeing your status as "offline" :)

yeah i figured they were there to deal with the DOM orphanage issue, but i couldn't figure out a way make it work without choking in the test-case.

that test-case caused errors on FF3.0.4 Win/Mac, and Safari Mac (couldn't see the errors in Safari Win 'cos i couldn't get the stupid error console to appear...)

i've yet to test it on IE6/7 though.

just so we're on the same page, which uxmedia.js file should i be including?
the one in <svn>/source/, or the one in <svn>/source/media22/ (which bundles the removeNode and remove() + cleanse() overrides) ?

hendricd
24 Nov 2008, 9:40 AM
just so we're on the same page, which uxmedia.js file should i be including?
the one in <svn>/source/, or the one in <svn>/source/media22/ (which bundles the removeNode and remove() + cleanse() overrides) ?

You MUST use all the classes from the same build of class heirarchy: <svn>/source/media22/

That build standardizes sub-classed chart methods/props for all charts, so the 2.1 chartPack (errantly labeled media22 in SVN) API is not fully compatible with the 2.0 chartPack.

mystix
24 Nov 2008, 5:39 PM
You MUST use all the classes from the same build of class heirarchy: <svn>/source/media22/

That build standardizes sub-classed chart methods/props for all charts, so the 2.1 chartPack (errantly labeled media22 in SVN) API is not fully compatible with the 2.0 chartPack.
i'm actually only using uxmedia.js as i don't need charts atm, but thanks for the heads up :)

[ update 1 ]
i've run the test-code i posted above in IE6, and it fails with the following error when closing Tab Two while the triggerfield is focused:
http://img372.imageshack.us/img372/3176/200811251039vm2.png
focused textfields don't suffer from the same problem.

i guess a possible workaround for now is to focus a non-Field Component (the tab strip item itself perhaps??) on the TabPanel's remove event?

[ update 2 ]
and i just realised i should've posted in your other thread, "ux.Media[.Flash] Comp,Panel,Win 2.0[new]" to begin with (D'OH)...
that said, both of them use the same uxmedia.js base classes, so they should both be affected by this issue.

mystix
24 Nov 2008, 9:15 PM
// [ ... SNIP ... ]

// private
onFocus : function(){
Ext.form.TriggerField.superclass.onFocus.call(this);
if(!this.mimicing){
this.wrap.addClass('x-trigger-wrap-focus');
this.mimicing = true;
Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {delay: 10});
if(this.monitorTab){
this.el.on("keydown", this.checkTab, this);
}
}
},

But, worse, additional document mousedown and el:keydown listeners are set every time the TriggerField gets focus. /:) This may not be a significant issue, as EventManager does a fair job of making sure duplicate handlers are not set. Not sure coding it this way sets a good example tho. :-?

if i'm reading it correctly, that shouldn't be happening because of the check for this.mimicing? :-?



2) Handle the TriggerField issues for what they are: bugs.

that's definitely the way to go. excellent job on the bugfix! =D>

hendricd
24 Nov 2008, 9:17 PM
if i'm reading it correctly, that shouldn't be happening because of the check for this.mimicing? :-?



Doh! Right you are. (:|

We should all leave the Element override in for a while and see what else it exposes. ;)

mystix
24 Nov 2008, 10:00 PM
one more thing -- i found that the mask / unmask overrides for Ext.Element (in media22/uxmedia.js) caused grid loading masks to appear off-center.

i made the following changes to the overrides for a better (imho) masking effect in uxmedia.js:


Ext.override(Ext.Element, {
mask : function(msg, msgCls) {
if (this._maskMsg) {
this._maskMsg.remove();
}
if (this._mask) {
this._mask.remove();
}

if (this.getStyle("position") == "static") {
// this._preMaskPosition = 'static';
//this.setStyle("position", "relative");
this.addClass("x-masked-relative");
}

this._mask = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask"}, true);
if (!this.select('iframe,frame,object,embed').elements.length) {
this.addClass("x-masked"); //causes element re-init after reflow (overflow:hidden)
}
// this._mask.setDisplayed(true); // redundant -- no effect

if (typeof msg == 'string') {
this._maskMsg = Ext.DomHelper.append(this.dom, {style:"visibility:hidden", cls:"ext-el-mask-msg", cn:{tag:'div'}}, true);
var mm = this._maskMsg;
mm.dom.className = msgCls? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
mm.dom.firstChild.innerHTML = msg;
// mm.setDisplayed(true);
// mm.center(this);
(function() {
mm.center(this).setVisible(true);
}).defer(5, this); // defer things a bit, so the mask sizes over the el properly
}

if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto') { // ie will not expand full height automatically
//this._mask.setSize(this.dom.clientWidth, this.getHeight());
//see: http://www.extjs.com/forum/showthread.php?p=252925#post252925
this._mask.setHeight(this.getHeight());
}

return this._mask;
},

unmask : function() {
//if(this._preMaskPosition) {
// this.setStyle("position", this._preMaskPosition);
//}

if (this._mask) {
if (this._maskMsg) {
this._maskMsg.remove();
delete this._maskMsg;
}

this._mask.remove();
delete this._mask;
}
this.removeClass(["x-masked", "x-masked-relative"]);
}
});

hendricd
25 Nov 2008, 8:42 AM
@mystix -- Smooth !

But, this delay still prevents the gridMask msg from showing up in time for a fast fetch:

//(function() {
mm.center(this).setVisible(true);
//}).defer(5, this); // defer things a bit, so the mask sizes over the el properly

Try it undeferred.
what's in the CSS rulebook for "x-masked-relative" ?

BlueCamel
25 Nov 2008, 2:23 PM
I've been trying to follow the clean up issues (dom orphans?) and am a bit lost. The question boils down to one thing though. Do I need to do anything when changing chart types on a panel?

eg

1) populate new amline chart panel
2) user select different graph
3) populate new amcolumn chart on the same panel as step 1

I'm a bit lost where I might have to do extra work removing the first flash object I created. Or, better yet, how do I tell I'm doing it really wrong? Memory usage?

hendricd
25 Nov 2008, 2:29 PM
I've been trying to follow the clean up issues (dom orphans?) and am a bit lost. The question boils down to one thing though. Do I need to do anything when changing chart types on a panel?

eg

1) populate new amline chart panel
2) user select different graph
3) populate new amcolumn chart on the same panel as step 1

I'm a bit lost where I might have to do extra work removing the first flash object I created. Or, better yet, how do I tell I'm doing it really wrong? Memory usage?

If we're talking about v2.1 classes, just set the chartURL prop (and possibly chartData) of the existing component to the new chart class, and call renderMedia. Cleanup of the previous chart is handled for you.

BlueCamel
25 Nov 2008, 4:59 PM
If we're talking about v2.1 classes, just set the chartURL prop (and possibly chartData) of the existing component to the new chart class, and call renderMedia. Cleanup of the previous chart is handled for you.

Yes, using Ext 2.2 here. Need to play and think more. Initially I was just going to get the chart data from a URL but the more I think about it the more I like the idea of using a store to feed both a grid and chart. Filtering out data on the grid would change the chart.

I'm sure to learn much trying to get this working in a sane way :)

mystix
25 Nov 2008, 6:29 PM
@mystix -- Smooth !

But, this delay still prevents the gridMask msg from showing up in time for a fast fetch:

//(function() {
mm.center(this).setVisible(true);
//}).defer(5, this); // defer things a bit, so the mask sizes over the el properly

Try it undeferred.
what's in the CSS rulebook for "x-masked-relative" ?

i initially had it in undeferred, but that wasn't working for grids in tabs / windows (on both Safari & Fx). :-?
with the defer the load mask shows up correctly for me.

as for the x-masked-relative rule, it's declared in ext-all.css with the following rule:


x-masked-relative{position:relative!important;}

just thought it'd be easier to add / remove css classes than to set / unset styles. :)

hendricd
25 Nov 2008, 8:03 PM
i initially had it in undeferred, but that wasn't working for grids in tabs / windows (on both Safari & Fx). :-?
with the defer the load mask shows up correctly for me.

as for the x-masked-relative rule, it's declared in ext-all.css with the following rule:


x-masked-relative{position:relative!important;}
just thought it'd be easier to add / remove css classes than to set / unset styles. :)

Does that happen only when the gridView is empty the first time (ie. the view has no/bogus height/width yet?). I have had good luck with just calling view.refresh after render, then load the store. Then the mask has something to base geometry on or, defer load until afterlayout, when things settle down a bit. With the defer.delay in there, my mediaMask gets just a flicker and disappears (too late to be effective). (:|


I have never seen 'x-masked-relative' in any ext-all.css file. Is that 3.0, or yours ?

mystix
25 Nov 2008, 8:33 PM
Does that happen only when the gridView is empty the first time (ie. the view has no/bogus height/width yet?). I have had good luck with just calling view.refresh after render, then load the store. Then the mask has something to base geometry on or, defer load until afterlayout, when things settle down a bit. With the defer.delay in there, my mediaMask gets just a flicker and disappears (too late to be effective). (:|

ahhh... ok. that's where the difference lies then.
all of my grids are autogrids -- they're set up using metaData received from the server, so they're initially empty. i guess that's why the load mask was unable to center itself -- the gridview starts off empty initially, so i'm guessing it has zero height then, which is why my grids require a 5ms delay before centering and showing the load mask.



I have never seen 'x-masked-relative' in any ext-all.css file. Is that 3.0, or yours ?
it's not in the 2.2 download, but it's definitely in SVN.

in fact, this portion of the override i suggested


if(this.getStyle("position") == "static"){
this.addClass("x-masked-relative");
}

is the same as that in SVN.

[ update ]
i've managed to reduce the _maskMsg delay to 1ms without any visible side-effects. does a 1ms delay work for your fast-loading grids?

also, i've been wondering why you destroy the _mask and _maskMsg everytime mask() is called.
would this be more efficient?


Ext.override(Ext.Element, {
mask : function(msg, msgCls) {
if (!this._mask) {
if (this.getStyle("position") == "static") {
this.addClass("x-masked-relative"); // custom mod
}

this._mask = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask"}, true);
if (!this.select('iframe,frame,object,embed').elements.length) {
this.addClass("x-masked"); //causes element re-init after reflow (overflow:hidden)
}
// this._mask.setVisible(true); // todo -- marked for deletion (no effect)

if (typeof msg == 'string') {
this._maskMsg = Ext.DomHelper.append(this.dom, {style:"visibility:hidden", cls:"ext-el-mask-msg", cn:{tag:'div'}}, true);
}
}

if (typeof msg == 'string') {
if (!this._maskMsg) {
this._maskMsg = Ext.DomHelper.append(this.dom, {style:"visibility:hidden", cls:"ext-el-mask-msg", cn:{tag:'div'}}, true);
}

var mm = this._maskMsg;
mm.dom.className = msgCls? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
mm.dom.firstChild.innerHTML = msg;
(function() {
mm.center(this).setVisible(true);
}).defer(1, this); // defer things a little so loadmask displays correctly for auto-configured grids
}

if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto') { // ie will not expand full height automatically
//this._mask.setSize(this.dom.clientWidth, this.getHeight());
//see: http://www.extjs.com/forum/showthread.php?p=252925#post252925
this._mask.setHeight(this.getHeight());
}

return this._mask;
}
});

fangzhouxing
27 Nov 2008, 6:50 PM
I am using the lastest SVN version of uxmedia\source\media22\uxofc.js.
In IE 7, the init chart always display:

Open Flash Chart
IO ERROR
Loading test data
Error #2032
This is the URL that I tried to open:../data-files/area-point-objects.txt

My code:



panel.xf.CheckBoardReportTypeChartPanel = Ext.extend(Ext.ux.Chart.OFC.Panel, {
initComponent : function() {
Ext.apply(this, {
chartURL : '/media/flash/open-flash-chart.swf',
chartData : null,
isLoaded : false
})

panel.xf.CheckBoardReportTypeChartPanel.superclass.initComponent.apply(this,arguments)
},
//public
doCustomAction : function(msg) {
if (msg.action=="check-board-query-refresh") {
var dataURL = '/xf/checkboard/query/'+this.getUserId()+'/chart'
this.load({url:dataURL})
}
}

})

Ext.reg('panel.xf.CheckBoardReportTypeChartPanel', panel.xf.CheckBoardReportTypeChartPanel)
// EOP

hendricd
28 Nov 2008, 6:38 AM
@fangzhouxing -- The problem you are encountering is a frustrating one. OFC makes several attempts at rendering something when it is first initialized. (Also: you MUST use all the 2.1 Media classes together to properly support an chart included in the 2.1 ChartPack )

What you are seeing:

Open Flash Chart
IO ERROR
Loading test data
Error #2032 occurs when OFC can't find anything to render.

In your implementation, you are deferring loading a chart series until some time after the chart object is initially rendered.

The 2.1 chart classes have a new cfg option which attempts to solve that, the default value I came up with for OFC is:



/**
* @cfg {Mixed} blankChartData The default data value used to render an empty/blank chart.
* @default null
*/

blankChartData : { "elements": []},You may need to contact OFC and ask if there is a JSON structure that will render a blank chart initially. (I have yet to find a solution that looks acceptable.)

You might try setting your initial chartData property to :


chartData: { "elements": []} //or other.

gondrong
1 Dec 2008, 8:34 AM
What is ux anyway?? I see it in some of the chart codes, any documentation about the ux?? anyway I already try the fusion from ux.Media is there any chance I can make the graphic 2d not 3d?? also can I edit the .swf file??

hendricd
1 Dec 2008, 8:59 AM
@gondrong -- 'ux' is a namespace reserved for community developed 'user extensions'.
(Like: Ext.ux.CustomWidget)

Fusion configuration options are specified in the XML file that represents the layout of the chart. For more on all those options, see http://www.fusioncharts.com/

qvrb
2 Dec 2008, 12:55 PM
Theres a typo in the script at (i'm a newb so big apologies if its me and not thee)

Also anyway to get this going with ext 2.0.2 my chart doesn't render at all, or is it 2.1+ only



listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);}
,chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')},
,chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
},
should it not be




listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);}
,chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')},
chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
},

hendricd
2 Dec 2008, 1:41 PM
Theres a typo in the script at (i'm a newb so big apologies if its me and not thee)

Also anyway to get this going with ext 2.0.2 my chart doesn't render at all, or is it 2.1+ only



listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);}
,chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')},
,chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
},
should it not be




listeners :{
show : function(p){if(p.floating)p.setPosition(p.x||10,p.y||10);}
,chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')},
chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
},


@qvrb -- The GPL license for ux.Media/Flash/ChartPack ver 2.0 is not compatible with that of Ext releases < 2.2, thus is not supported on those releases.

Feel free to remove any extra commas you see in the examples. ;)

BlueCamel
10 Dec 2008, 5:40 PM
Are there examples of loading a chart from a store?

I'm looking at the chart data and thinking that it looks an awful lot like CSV type grid data.

hendricd
10 Dec 2008, 6:32 PM
Are there examples of loading a chart from a store?

I'm looking at the chart data and thinking that it looks an awful lot like CSV type grid data.

@BlueCamel -- It's an interesting dilemma. Flash chart data binding interfaces vary greatly -- XML, CSV, JSON, jsObjects, or worse -- proprietary.

Your approach will vary depending on the chart Vendor. I've started thoughts about a ChartStoreAdapter but the bindings vary greatly and every implementation different:

ux.chartPack 2.1 coverage:
Fusion: I've had good success with the Ext.DataView and Xtemplate, to render raw XML from some (fairly) heavy Ext.data.Stores. That and the Store's ability to manage snapshots generated by the filtering functions, works quite well. (But, your server should generally handle the heavy-XML-data-series-lifting closer to the database.)

OpenChart2gamma+: (was proprietary, now JSON)

amChart/amStock : CSV Data/ XML Chart schema

Ext.Chart (3.0) [YUI-Chart]-- class interface/with Store binding.

Native JSON/objects are much easier to assemble directly from Stores as well.

What chart (and version) are you using?

BlueCamel
10 Dec 2008, 7:09 PM
I'm using the latest amCharts (not stock) for Line, Bar, and XY scatter, XY Bubble. The amCharts docs appear to do CSV and XML only, not JSON?

My thought process is to delivery a JSON object to a custom reader that would be enough for the traditional ExtJS grid to include the column and header defintions. So basically a self configuring grid.

Extra roots in the json object would define the type of chart and chart config. Once known massaging the data from the store into a chart data object shouldn't be to hard? (I say without yet writting a line of code).

My other thought is that amCharts CSV data *is* a grid format. For amLine the first column is the X axis and each additonal column is a series.

It's awful tempting to do stuff like:

* Hide a grid column and that data is removed from the chart (over kill with
amCharts but interesting).

* Filter the grid (and thus the store) and redraw the chart

It's a jumble in my head and I'll likely have to do some playing to see what really works but I think it's the right direction.

hendricd
10 Dec 2008, 7:32 PM
..,The amCharts docs appear to do CSV and XML only, not JSON?

My thought process is to delivery a JSON object to a custom reader that would be enough for the traditional ExtJS grid to include the column and header defintions. So basically a self configuring grid.

Extra roots in the json object would define the type of chart and chart config. Once known massaging the data from the store into a chart data object shouldn't be to hard? (I say without yet writting a line of code).

My other thought is that amCharts CSV data *is* a grid format. For amLine the first column is the X axis and each additonal column is a series.

It's awful tempting to do stuff like:

* Hide a grid column and that data is removed from the chart (over kill with
amCharts but interesting).

* Filter the grid (and thus the store) and redraw the chart

It's a jumble in my head and I'll likely have to do some playing to see what really works but I think it's the right direction.

Sorry, (copy/paste boo-boo) amChart bindings corrected in prev post. :">

It would be equally efficient to apply a simple Xtemplate to the existing Store(w/grid inplace) and generate the CSV that way, avoiding any GridView manipulation. ;)

BlueCamel
10 Dec 2008, 9:32 PM
Sorry, (copy/paste boo-boo) amChart bindings corrected in prev post. :">

It would be equally efficient to apply a simple Xtemplate to the existing Store(w/grid inplace) and generate the CSV that way, avoiding any GridView manipulation. ;)

Okay, time to venture into a new-for-me area of ExtJS and look at Xtemplate and Stores.

BlueCamel
15 Dec 2008, 8:10 PM
Okay, I'm having tons of fun pounding my head on the wall here. I've done several tests with amLine charts and have a good handle on how to directly use them outside of ExtJS to include pulling data from my DB and formating it into something the chart can consume.

I'm lacking a coherent approach to rendering the chart in the center panel of a layout config though. I think part of the problem is I'm trying to handle multipe chart types based on a tree selection from the west panel.

I'm taking a fresh look at this and have a simple question.

What does the formated json look like for the load() method of amChart Panel? Can this single response be used to provide both param.flashVars.chart_settings and chartData()?

mystix
15 Dec 2008, 10:06 PM
// [ ... SNIP ... ]

// private
onFocus : function(){
Ext.form.TriggerField.superclass.onFocus.call(this);
if(!this.mimicing){
this.wrap.addClass('x-trigger-wrap-focus');
this.mimicing = true;
Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {delay: 10});
if(this.monitorTab){
this.el.on("keydown", this.checkTab, this);
}
}
},


following up on this 'cos i just hit another roadblock :s

the fix in SVN (http://extjs.com/forum/showthread.php?p=255983#post255983), together with the tabpanel test case i posted some posts back, throws up a new error: this.dom is undefined

it seems like the Ext.Element.remove() override in ux.Media causes the triggerfield to hold on to its wrap element a little longer than necessary.

here's a complete test case (with the TriggerField fix from SVN included in red) to demonstrate the issue:


Ext.onReady(function() {
new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'tabpanel',
layoutOnTabChange: true,
activeTab: 1,
items: [{
xtype: 'panel',
title: 'Tab One',
html: 'Tab One'
}, {
xtype: 'form',
title: 'Tab Two',
closable: true,
items: [{
xtype: 'trigger',
name: 'trigger',
fieldLabel: 'Test TriggerField',

triggerBlur : function() {
this.mimicing = false;
Ext.get(Ext.isIE? document.body : document).un("mousedown", this.mimicBlur, this);
if (this.monitorTab && this.el) {
this.el.un("keydown", this.checkTab, this);
}
this.beforeBlur();
if (this.wrap) { // current fix in SVN
// log info on this.wrap
console.log('[triggerBlur] Ext.Element.cache[%o] = %o', this.wrap.id, Ext.Element.cache[this.wrap.id]);
this.wrap.removeClass('x-trigger-wrap-focus');
}
Ext.form.TriggerField.superclass.onBlur.call(this);
},

listeners: {
render: function(self) {
// focus the triggerfield when it has been rendered
self.focus(true, true);
}
}
}]
}]
}
});
});


the test case runs fine without the Ext.Element.remove() override from ux.Media.

your suggested fix resolves the issue of course, but it shouldn't be required since a check is already being made for the existence of the triggerfield's wrap element before the triggerfield attempts to remove its x-trigger-wrap-focus class.

thoughts? :-?

BlueCamel
17 Dec 2008, 5:24 AM
Alright :) I have my first amChart (line) embedded in a center region and can change graphs by selecting a different item from a combo menu. Changing graphs involves removing the existing graph and adding a new graph to the panel and then calling doLayout() as normal.

The graph type, settings, and csv data are defined server side based and passed thorugh an Ext.Ajax call. It's the success callback function that handles removing and creating the new graph.

It's not the way I envisioned it would come together. It doesn't render based on a grid or create the CSV on the fly with XTemplate. But it works and it's good enough for first pass in my application and the deadlines I'm working with.

Thanks much for the continued help and the great extension.

hendricd
18 Dec 2008, 5:43 AM
following up on this 'cos i just hit another roadblock :s

the fix in SVN (http://extjs.com/forum/showthread.php?p=255983#post255983), together with the tabpanel test case i posted some posts back, throws up a new error: this.dom is undefined

it seems like the Ext.Element.remove() override in ux.Media causes the triggerfield to hold on to its wrap element a little longer than necessary.
......the test case runs fine without the Ext.Element.remove() override from ux.Media.

your suggested fix resolves the issue of course, but it shouldn't be required since a check is already being made for the existence of the triggerfield's wrap element before the triggerfield attempts to remove its x-trigger-wrap-focus class.

thoughts? :-?

@Mystix -- Now, re-read this (http://extjs.com/forum/showthread.php?p=254852#post254852) again. TriggerField's deferred blur listener is the remaining issue. It is eventually fired after the trigger field/wrap elements are removed. Since Ext currently does not clear the Element.dom property on removal, it works without my cleanup override (even though the DOM elements are supposed to be gone).

mystix
18 Dec 2008, 7:47 AM
@Mystix -- Now, re-read this (http://extjs.com/forum/showthread.php?p=254852#post254852) again. TriggerField's deferred blur listener is the remaining issue. It is eventually fired after the trigger field/wrap elements are removed. Since Ext currently does not clear the Element.dom property on removal, it works without my cleanup override (even though the DOM elements are supposed to be gone).

:"> should've known better than to post a report with barely 3 hours of sleep...
my bad. ~o)

qvrb
22 Dec 2008, 3:38 AM
I have a north, west and center region, north has some drop downs, i can get the north and west grids to update, but how do i update the chart in the centre region which is a tabpanel. I use the reloadsmartcontrolsdata to update the grids - any help appreciated
abridged code below





var grid =new Ext.grid.GridPanel({

ds: ds,

cm: cm,

sm:new Ext.grid.RowSelectionModel({

singleSelect:true

}),

title:'Company Results',

id:'gridpanel',

width:1000,

height:250,

collapsible:true,

stripeRows:true,

viewConfig:{

forceFit:true

},



region:'north',


// inline toolbars

tbar:[{

text:'Period',

menu:[{

text:'1',

checked:false,

group:'period',

handler:function(){

period =1;

reloadsmartcontrolsdata();
}






function reloadsmartcontrolsdata(){

ds.load({

params:{

start:0,

limit:5,

ultimate_parent: ultimate_parent,

period: period,

risk_range: risk_range
}

});

director_datastore.load({

params:{

start:0,

limit:5,

company: company,

period: period,

risk_range: risk_range,

controlling: controlling
}

});

}





fpanel =new Ext.ux.FusionPanel({

id:'chartpd1',

fusionCfg:{

id:'chart1'//,listeners: { //apply standard listeners each time the Chart is refreshed

// mousemove:function(){console.log(['mousemove',arguments])}

// }

,

params:{

flashVars:{

debugMode:1,

lang:'EN'

}

}

},



chartURL:'/FusionCharts/MSColumn3DLineDY.swf',

dataURL:'/loaddirectoroverviewdata?format=xml&company='+ company +'&period='+ period +'&risk_range='+ risk_range +'&controlling='+ controlling,//let the chartObj load it

autoLoad:'/loaddirectoroverviewdata?format=xml&company='+ company +'&period='+ period +'&risk_range='+ risk_range +'&controlling='+ controlling,//let Ext autoLoad do the same.



region:'center',

listeners:{

show:function(p){

if(p.floating)
p.setPosition(p.x ||10, p.y ||10);

},

chartload:function(p, obj){

console.log('chart '+ obj.id +' loaded.')

},

chartrender:function(p, obj){

console.log('chart '+ obj.id +' rendered.')

}

},

tools:[{

id:'gear',

handler:function(e, t, p){

p.refreshMedia();

},

qtip:{

text:'Refresh the Chart'

}

},{

id:'print',

handler:function(e, t, p){

p.print();

},

qtip:{

text:'Print the Chart'

}

}]
});





var tabs =new Ext.TabPanel({

activeTab:0,

region:'center',

id:'tabs',


border:false,

items:[{


title:'Risk',

layout:'border',

id:'risk1',

border:false,


items:[

fpanel]



},{

title:'Compliance',

layout:'border',

id:'compliance',

border:false,


items:[compliancepanel]

},{

title:'Attestation',

layout:'border',

id:'attestation',

border:false,


items:[attestationpanel]

},{

title:'Confirmation',

layout:'border',

id:'confirmation',

border:false,


items:[confirmationpanel]

},{

title:'Reconciliation',

layout:'border',

id:'reconciliation',

border:false,


items:[reconciliationpanel]


}]

});




var backtestPanel =new Ext.Panel({

//title: 'Test Results',

layout:'border',

renderTo:'foo',

id:'backtestpanel',

height:500,

width:1000,



items:[grid, director_grid, tabs]
});

bwoody
7 Jan 2009, 1:41 PM
No, I did not changed anything and the problem which you can see on the screenshots above is still existing. But I have seen that this does not occur everytime if I use the online playground. If I use my local playground then this occurs everytime. The only differnce between online and local playground is the response time. Everything else is identical.

Furthermore I find out that the same silly behaviour is reproducable in IE 6.x too :-(

Br
Wolfgang


@Kubens - were you able to find a way to fix this? I have the exact same problem (IE6) where the last chart in a dashboard almost always renders small just like your screenshot.

service@think-1st.de
16 Jan 2009, 3:08 PM
I been experiencing problems while trying to preconfigure the "Ext.ux.FusionPanel", i dropped some breakpoint the get to this point.

uxfusion.js:116


Ext.apply(mc.params[this.varsName], fp[this.varsName]||{}, {
chartWidth : '@width' ,
chartHeight : '@height',
...


this parameters are inside the default object of apply, the question is should this parameter be overwriten by the 2nd object and thus do i need to remove this declaration to get this parameters preconfigured?

thanks in advance.

hendricd
17 Jan 2009, 6:22 AM
I been experiencing problems while trying to preconfigure the "Ext.ux.FusionPanel", i dropped some breakpoint the get to this point.

uxfusion.js:116


Ext.apply(mc.params[this.varsName], fp[this.varsName]||{}, {
chartWidth : '@width' ,
chartHeight : '@height',
...
this parameters are inside the default object of apply, the question is should this parameter be overwriten by the 2nd object and thus do i need to remove this declaration to get this parameters preconfigured?

thanks in advance.

@service@think-1st.de -- Fusion uses the chartWidth /chartHeight params to indicate the desired rendered size of the chart object. The ux's leverage that for use with the autoSize config option. If autoSize is true, Ext calculated size for the component is passed into those two param arguments.

If you want to specify your own, you may do so, by specifying height/width yourself. autoSize (coupled with the default: renderOnResize:true ) is recommended for Fusion, because Fusion does not resize the chart 'canvas' -- it must be re-rendered when its container size changes.

Richie1985
21 Jan 2009, 11:10 AM
Hello,

i want to use the OFCPanel in a Portal (http://extjs.com/forum/showthread.php?t=43561&highlight=portal)

Here my code:


DSR.DummyPortlet = Ext.extend(Ext.ux.OFCPanel, {
title: 'Dummy Portlet',
height:200,
settings: true,
settingHandler: function(e, target, panel){
Ext.Msg.alert('Demo Setting', 'You clicked a dummy portlet setting for ' + this.id + '.');
},
chartURL : 'open-flash-chart.swf',
dataURL: null,
ofcCfg :{
autoSize : true
},
isLoaded : false,
mediaMask : {msg:'Loading Chart Object'},
loadMask : {msg:'Gathering Chart Data'},
autoMask : true,
closeable: true,
collapsible : true,
maximizable : true,
listeners: {
'show': function() { console.log( 'SHOW' ) },
'chartload': function() { console.log( 'LOAD' ) },
'chartrender': function() { console.log( 'RENDER' ) }
},
afterRender:function() {
DSR.DummyPortlet.superclass.afterRender.apply(this, arguments);
this.load({
url: 'data.php',
params : { id : this.id, title: this.title },
method : 'POST'
});
},
plugins: Ext.ux.PortletPlugin
});
Ext.reg('dummyportlet', DSR.DummyPortlet);


Here a Screenshot:

http://img132.imageshack.us/img132/1238/unbenanntsh4.jpg

What do i wrong?

Can you help me please?

Thank you!

Richie1985
22 Jan 2009, 5:12 AM
did i have to post this in a other thread, or is this right here? the main problem is, that i dont want load data on rendering. better is afterrendering :(

hendricd
22 Jan 2009, 7:04 PM
did i have to post this in a other thread, or is this right here? the main problem is, that i dont want load data on rendering. better is afterrendering :(

Your problem is OFC is not really designed for a RIA App like Ext. It is targeted at multipage developers. It always assumes that when the chart object is rendered, there WILL BE DATA, so it bitches when there isn't. (My #1 beef with that one.)

Check out the latest 2.1 from SVN. I came up with 'nicer looking' approach for late data binding for OFC

Richie1985
23 Jan 2009, 12:22 AM
did you mean your example from here: http://code.google.com/p/uxmedia/source/browse/trunk/demos/openchart.html

when i copy this code, il become this:

http://img249.imageshack.us/img249/6733/unbenanntgs0.jpg

or did you mean something else?

sorry, my english is very bad, i come from germany.

Richie1985
26 Jan 2009, 9:00 AM
mhh okay , so i had no chance to build a nice chart in extjs? thats realy sad :(

hendricd
26 Jan 2009, 11:35 AM
mhh okay , so i had no chance to build a nice chart in extjs? thats realy sad :(

@Richie -- Contact the author of OFC-2, and ask him why you can't load a chart without any data initially. Beyond that, I have no idea what you just said.