FusionChart integration

Does anybody have a working example of a Embedded component with FusionChart ?

Thanks
Chris

Hi,

I tested this with a sample they have on their website
http://www.fusioncharts.com/Gallery/Category.asp?Column3D

I was not able to get it load any external data files. The FlashVars seems to be consistently ignored. But I noticed it looks for a file named ‘Data.xml’ from the server by default. So, what I did was install a URIHandler to to answer that request. It seems to work as expected. Here is the full code:

        Embedded c = new Embedded();
        c.setSource(new ExternalResource("../MSColumn3D.swf"));
        c.setType(Embedded.TYPE_OBJECT);
        c.setParameter("FlashVars","debugMode=0&chartWidth=70&chartHeight=35&DOMId=sampleChart&registerWithJS=1&scaleMode=noScale&lang=EN&dataURL=../MSCol3D1.xml");
        c.setWidth("400px");
        c.setHeight("300px");
        w.addComponent(c);

        w.addURIHandler(new URIHandler() {

            public DownloadStream handleURI(URL context, String relativeUri) {
                if (relativeUri.startsWith("Data.xml")) {
                    return new DownloadStream(getClass().getResourceAsStream("MyData.xml"), "application/xml", "MyData.xml");
                }
                return null;
            }

        });

Here I used a stream from a class resource, but of course you can build your data stream on-the-fly in the handleURI function.

Also: as you notice from above, you need to install the Flash file (swf) on the local machine also (under WebContent) to avoid any cross-domain problems.
11166.png

Thanks for your response

You would not have this example in an eclipse project you could share ?

I am bit confused as where to put the swf and data files in the project.

OK, getting somewhere now…

Changed the ExternalResource to ThemeResource and it works.

How would I have to implement this if I want to have multiple charts on one page ?

In the URIHandler we are looking for Data.xml which seems to be a generic string


		w.addURIHandler(new URIHandler()
		{

			public DownloadStream handleURI(java.net.URL context,
			        String relativeUri)
			{
				if (relativeUri.startsWith("Data.xml"))
					{
					{
                        }
               }

I think the right way would be to figure out a how to get the FlashVars (or some other Object parametrization) to work. That way you should be able to change that generis “Data.xml” to something unique to the chart. I suggest you study a bit of this in FusionChart documentation, if there is something obvious that I have missed.

As a workaround, there is some query parameter attached to the Data.xml request that might be useful identifying the request. Other than that, the Data.xml request seems to be relative to page URL and that unfortunately does not allow multiple charts.

I posted about this a little while back
here
.

Didn’t end up using Fusion in the end as we used Open Flash Charts.

I remember the discussion about Embedded parameter being ignored by Vaadin (
ticket 3367
) As this issue has been fixed in 6.2, I thought that it should work correctly now. Was there something else with the FusionCharts that prevented config via Flash parameters?

It looks like the parameters are still ignored.

If so and you have a test case, please create a ticket at
http://dev.vaadin.com
. From what I see the parameters are added correctly. Might be a browser/platform/… issue.

I can see at least the “FlashVars” parameter is ignored by the FusionChart object. With Firebug I can see the parameter is there though.

I quickly looked at the code in
VEmbedded.java
and for me it seems quite straight-forward rewriting the whole object-block at once.

I just couldn’t let this be so I continued debugging. Here is what I found…

The reason seems to be that FlashVars is a special type of parameter and according to
this
“FlashVars must be assigned in both the OBJECT and EMBED tags in order to work on all browsers.” I tested a bit with a static HTML file and based on my experiences this is more or less true.

It seems that adding “FlashVars” as an attribute to EMBED tag is required at least for FF3.5 and Safari 4.

So, my conclusion is that Vaadin does not support FlashVars special parameter (in the browsers mentioned above at least). :frowning:

Good news for all FusionChart users!

I found a solution that works with current Vaadin 6.2 for passing parameters to a
Flash movie and not using FlashVars:


        // First chart
        Embedded chart1 = new Embedded();
        chart1.setSource(new ExternalResource(
                "../MSColumn3D.swf?dataUrl=data-1.xml") {
            // Override as a workaround for Vaadin ticket #4020
            @Override
            public String getMIMEType() {
                return "application/x-shockwave-flash";
            }
        });
        chart1.setType(Embedded.TYPE_OBJECT);
        chart1.setWidth("400px");
        chart1.setHeight("300px");
        w.addComponent(chart1);

        // Second chart
        Embedded chart2 = new Embedded();
        chart2.setSource(new ExternalResource(
                "../MSColumn3D.swf?dataUrl=data-2.xml") {
            // Override as a workaround for Vaadin ticket #4020
            @Override
            public String getMIMEType() {
                return "application/x-shockwave-flash";
            }
        });
        chart2.setType(Embedded.TYPE_OBJECT);
        chart2.setWidth("400px");
        chart2.setHeight("300px");
        w.addComponent(chart2);

        w.addURIHandler(new URIHandler() {
            public DownloadStream handleURI(URL context, String relativeUri) {
                if (relativeUri.startsWith("data-")) {
                    return new DownloadStream(getClass().getResourceAsStream(
                            relativeUri), "application/xml", relativeUri);
                }
                return null;
            }
        });

This is a little bit more complicated as it should since I had to find workarounds to these issues:
#4020
and
#4021
.
As they are quite straight-forward to fix, I’m expecting them to get fixed in the next maintenance release.
11183.png

Sami

thanks a bunch … great stuff.

Do you think this will be resolved in the next release ?

Chris

Quite easy to fix so I expect that. However, if you want to play safe and you have many charts in your application I suggest you create your own sub-class of the Embedded and hide all the details there.

Yup… did that already

Thanks again
Chris

I posted an example here :

http://www.fusioncharts.com/forum/Topic22509-38-2.aspx

Hi All,

Am doing a research about Vaadin to use it instead of GXT and I want to know if there is a working example for integrating latest vaadin with fusioncharts?

So can anyone give an updated version of the example?

Thanks in advance.

Doesn’t the earlier sample work? Here is a working example:

public class FusionchartsApplication extends Application {

    private static final long serialVersionUID = 1L;

    @Override
    public void init() {
        Window mainWindow = new Window("Fusioncharts Sample Application");

        // First chart
        Resource chartResource = new ClassResource("MSColumn3D.swf", this);
        SWFComponent chart1 = new SWFComponent(chartResource,"400px","300px");
        chart1.setFlashVar("dataUrl","data-1.xml");
        mainWindow.addComponent(chart1);

        // Second chart
        Embedded chart2 = new Embedded(null, chartResource);
        chart2.setParameter("FlashVars", "dataUrl=data-2.xml");
        chart2.setWidth("400px");
        chart2.setHeight("300px");
        mainWindow.addComponent(chart2);

        // Handle data requests
        mainWindow.addURIHandler(new URIHandler() {
            private static final long serialVersionUID = 1L;

            public DownloadStream handleURI(URL context, String relativeUri) {
                if (relativeUri.startsWith("data-")) {
                    return new DownloadStream(getClass().getResourceAsStream(
                            relativeUri), "application/xml", relativeUri);
                }
                return null;
            }
        });

        setMainWindow(mainWindow);
    }

}

Sami,

Being fairly new to Vaadin, I just could not figure out where the resources (sfw-Files and xml-Files) need to go.

I have a plain vanilla Vaadin project with a WebContent folder, created with Eclipse-Vaadin Project creator.

Browsing in the forum, there seems to be quite some confusion when and how to use the Vaadin Resource Classes.

Please, can you just post a (working) example?

Thanks

Joachim

What is SWFComponent ?