Using FusionCharts in Oracle WebCenter Portal

Recently I stumbled upon FusionCharts, a powerful charting component. With FusionCharts, we can create stunning charts withing few minutes as I felt it is very easy to use. Earlier they were supporting chart rendering in Flash only. Now they render charts in either JavaScript or Flash. I got to know that FusionCharts XT is the flagship product of the FusionCharts Suite XT. Best part about FusionCharts is cross-browser compatibility (including mobile browsers), JavaScript and Flash chart rendering :-)


Later I thought about using FusionCharts in Oracle WebCenter Portal product. Then I started experimenting by using FusionCharts Suite XT - Free Trial to demonstrate how to use FusionCharts in Oracle WebCenter Portal product. 



Follow the steps below to get started :



Step 1 : Download FusionCharts Suite XT - Free Trial from http://www.fusioncharts.com/download/ and extract it to your local disk. 

Note : Explore the licensing options available from http://www.fusioncharts.com/buy/ as per your requirement.



Download FusionCharts


Step 2 : Login to WebCenter Portal


Step 3 : Create a new Space 'FusionChartsSpace' and choose 'Team Site' template (or any other space template).


Create Space - Choose URL and Access level


Step 4 : Change the page template of space 'FusionChartsSpace' to 'Side Navigation (Stretch)' from Administration (via Actions -> Manage All -> Settings)


Choose Side Navigation Stretch as page template


Step 5 : Navigate to newly created space 'FusionChartsSpace'. Create a new folder 'FusionCharts' on your space via Documents page/tab. We will use this folder to store FusionCharts XT java script and flash files used to render charts on a page.


Create folder FusionCharts to store both javascript


Step 6 : Create another folder named 'MyCharts' at the same level as above folder. We will use this folder to store HTML wrapper file to embed the chart either using Java Script or Flash. Also we will use the same folder to store the XML Data file or JSON file used by FusionCharts to render a chart according to the data specified in it.


Create folder MyCharts to store XML Data and HTML Wrapper files to render charts


Step 7 : Copy *.swf files from FusionCharts Download Pack (i.e FusionChartsSuiteXTEval -> FusionCharts XT -> Charts folder under local disk) to 'FusionCharts' folder in your space 'FusionChartsSpace' -> Documents. It contains SWF files required to render the charts in Flash.


Step 8 : Copy *.js files from FusionCharts Download Pack (i.e FusionChartsSuiteXTEval -> FusionCharts XT -> Charts folder under local disk) to 'FusionCharts' folder  in your space 'FusionChartsSpace' -> Documents. It contains JS files required to render the charts in java Script. Useful when viewed on a machine or device that does not support Flash.


Step 9 : Copy Download URL of FusionCharts.js. Right click on the file from Space -> Documents and click on Get Links in the popup menu. Download URL (or absolute path) for 'FusionCharts.js' file looks something like :





http://127.0.0.1:8888/webcenter/content/conn/dev-ucm/path/WebCenter0711PS5/FusionChartsSpace/FusionCharts/FusionCharts.js



Copy Download URL of FusionCharts.js


Step 10 : Create an XML file 'Data.xml' in your space 'FusionChartsSpace' -> Documents, an XML-lized form of the sample sales data as shown below :



<chart caption='Weekly Sales Summary'


   xAxisName='Week' yAxisName='Amount' numberPrefix='$'> 


    <set label='Week 1' value='14400' /> 


    <set label='Week 2' value='19600' /> 


    <set label='Week 3' value='24000' /> 


    <set label='Week 4' value='15700' /> 


</chart>

Copy sample XML code to Data.xml file


Step 11 : Copy Download URL of 'Data.xml'. Right click on the file from Space -> Documents -> MyCharts folder and click on Get Links in the popup menu. Download URL (or absolute path) for 'Data.xml' file looks something like :





http://127.0.0.1:8888/webcenter/content/conn/dev-ucm/path/WebCenter0711PS5/FusionChartsSpace/MyCharts/Data.xml



Copy Download URL of Data.xml file


