FusionCharts for Backbase

11 October, 2007 - 03:37 — Richard

It is now possible to use any of the high-quality Fusion Charts within a Backbase application, and doing so has never been easier.

First, add the Labs namespace to your page. This widget was developed in the Backbase Labs, and these widgets have the prefix l: by default (that's a lower case L).

  xmlns:l="http://www.backbase.com/2007/labs"

Now include the widget definition. This widget should be installed under /Labs/fusionChart but you can change that within the widget definition if you desire.

  <xi:include href="/Labs/fusionChart/fusionChart.xml" />

You're ready to add a chart anywhere in your page:

  <l:fusionChart width="600" height="350" id="bbBar2D" 

    url="data/Bar2D.xml" type="FCF_Bar2D" />

Since it is a flash chart, you need to provide the width and height. The widget expects to load chart data from an XML file (the url attribute), and a chart type must be specified. The charts types currently available include:

FCF_Area2D
FCF_Bar2D
FCF_Candlestick
FCF_Column2D
FCF_Column3D
FCF_Doughnut2D
FCF_Line
FCF_MSArea2D
FCF_MSBar2D
FCF_MSColumn2D
FCF_MSColumn2DLineDY
FCF_MSColumn3D
FCF_MSColumn3DLineDY
FCF_MSLine
FCF_Pie2D
FCF_Pie3D
FCF_StackedArea2D
FCF_StackedBar2D
FCF_StackedColumn2D
FCF_StackedColumn3D

The FusionChartsFree library is a free version of the powerful Fusion Charts product (http://fusioncharts.com/) from our partners at InfoSoft Global.

Attachment	Size
fusionChart.zip	2.71 MB

Richard's blog
Login or register to post comments

Comments

FusionChart in the portal federated model.

8 November, 2007 - 17:28 — evanss2000

Hi Richard,

This is cool. Can you provide some recommendations on how I can get this to work on the portal's federated model? The uri base is currently defined in the fusionChart.xml file. How can I use the tag for the URI base?

Thanks,
Evan

Install question

13 November, 2007 - 18:19 — edub9

I have the backbase installed in a folderset

MYSITE.COM/backbase/Backbase_4_1/

I cannot find a folder called Labs anywhere?
Do I need to create it and if so where?
I uploaded everything as is directly from the zip file.

Thanks,
Eric

FusionCharts not displaying

16 May, 2008 - 10:59 — Jbuzzer

Hi Richard,

Charting is almost a standard feature on many other AJAX systems I've tested (even OpenSource). We're at a loss here because although we like backbase, my managers need charts and because there isn't enough documentation on integrating fusioncharts with backbase, we may have to give up going the backbase route altogether.

My issue is that I have setup the details as above (minus some unrelated code):

<xmp xmlns:xi="http://www.w3.org/2001/XInclude" backbase="true">

<xi:include href="bindings/www.backbase.com.2006.btl/codeHighlighter/codeHighlighter.xml" />

<xi:include xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" href="bindings/config.xml" />

<xi:include href="Labs/fusionChart/fusionChart.xml" />

</xmp>

<xmp backbase="true"

        xmlns:b="http://www.backbase.com/2006/btl" 

        xmlns:c="http://www.backbase.com/2006/command" 

        xmlns:e="http://www.backbase.com/2006/xel" 

        xmlns:l="http://www.backbase.com/2007/labs" 

        xmlns:xi="http://www.w3.org/2001/XInclude" 

        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

        xmlns:bjsfc="http://www.backbase.com/2007/jsf/client"

        xmlns="http://www.w3.org/1999/xhtml">

     <l:fusionChart width="600" height="270" id="bbBar2D" url="Labs/fusionChart/FusionChartsFree/Gallery/Data/Bar2D.xml" type="FCF_Bar2D" />

</xmp>

Scuse the code as I'm still a noob with backbase. I'm using the demo data files and these still don't display anything. An object is there like an image rather than the flash 'click to activate' but this may be due to the size specification and completely blank. Right-clicking on it just displays the standard context menu. Is there an example you can give or details on restrictions you can provide? I've even tried copying your blog's example into my system and it still doesn't display anything. There are no errors reported but the charts won't work. Any ideas?

Three paths are important

16 May, 2008 - 18:27 — Richard

The first is the definition of the widget: "Labs/fusionChart/fusionChart.xml"
You need to ensure that this URL is modified to point to the location of the fusionChart.xml file

The second is the url inside the l:fusionChart widget. You need to change it to point to where your data file resides.

The third thing is to ensure that FusionChartsFree is installed in the same folder as fusionChart.xml
So that folder should contain:
* fusionChart.xml
* FusionChartsFree/
* FusionChartsFree/Charts
* FusionChartsFree/Code
* FusionChartsFree/Content etc.

Preparing for a workaround

19 May, 2008 - 11:13 — Jbuzzer

Thanks for the prompt reply Richard. I had checked the locations of the files, the reason I don't do /labs is because this is a test environment and the urls need to be relative urls. Thing is I actually copied your above example and created a blank page with just a chart on it and still can't get it working. This is my full code.

FusionCharts Example

<!-- -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:bda="http://www.backbase.com/2006/bda" xmlns:x1="http://www.w3.org/1999/xhtml" xmlns:x2="http://www.w3.org/2002/06/xhtml2/" xml:lang="en" lang="en">

   <head>

      <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>

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

      <title>Fusion Charts Example</title>

   </head>

   <body>

   <script type="text/backbase+xml"

        xmlns="http://www.w3.org/1999/xhtml"

        xmlns:l="http://www.backbase.com/2007/labs"

        xmlns:xi="http://www.w3.org/2001/XInclude">

        <xi:include href="bindings/config.xml" />

        <xi:include href="labs/fusionChart/fusionChart.xml" />

        <h3>Line Chart</h3>

        <l:fusionChart width="600" height="350" id="bbBar2D" url="labs/fusionChart/FusionChartsFree/Gallery/Data/Bar2D.xml" type="FCF_Bar2D" />

        <h3>Stock price chart</h3>

        <l:fusionChart width="600" height="350" id="bbCandlestick" url="labs/fusionChart/FusionChartsFree/Gallery/Data/Candlestick.xml" type="FCF_Candlestick" />

   </script>

</body>

</html>

I copied the sample xml files over and checked their paths, I don't need anything functional, I just need to prove a chart will display. All I get are the two headings <h3> and 2 blank rectangles with the above width+height. Is it possible this is a security setting with my pc? Your page with its charts displays fine in my browser.

Today I've been working on a possible workaround where I use our old charting system (amcharts) and try to include the small javascript to generate the chart. The problem is my entire homepage is loaded within <script> tags (as above) for a loading message which displays while the entire page loads. How do I include javascript between these <script> tags. I've attempted <e:script> but I just get 'null' errors. So something like:

Workaround?

[...]

<head>

<script type="text/javascript" src="charts/ampie/swfobject.js"></script>

[...]

</head>

<body>

                <script type="text/backbase+xml" e:onload="document.getElementById('loadingMessageContainer').style.display = 'none'" style="height:100%">

                        <xi:include href="bindings/config.xhtml_btl.chameleon.xml" />

                        <div

                                xmlns="http://www.w3.org/1999/xhtml"

                                xmlns:b="http://www.backbase.com/2006/btl"

                                xmlns:e="http://www.backbase.com/2006/xel"

                                xmlns:l="http://www.backbase.com/2007/labs"

                                xmlns:xi="http://www.w3.org/2001/XInclude"

                        style="height: 100%;">

[...]

<b:window label="Charts" id="charts" buttons="maximize close" top="515px" left="650px" class="bufont" width="310" height="250" open="true">

     <e:script type="text/javascript">

     // <![CDATA[               

     var so = new SWFObject("charts/ampie/ampie.swf", "ampie", "520", "380", "8", "#FFFFFF");

     so.addVariable("path", "charts/ampie/");

     so.addVariable("settings_file", escape("ampie_settings.xml"));

     so.addVariable("data_file", escape("ampie_data.txt"));

     so.addVariable("preloader_color", "#999999");

     so.write("flashcontent");

     // ]]>

     </e:script>

</b:window>

</script>

</body>

BTW: I downloaded fusionCharts from their website as the zip file you link to appears to be corrupt.

Relative paths are fine

19 May, 2008 - 11:32 — Richard

Relative paths are fine, but its important to confirm that what you think is being loaded is really being loaded.
Use the Backbase Debugger (Shift-Esc) and set the Preference setting to make it open on page load - it will then display in the Network tab of the Debugger which files have been loaded by the browser.
It sounds like the chart file is not found. Confirm that the right .swf file is actually being loaded.
If you find any 404 errors then the paths are still not right.
You might also find Firebug's Net view useful to quickly see which files loaded and which were not found.

You should not need a workaround - get the paths right and confirm that the files are being loaded and you'll see the charts.
But in your second code sample above, the e:script must be inside an e:handler

<b:window ... etc

  <e:handler event="DOMNodeInsertedIntoDocument">

    <e:script type="application/javascript"><![CDATA[

      var so = ... etc

    ]]></e:script>

  </e:handler>

Good luck!

Hooray for workarounds

19 May, 2008 - 18:10 — Jbuzzer

I know you said that it should all work as in your example but not many things go my way in programming. I have spent the day trying to get the method you propose above to integrate Fusion Charts and to no avail. The debugger network tab said 0 requests. It reported no errors and it has been a bit of a head case. However on the plus side, I was able to show my managers the fusion charts !!! I used it in my second example of a workaround from my previous post:

[...]

<head>

[...]

<script language="JavaScript" src="labs/fusionChart/FusionChartsFree/JSClass/FusionCharts.js"></script>

</head>

<body>

<script type="text/backbase+xml" e:onload="document.getElementById('loadingMessageContainer').style.display = 'none'" style="height:100%">

        <xi:include href="bindings/config.xhtml_btl.chameleon.xml" />

[...]

<b:window label="Charts" id="charts" buttons="maximize close" top="515px" left="610px" width="315" height="250" open="true">

        <div id="chartdiv" align="center">loading FusionCharts...</div>

                <e:handler event="DOMNodeInsertedIntoDocument">

                      <e:script type="text/javascript">

                           var chart = new FusionCharts("labs/fusionChart/FusionChartsFree/Charts/FCF_Area2D.swf", "ChartId", "600", "350");

chart.setDataURL("labs/fusionChart/FusionChartsFree/Gallery/Data/Area2D.xml");             

chart.render("chartdiv");

                </e:script>

                </e:handler>

        </div>

</b:window>

</script>

</body>

[...]

I'm not sure what the cause was, I am using BackBase version 4.2.0. Whatever it was, I'm pleased to report fusionCharts is working!!! Feel free if you need to move this post, it was just what I thought was the most relevant place for me to post.

Client Framework