PDA

View Full Version : Fusion + EtxJS



Andre Froes
16 Sep 2010, 5:38 AM
Hi everyone, i'm trying to add a FusionChart inside a Table Layout, but i'm not succeding.
I Downloaded the uxMedia(this I didn't use) and uxChartPack, tried and example shown on website but also didn't succeed.

here is the code that I tried:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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-debug.js"></script>
<script type="text/javascript" src="../../uxChartPack/build/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/Charts/Column3D.swf',
//dataURL : 'FusionCharts/Charts/Column3D.swf', //let the Flash chartObj load it
autoLoad : 'FusionCharts/Gallery/Data/Column3D.xml' , //let Ext autoLoad do the same.

loadMask : {msg: 'Carregando dados...'},
autoMask : true,

width : 500,
height : 400,
listeners :{
chartload : function(p,obj){console.log('gráfico '+obj.id+' carregado.')},
chartrender : function(p,obj){console.log('gráfico '+obj.id+' otimizado.')}
},
tools : [
{id:'gear', handler:function(e,t,p){ p.refreshMedia();},qtip: {text:'Atualizar gráfico'} },
{id:'print', handler:function(e,t,p){ p.print();},qtip: {text:'Imprimir gráficos'} }
]
});
fusionPanel.show();
});
</script>
</head>

<body>
</body>
</html>


I got 1 error in firebug, i'm sending the pictures. In the beggining i though that it could be something related to the url of my js and all, but i got no 404 in it.

troseberry
16 Sep 2010, 6:12 AM
What version of ExtJs library are you using? I downloaded the fusion chart extension and tested it out and I was able to duplicate your errors using the new 3.3 beta. However I was able to get it to successfully load using the ExtJs 3.2.x library with no problems. I would back track and possibly try that version. There might be something in the ux code that is not compatible with 3.3.0

The code I used. I also was using Fusion Charts Free


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<script type="text/javascript" src="ext-base-debug.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="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 : 'FCF_Column3D.swf',
autoLoad : 'Column3D.xml' , //let Ext autoLoad do the same.
width : 500,
height : 400
});
fusionPanel.show();
});
</script>
</head>
<body>
</body>
</html>

Andre Froes
16 Sep 2010, 6:25 AM
Im using the version 3.2.1, can that affect the programm's perfomance then?
I'll download another version and try the example yuo sent me.

Andre Froes
16 Sep 2010, 7:24 AM
I didn't succeed yet, is there any live view of this? Any example working precisely with FusionCharts and extjs?

troseberry
16 Sep 2010, 7:37 AM
I tested it with 3.2.0 and 3.2.1. I had to download the latest version of the ux from google code. And then used the latest version of the fusion charts free components. To make sure of no path issues I put all the files in the same directory and then everything worked with the above code to render a single fusion chart panel. Unfortunately I don't have an accessible example

rbastic
16 Sep 2010, 8:20 AM
Or email it to me at rbastic@gmail.com
I will set it up on my website and post the link here for demonstrative purposes.
(I'm curious as well)

-Ryan

Andre Froes
16 Sep 2010, 8:28 AM
I'm getting another screen now, no errors in firebug, but i tried a different way:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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-debug.js"></script>
<script type="text/javascript" src="FusionCharts/JSClass/FusionCharts.js"></script>
<script type="text/javascript" src="uxChartPack/uxvismode.js"></script>
<script type="text/javascript" src="uxChartPack/uxmedia.js"></script>
<script type="text/javascript" src="uxChartPack/uxflash.js"></script>
<script type="text/javascript" src="uxChartPack/uxchart.js"></script>
<script type="text/javascript" src="uxChartPack/uxfusion.js"></script>
<script type="text/javascript">
var fusion= new Ext.ux.Chart.Fusion.Panel({
id : 'Column3D',
title : 'ux.FusionPanel',
collapsible : true,
chartCfg :{ id : 'Column3D'},
autoScroll : true,
chartURL : '/FusionCharts/Charts/Column3D.swf',
dataURL : '/FusionCharts/Gallery/Data/Column3D.xml',
width : 500,
height : 400,
});

Ext.onReady(function() {
var janela = new Ext.Window({
height : 380,
width : 615,
border : false,
autoScroll : true,
id : 'janela',
title : 'Um grafico de barras',
layout : 'table',
layoutConfig : {
columns : 1
},
defaults : {
height : 350,
width : 600
},
items : [
{
html : fusion
}
]
});

janela.show();
});
</script>
</head>
<body>
</body>
</html>


can you post the code as rbastic says? it would really help.
I'm posting how is it now.

my mail: arfmoraes@gmail.com (in case you send it by :D)

troseberry
16 Sep 2010, 10:36 AM
In your new example you are defining the panel and then you define a window with the
items : [
{
html : fusion
}


Whats happening is that in the window it is displaying the interpreted raw html of the panel. Instead just remove the "html" reference

items: fusion

I made that change and it worked. I know this is perhaps a dumb question but do you have Flash installed?

I posted a zip archive of the files. I created a folder under the examples area of the ExtJs Library version 3.2.1 and tested with success. The code is not optimized and would require some tweaking to make it render and look better but you should get the idea.

Andre Froes
17 Sep 2010, 3:46 AM
It worked!!! I was making 1 thing wrong, when I was loading the xml with the values, I was using autoLoad, not dataURL, that made the trick. Thanks a lot troseberry!

Andre Froes
17 Sep 2010, 4:07 AM
Can I work with css within a table layout? For example, I'm trying to put the FusionChart 45px from top of the tablelayout and 35px from its left. Same goes for the table layout, it is showing in the middle of my browser, I want to set it to top left of it.

Andre Froes
17 Sep 2010, 4:23 AM
nvm, gotcha:


{
bodyStyle : 'top: 45; left: 35px'
}

JoyfulBobHome
7 Jan 2011, 9:46 AM
Thanks! This works great!

Is there be a .SWF file for a Series Column chart (FCF_MSColumn3D.swf)?

We're using series charts in 2.2 and it would be nice to be able to use them in 3.x.