Step 12 : Create an HTML file 'MyFirstChart.html' on your local disk and copy-paste the code :



<html>


  <head> 


    <title>Creating Pure JavaScript chart</title> 


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


  </head> 


  <body> 


    <div id="chartContainer">FusionCharts XT will load here!</div> 


    <script type="text/javascript"><!--



      var myChart = new FusionCharts( "Column3D", "myChartId", "400", "300" );


      myChart.setXMLUrl("MyCharts/Data.xml";);


      myChart.render("chartContainer";)


    // --> 


    </script>


  </body> 


</html>



Step 13 :  You've to make some minor changes to the html file created in previous Step 12. Now you've to provide the Download URL path for FusionCharts.js and Data.xml (See Step 9 & Step 11) instead of FusionCharts/FusionCharts.js & MyCharts/Data.xml.





(i)  Replace 'FusionCharts/FusionCharts.js' by 'Download URL path for FusionCharts.js'




(ii) Replace 'MyCharts/Data.xml' by 'Download URL path for Data.xml'





MyFirstChart.html is ready. This is my First Pure JavaScript chart.


Step 14 :  Upload the modified version of 'MyFirstChart.html' (under local disk) to 'MyCharts' folder via Spaces -> Documents


Step 15 :  Copy Download URL of 'MyFirstChart.html'. Right click on the file from Space -> Documents -> MyCharts folder and click on Get Links in the popup menu. Download URL (or absolute path) for 'MyFirstChart.html' file looks something like :





http://127.0.0.1:8888/webcenter/content/conn/dev-ucm/path/WebCenter0711PS5/FusionChartsSpace/MyCharts/MyFirstChart.html





Step 16 :  Create a new page 'MyChart' by choosing page style as 'Web Page'. In the Composer page, Click Edit and specify the 'Source' parameter value as Download URL (or absolute path) of 'MyFirstChart.html' file (See previous Step 15).


Paste the download URL of MyFirstChart.html as Source parameter for MyChart page (uses WebPage style)


Step 17 :  Click Apply, Click OK, Click Save and Click Close to save the changes and exit Composer window.



Now you'll see the 3D Column chart rendered using Fusion Chart JavaScript on 'MyChart' page as shown below :


Finally :-) 


Rendering 3D Column chart using FusionCharts





NOTE: If you want your chart to be rendered using Flash instead of JavaScript, Just modify the following line in MyFirstChart.html code as shown below :



var myChart = new FusionCharts( "/path/to/Column3D.swf", "myChartId", "400", "300" );


instead of


var myChart = new FusionCharts( "Column3D", "myChartId", "400", "300" ); 





For more information about rendering different kinds of charts, see FusionCharts Documentation http://docs.fusioncharts.com/charts/


Happy Charting using FusionCharts in Oracle WebCenter Portal ;-) 


Comments:

Hi Nanda,

I am a little confused: with ADF DVT available in WebCenter Portal, why would I want to use FusionCharts (that despite its name I believe is not associated with FMW in any way)? Does FusionCharts do things that your own product cannot provide?

kind regards,

Lucas

Posted by Lucas Jellema on April 16, 2014 at 05:06 PM IST #

Lucas,

FusionCharts is NOT associated with FMW/Oracle in any way. InfoSoft Global (P) Ltd is the creator of FusionCharts and it is a separate company.

This article is NOT making any recommendations. Both has advantages and disadvantages so use ADF DVT or FusionCharts according to your requirement to give the best user experience w.r.t charting.

Regards,
Nanda Kishor

Posted by Nanda Kishor on June 23, 2014 at 04:02 PM IST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

I'm a Senior Member of Technical Staff @Oracle working on Oracle WebCenter Portal Product, Sustaining Engineering Team. Few words that describe me are : Webmaster, SEO, Wordpress Fan, Foodie, Traveller, iBangalorean, An Indian :-) Follow me @nandakishorkn [Twitter] Get connected via fb.com/nandakishorkn [Facebook]

Search

Archives
« April 2015
SunMonTueWedThuFriSat
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  
       
Today