Additional D3 Visualization Procedures

Complete the following procedures as needed:

 

Configuring Multi-Language Support for D3 Visualization

Scenario: You want to localize the text properties of your dashboard so that the titles and error messages of the widgets display in a specific countries language or language culture. For example, de-DE, or en-US.

You will create a language key-value pair (KVP) JSON file that the dashboard configuration file will access when it comes across a key in the code. The value bound to the key in the KVP file, is displayed in the dashboard.

  • You have a dashboard configuration file that you want to localize for a specific country.
  • You have determined which string parameters from your JSON configuration file you want to localize, and you have created a key for that parameter, and for each key you have created values that you want displayed.
  1. Create a Key-Value Pair (KVP) file. Alternatively, you can open an existing file using a text editor.
    a. Open a blank text page in your text editor.
    b. Enter your Key parameters, followed by the Value (text) you want to display when the Key is read in the configuration file. Use the following syntax for each Key-Value pair:
    “Key_Text”: “Value_text“
    NOTE: the key text must be in all capital letters. The only special character allowed in the value text is the underscore (_).
    c. Once you have entered all the key-value pairs, save the file with a .JSON extension and name it according to the appropriate Language Culture Name. The file must be saved in the following directory: [GMSProjects] > Websites> [Website Name] > [Dashboard Name]> i18n.
  1. Repeat Step 1 for as many KVP language files you need; saving each with the uniqe Language-Culture Name.
  1. To modify the dashboardconfig.JSON file, do the following:
    a. In the text editor, open the dashboardconfig.JSON file.
    b. In the widget’s Style file, navigate to each property for which you have created a key, and set the key as value for that property.
    For example: “Title”:PIE_CHART_TITLE, where PIE_CHART_TITLE is the key in the KVP language files.
    Repeat until all string parameters have been updated.
  1. To associate a dashboard to the specific language
  • If hosted the management workstation, the logged in user’s language-culture settings are applied, and the appropriate KPV language file is accessed.
  • If hosted in a browser, in the URL, after Dashboardconfig.JSON, type &locale=[Language]. For example: Dashboardconfig.JSON&local=fr-CA

 

Creating Substitution Key-Value Pairs for D3 Visualization

You want to create centralized substitution values for common or redundant parameter values that can be used for dashboard situations such as:

  • Displaying six gauge controls on one page and six pie controls on other in 3 * 2 format. The DashboardLayout section is the same for each dashboard, but, the widget sections are different, and require two separate JSON files.
  • Updating or overriding default or common styles for every widget or an entire dashboard page.
  • If the same data is represented in two different widgets, duplication of information can be simplified. For example, a pie control and a bar chart can have the same data provider information but different widget sections. The JSON configuration file can be simplified by using substitutions for the data provider sections.
  • You have a dashboard configuration file and you want to use substitution keys for one or more properties.
  1. For each property you want to create a substitution, after the property name, type the name of the substitution using the following syntax: $[SubstitutionName]$

 

Customizing a Dashboard Layout
  • You have a D3 visualization dashboard URL that you created with the Desigo CC web application.
  • You have a dashboard concept of the data/reports/statics that you want to view graphically and you have drawn a layout for the dashboard and decided which controls you want to use and where in the layout of the dashboard you want to place them.
  1. Navigate to GMSProjects > Websites.
  1. Click the appropriate website folder, and then click the folder named after the dashboard application and click configs.
  1. Right-click the dashboardconfig.json file and open it with an XML editor, such as Notepad.
  1. In the configuration file, in the Dashboard Layout section, do the following:
    a. Rows - Enter a value for how many rows the dashboard will have.
    b. Columns – Enter a value for how many columns the dashboard will have.
    c. Margins – To determine the spacing between the widgets, enter a value for the following margins of the dashboard: Top, Right, Bottom, Left.
    NOTE: There is no limit on the number of rows and columns you can have. It may also be helpful to draw an outline of how you want the dashboard to look and where you want to place the chart controls.
    d. Logging – In this section specify which error, informational, or warning messages to log and where to log them, such as the browser console or in the Trace Viewer. Type True or False to enable or disable the various logging options: LoggerName, TurnOnInfoTrace, TurnOnErrorTrace, TurnOnWarningTrace
    e. Background color –     Type a color to set the dashboard background.
  1. In the Widgets sections, enter the basic widget information for the first control:
    a. Name – Enter a name for the widget.
    b. ChartType – Enter a type of graphical control. Type one of the following: PieChart, RadialGauge, TrendSeriesChart, TrendSeriesMultiAxixChart, VerticalBarChart, or HorizontalBarChart, HorizontalGroupedBarChart, or VerticalGroupedBarChart.
  1. In the layout section of your first control, define the placement of the graphical control in the defined layout of the entire dashboard.
    a.     startRow – Enter a value for the row where the control will display.
    b. startColumn – Enter the value for the column where the control will display.
    c. rowspan – Enter a value to specify how many rows the control will use.
    d    . columSpan – Enter a value to specify how many columns the control will use.
  1. The dataProvider is the location responsible for obtaining the data from the web service that hosts the data. The data provider knows where to get the data and how to get and represent the data that the control understands. Each chart can have its own data provider and each data provider has its configuration requirements.
    a. name – Type the data provider name here.
    b. privateConfig – Enter the values based on the dataprovider name. See the Reference section D3 Dashboard Data Providers, for more information.
  1. Config – (Gauge control only) Set the gauge configuration properties (start, end color, and threshold values. For more information see About Gauge Controls.
  1. In the Style section of the control, define the look and feel for the control. Use the style file name with.JSON extension. The default style files are available for each widget under [Installed drive]/[Installed folder]/websites/[Website name folder]/[D3 Visualization application folder]/Config /Styles folder. Use the default style or create new style file using default files. The parameters vary depending on the type of control you are configuring.
  1. For each control you want to place on the dashboard, repeat the steps for the Widgets section, until you have all the controls that you need on your dashboard.
  1. Click Save.

 

Viewing the D3 Visualization Log in the Trace Viewer

To view the D3 Visualization extension module logging results in the Trace Viewer application, in the online Help, please search for Working with Trace Viewer.