Wednesday, March 13, 2013

Charting Capability in Portal using WEF V8 and DOJO APIs

Charting capability in Portal using Web Experience Factory (WEF) V8 and DOJO APIs This article will show you how to create Charts in WEF V8 using DOJO Charting API to develop custom charts using other than commercial APIs like Fusion Charts or Highcharts JS APIs. So I started building a sample chart demo in WEF V8 using DOJO APIs which shipped with WEF designer.

I followed following steps to create sample Dojo chart in WEF V8:

1. Created an empty model called dojochart_view.model in one of existing WEF project.

2. Added Page builder as first builder.



  • Inside the page1 code, added two separate div, one for loading chart component and other for the chart legend.



  • Also, at the top of the page1 html, added two separate span one for loading the DOJO css and other for loading the DOJO JS code.


3. I added a "Client JavaScript" as second builder and selected dojo.js api shipped with WEF V8 designer, path as /factory/dojo/dojo/dojo.js.


4. Then I added Style Sheet as third builder and selected the claro theme as below.


5. I added another "Client JavaScript" builder to add the basic code to load the DOJO charts. In this JS I load the charting DOJO require apis and sample data to display the chart. To develop this, I referred one of the samples Dojo chart example from http://dojotoolkit.org/documentation/tutorials/1.8/charting/ code.





5. Finally added Action List builder to add the main function to load the page1 and saved the model. I could have made page1 as main to avoid this builder.

6. I ran this model in the browser and DOJO charts appear as below -



Conclusion:
This is one of the quick ways to develop chart in any WEF Portal application using DOJO APIs and customer experience can be enhanced. Using DOJO charting APIs developers can create dynamic, unique, and functional charts from different sets of data. Also DOJO Charts provide multiple theme and different types of charting support.

To connect with me, follow me on Twitter: @vishwanathsinha


Vish Sinha, a Senior Consultant for Prolifics, is an experienced Portal and JEE Architect. He specializes in providing Enterprise SOA solutions with different IBM WebSphere stacks and portal solutions. Currently his main focus area is leveraging Web Experience Factory in providing Portal solution to customers. He has played different IT roles ranging from being an Architect, Technology Consultant, Technical lead and Software engineer for several large projects. Vish has done an excellent job in implementing solutions across verticals like Finance, Insurance, Telecom, Retail, and Healthcare for several of Fortune 1000 customers. Vish has a Bachelors degree in Electrical Engineering.