Configuring D3 Visualization Dashboards

Scenario: You want to integrate the D3 Visualization extension module with the management platform so that you can create a web page or dashboard to view reports and external web data in a graphical form, such as pie charts, timeline trend series, gauges, and bar charts.

 

Reference: For related background information, see the reference section.

 

Workflow diagram:

 

Prerequisites:

  • Internet Information Services (IIS) is installed. For information on installing IIS, see Step-by-Step > Installing the Software > New Installation.
  • The following extension modules (features) are installed: Web Services Interface and Application Host Base.

 

Steps:

1 – Install Java for D3 Visualization
  1. Download the JRE or JDK installation file from the Oracle web site.
    NOTE: Most installations only need a Java Runtime Environment (JRE). Advanced users who want to edit special reports in Eclipse should install the Java Development Kit (JDK) instead. Java version 1.8 or higher is required. You need to download the JRE or JDK.
    JRE: http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html
    JDK: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
  1. Accept the license agreement at the top of the download table.
  1. Select the *x64.exe version near the bottom of the list.
  1. Before you download the executable file, accept.

 

2 – Install D3 Visualization
  1. On the computer where you copied the management software, navigate to the …\InstallerDVD\InstallFiles folder, right-click Gms.InstallerSetup.exe, and then select Run as administrator.
  1. From the Install Wizard window, click Next until you arrive at the Setup Type Selection screen.
  1. Under Feature Selection, select Modify.
  1. In the Standard Modules expander, select Dashboard and Application Host Base.
  1. Open the Connectivity expander and select the Web Services check box.
  1. Click OK to return to the Setup Type dialog box.
  1. Click Next until you reach the Ready to Install the Program dialog box.
  1. Click Install.
  • When the installation program is complete, the Installation Complete dialog box displays.
  1. Click Close.

 

3 – Create a Web Service Interface for D3 Visualization

If you already have a web service interface created, you can skip this step.

  • In the SMC tree, in the Websites folder, at least one website is available.
  1. In the SMC tree, select Websites > [website] where you want to create a web services application.
  1. Click Create Web Application , and select Create Web Services Application.
  • The New Web Services web application page displays.
  1. Open the Project Information: Web Services Communication expander, and in the Project name field, select the project that has the D3 visualization extension module added.
  1. Open the Web Application Details expander, and do the following:
    a. In the Name field, enter a unique name.
    b. In the User field, browse for a web application user and select the desired user. By default, it displays the website user details. You can select a different user. However, the web services application user must be a member of the IIS_IUSRS Group. If the user is not a member, you are prompted to add the user to that group.
    c. In the Password field, enter the password of the web services application user.
    d. Confirm the web services application user and password. If the password has changed, you must modify the web application, and provide the most recent user password.
    e. In the Path field, accept the default path: [installation drive:]\[installation folder]\[websites]\[website name].
  1. Click Save .
  • A confirmation message displays.
  1. Click OK.
  • A new web services application is created.
  • A Help URL displays in the Project Information: Web Services Communication section.
  • A URL displays in the Web Application Details section.
  1. (Optional) Test the APIs provided by the Web Service Interface:
  • Click the Help URL link to launch Swagger in the browser.
  • The Web Service Interface test page displays in the browser.
  • Enter your username and password with a colon in between, for example, DefaultAdmin:MyPassword.
  • To log in, click Explore.
  • Click the System Browser section, and then click the first GET button.
  • Enter the systemId of your project, and then click Try it out!.
  • The Response Body contains the WSI response.

 

