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
