Writing custom code

AnalyzePRO is a quite client intensive web application. This means that a lot of configuration and client APIs are available for developers to extend the standard features of the dashboards.

This section contains the following content:

 

Tech Stack

Our dashboards are pure HTML5 which means that graphics are presented with HTML, SVG, CSS and JavaScript.
The clienside code is JavaScript based and includes the jQuery library in addition to other dashboard specific and standard libraries and APIs.

To get the most out of the dashboard customizing and to better understand the power of the customizing abilities in the AnalyzePRO platform we really encourage you to go to http://codeschool.com and do som training on Javascript and jQuery!
The below documentation demands basic knowledge of JavaScript and the jQuery eventhandler technology.

The client-server communication is based on Ajax callbacks to WCF services.

How to include my custom code?

In AnalyzePRO v5.0 we introduced a couple of new text-areas in the Dashboard Properties dialog.

Two of these inputs are provided for you to add your own custom JavaScript code, one input for scripts to be included in the header section of the page when rendering the dashboard and one input for scripts to be included at the bottom of the document body.

Why the two sections?

It is considered best practice to devide your script into these two sections according to the importance or the load order of your code:
- If you need your code to be present during rendering of the page, you should add your code to the head section
- If you need your code to execute after the page is done rendring or at least after some elements or head code, you should place your code in the body bottom.

An other option to execute code after your dashboard is done rendering is to add your code inside a jQuery document ready eventhandler in the head section.
This is the best approach if you want to handle different events on your dashboard:

/* HEAD SCRIPT */
$(document).ready(function(){

  // This code will display a messagebox once the document is ready (done loading)
 alert("Awesome! -My document is done rendering");

  // This is also the place where you should define your eventhandlers for different dashboard events

});

ATTN: You should never place a jQuery document ready eventhandler in the bottom of body textarea since it may never execute (document is already done loading).

(For those of you that use AnalyzePRO v4.2, custom JS code or files needs to be included inside a TextElement)

How to handle dashboard events?

To handle a specific event, you need to create an eventhandler. The definition of the eventhandler should be parsed once the document is done rendring (inside the document ready event handler described above).

Below you will find a basic example with a dataElementRendered event handler.

All element containers contains the css class elementContainer and the id elContainer_[IDX] which means that you can:

- Set up a eventhandler to execute custom code on a specific visualization (eg: container id=elContainer_2):

// Trigger script every time dataelement in the container is rendered
$("body").on("dataElementRendered","#elContainer_2", function(evt,elRes){
 var container = $(this);
 var containerId = "elContainer_2";

 /* This section will be executed every time the visualization in elContainer_2 is done rendering */
 alert("The visualization in element container " + containerId + " is done rendering");

});

- Set up a eventhandler to execute custom code on all visualizations:

// Trigger script every time dataelement in any container is rendered
$("body").on("dataElementRendered", ".elementContainer", function(evt,elRes){
 var container = $(this);
 var containerId = container.attr("id");

 /* This section will be executed everytime ANY visualization is done rendering */
 alert("The visualization in element container " + containerId + " is done rendering");
});

See the different event functions above for examples on how to handle them.

So where do I find the element container ID?

If you want to target one container, you can find the elContainer_n name from the "Edit ElementContainer..." dialog inside the editor:
 
ElementName = [elementID]##[elementContainerID]
In the above example, the elementcontainer id is elContainer_4
 

API / Events

When a user interacts with a dashboard, different event are triggered.
As a developer you can utilize this by hooking up your own event handlers and execute your custom code.

dataElementRendered Requires 4.2
This event is triggered on the elementContainer every time a dataElement/visualization is done rendering inside the container

textElementRendered Requires 5.0
This event is triggered on the elementContainer every time a textelement is done rendering inside the container

imageElementRendered Requires 5.0
This event is triggered on the elementContainer every time a imageelement is done rendering inside the container

navigatorRendered Requires 5.0
This event is triggered on the elementContainer every time a navigator is done rendering inside the container

tooltipUpdated Requires 5.0
This event is triggered on the elementContainer every time a tooltip has updated its content

beforeDrilldown Requires 5.1
This event is triggered on the elementContainer every time a user clicks on a drilldown point in the visualization.

API / Methods

In this section we will document some of the basic methods you can utilize to get things done easy in your code.

The full API reference is available here: http://services.businessanalyze.com/jsdoc/index.html