4 – Create a D3 Visualization Application
  • The management station client is not running.
  • System Management Console (SMC) is open.
  • The D3 Visualization extension module is installed, along with Web Services Interface and Application Host Base extension modules.
  • At least one website is available under the Websites node in the SMC tree.
  1. Start the project that you want to create a D3 Visualization application for.
  1. In the SMC tree, select the website under which the D3 Visualization application has been created.
  1. Click Create Web Application , and then select Create D3 Visualization Application.
  • The New D3 Visualization web application page displays.
  1. Open the Web Application Details expander, and do the following:
    a. In the Name field, enter a unique name for the web application. This will be D3 Visualization web application name.
    b. In the User field, browse for a web application user and select the user. By default, it displays the website user details. You can select a different user. However, the web application user must be a member of the IIS_IUSRS Group. If the user is not a member, you are prompted to add the user to that group.
    c. In the Password field, enter the password of the web application user.
    d. The Path field contains the default value [local drive:]\[GMSProjects]\[websites]\[website name]\[D3VisualizationAppName] for the location of the web application.
    NOTE: Confirm the web application user and password. If the password changes, you must modify the web application, and provide the most recent user password.
  1. Click Save .
  • A confirmation message displays.
  1. Click OK.
  • The data is validated and, on successful creation a read-only URL for https displays in the Web Application Details section.

 

5 – Import D3 Visualization Library Template
  • You are in the management station.
  • System Manager is in Engineering mode.
  • System Browser is in Management View.
  1. In System Browser, select Project > System Settings > Libraries.
  1. In the Library Configurator tab, click Import.
  1. In the Import Libraries dialog box, select Global_D3VisualizationApplication_HQ_1.gms.
  1. Click Open. When the import is complete, the following display in System Browser:
  • Management View - The D3 Visualization library template is added to the L1 Headquarter > Global folder
  • Application View – A D3 Visualization node is created.

 

6 – Associate URL with Web Application

To associate the URL with the dashboard in the management station.

  • In SMC, your project is started and you have added it to the D3 Visualization Web Application
  • In the management station, you have imported the D3 Visualization library.
  1. In SMC, from the Website section, select the the D3 Visualization application node and from the Web Application Details section, click Copy URL.
  1. In the management station, from System Browser, select Application View > D3 Visualization Application.
  1. In the Extended Operations tab, navigate to the Main URL property, and right-click in the Value field and select Paste.
  1. Remove the “s” from https and remove the port number from the URL.
  1. At the end of the URL type: /#/dashboard, and click Set.
  1. You have now configured the dashboard web application. In order for the D3 visualization dashboard to display in the management station you must either first create application rules or use any other web viewer.

 

7 – Create D3 Visualization Web Rules
  • System Manager is in Engineering mode.
  1. In System Browser, select Management View.
  1. Select Project > System Settings > Application Link Rules.
  • The Rule Editor tab displays.
  1. Open the Output expander from the Application drop-down list and select D3 Visualization. This corresponds to the external web application to display.
  1. In the Configuration File field, enter the name of the .JSON configuration file.
    NOTE: Be sure to include the .JSON extension in the file name.
  1. From System Browser, drag the system node that will act as the trigger to launch the dashboard page, and drop it over the Path field in the Triggers Condition section.
  1. From System Browser, drag the desired target object into the Path field.
  • In Operating mode, this will cause the rule to display the configured external web application in the Application Viewer tab when the associated object is selected in System Browser.
  1. From the pop-up menu, select Add new Element and then modify the application parameters. The parameters listed depend on the applications and their requirements.
  1. Filter the other fields in the row by Managed Type, Discipline/Subdiscipline, Type/Subtype, and Function. This will cause the display rule to only be triggered when the target object matches those criteria.
  1. Click Save As .
  1. In the Save Object As dialog box, select the main Web Applications folder or any subfolder under it as the destination for saving the new rule.
  1. Enter a name and description.

8 – Create a Fixed Link for a D3 Visualization Dashboard
  • System Manager is in Operating mode.
  • You have set the system object associated to the D3 Visualization dashboard in the Rules Editor.
  • There are one or more Links available.
  • You want to create a fixed link to access this external web application.
  1. In System Browser, click the trigger node that has been configured for the dashboard in the Rules Editor.
  • The Application Viewer tab displays a link for the external web application for the system object selected in System Browser.
  1. Click Save As .
  1. In the Save Object As dialog box, select a Links subfolder as the destination for saving the new external web application fixed link.
    a. Enter a name and description.
    b. Click OK.
  • The fixed link object is added to System Browser > Application View > Application > Links.

Related Topics
  • For related reference topics, see, Handling Fixed Links for Web Applications

For related procedures, see the following:

  • Creating a Website using SMC
  • Modifying the Website Parameters
  • Modifying a Web Application on a Server