Jordan Industrial Observatory
Strengthening Industrial Intelligence for enhanced evidence-based policymaking

3. Interacting with Visualization App

Under the WordPress folder on the website, two files – hm.Visuals.css and hm.Visuals.js – are required by the Observatory application. Also the lib folder contains common Javascript library code (mostly third party open source libraries) that is used by the Observatory application. Everything else is contained in the jordan/prototype folder.

IMPORTANT: There are two zip files corresponding to the above Observatory application files and folders that have been saved under the WordPress folder. They are web.zip and jordan.zip. If the Observatory application needs to be transferred to another WordPress instance at some stage (under another hosting provider perhaps), all that needs to be done is to copy these two zip files – web.zip and jordan.zip – under the WordPress folder on the host and then unzipping it in place.

Important. After unzipping, the following command needs to be run to ensure proper file/directory privileges
sudo chown -R  www-data:www-data <Wordpress root folder>/jordan

That’s it. 

Note: For the current installation, <Wordpress root folder> is /var/www/html/observatory.huzaifazoom.org/public_html/ so the above command becomes:

sudo chown -R www-data:www-data /var/www/html/observatory.huzaifazoom.org/public_html/jordan

The Observatory application will be available to the WordPress instance from then on. Once these folders are copied and unzipped, a MySQL database schema with tables needs to be created and populated using the instructions given on the MySQL Data for Production page.

The Observatory application has been designed to be a standalone web (HTML/Javascript/CSS) application. It has been integrated into the WordPress workspace as shown above. Individual charts are displayed as follows:

  • Create a separate WordPress post (and assign it tags and/or categories)
  • Add a shortcode to make a call to the underlying Observatory application and display it in an iFrame (we are using the iframe plugin in WordPress)

Examples of shortcodes used in some posts

– Share of Value Added from Medium-High and High Tech Manufacturing in Total VA

[iframe src="/jordan/prototype/production/?structure_econ-noheader-va_mht_share"]

– Value Added from Medium-Low Tech Manufacturing Per Capita

[iframe src="/jordan/prototype/production/?structure_econ-noheader-va_ml_pcap" height=600]

– Industrial Survey Charts by Sector

[iframe src="/jordan/prototype/indsurvey/index.html?sector_noheader" height=650]

Leave a Comment

Your email address will not be published.