04 June 2013 | Ian Holmes, Senior Support Consultant

Ian Holmes | See more of Ian's postings


Using JavaScript in InstantAtlas Server Profiles

One of the hot topics at the InstantAtlas Data Workshops earlier this year explained how to use JavaScript in Text Widgets for conditional formatting in the InstantAtlas Server (IAS) Profiles module. Since then the support team has received a number of requests for further information on this topic.

Substitution strings in Text Widgets enable you to create intelligent sentences that add real value to the narrative that you can put around the other Widgets in your Profile.  These have been available in IAS for a long time and we are aware that a number of customers have made good use of them.  However one of the limitations of the substitution strings is that they’re not able to do conditional statements.  For example if an Indicator value has changed between two dates it is not possible to get the Widget to enter the word ‘increased’ or ‘decreased’; instead you have to word your sentence to say that the value has ‘changed’ between the two dates.

It is possible to use JavaScript within Text Widgets to compare two values and write out appropriate text depending on the difference between the two values enabling you to add more intelligent narrative to your Profiles. The steps required to implement this are detailed below.

Steps:

  1. Add a single Indicator to your Widget and specify the last 2 dates be used
  2. Enable the setting called AllowScriptTags
  3. Populate the Text Widget with the following (note that colour has been used to identify substitution strings and the element that is populated using JavaScript):

In #IDATE{1} the value of #INAME{1} was #IVALUE{1} for #FNAME{1}, this [span id='gwJavaScriptIncreaseDecrease']changed[/span] to #IVALUE{2} in #IDATE{2}.

[script type="text/javascript"]
[!--
var increaseDecrease = new String("unknown");

if (#IVALUE{1}>#IVALUE{2}) { increaseDecrease= "decreased"; }
else if (#IVALUE{1}<#IVALUE{2}) { increaseDecrease= "increased"; }
else { increaseDecrease="did not change"; }

document.getElementById('gwJavaScriptIncreaseDecrease').innerHTML = increaseDecrease;
--]
[/script]

An example of how this will display on the IAS User Website is shown below:

In Q03 2007 the value of Pension Credit claimants (%) was 36.82 for Nottingham, this decreased to 36.22 in Q03 2008.

How it works

JavaScript is used to compare the values of two Instances to determine if they are different. The text 'increased', 'decreased' or 'did not change' is then stored in a text value depending on the direction of the change between the two values. The final part of the JavaScript injects the contents of the text value in to the Text Widget which is inserted in to the element with the specified ID property. In this example the contents of the [span] element with the ID of gwJavaScriptIncreaseDecrease are replaced with the contents the appropriate text value.

Considerations

JavaScript derived text is not rendered in the Word generated export of a Profile, so you should provide a default value that is displayed in the exported Word document and also for users who have disabled JavaScript in their web browser.

The default value is entered in the [span] element, in the example above the default value of ‘changed’ is displayed when JavaScript is disabled:

[span id='gwJavaScriptIncreaseDecrease']changed[/span]

Conclusion

This is a simple example that shows how conditional formatting can be achieved using JavaScript to further enhance the value of your Profiles. Some more complex examples of what is possible using JavaScript are provided, along with the code used to create them, on our IAS demonstration website at the following link:

http://ias.instantatlas.com/IAS_Demo/profiles/profile?profileId=17&geoTypeId=1&geoIds=00FY

We continue to update this Profile with more examples as they are requested by clients. So if you have a particular requirement for something that you would like to achieve in a Text Widget which isn’t possible using the available substitution strings please get in touch with support@geowise.co.uk and we’ll see if it can be achieved using JavaScript.


More postings from the support team

InstantAtlas and Flow Maps

Layout and Shadows

Customising InstantAtlas Server Emails



 
 

Video Tutorials (hosted on YouTube)


InstantAtlas Essentials Training Playlist


InstantAtlas Desktop Tools Playlist


InstantAtlas Dynamic Reports Playlist


InstantAtlas Server Playlist



News and Articles

Arizona_Department_of_Health

Arizona Department of Health Services | ‘Making data presentation meaningful when dealing with low rates of population density’

Texas_School_of_Public_Health

The Institute for Health Policy, School of Public Health, University of Texas | ‘Making data available to the community through easy-to-use data presentation tools’

Worcestershire

Pan American Health Organization (PAHO) – ”How the Pan American Health Organization is using data presentation to aid the policy-making process”