Multi-Language Support for D3 Visualization Dashboards

The D3 Visualization extension module provides support for multiple languages, so that string parameters in a dashboard’s configuration file, such as chart titles and error messages, can be localized for a specific language or environment. Engineering text, such as the data that populates a control’s Legend, is not translatable through the configuration file, as the data is passed to the dashboard from the associated WSI. Several language files are provided with the D3 Visualization application, or you can create your own, as needed.

Multi-language support is accomplished by:

Using a Key-Value Pair JSON resource file located in the i18n folder, and
Specifying the Language Culture Name (en-US, de-DE, ar-AE, and so on):

A D3 visualization dashboard hosted in Desigo CC - The default country setting of the logged in user is applied.
A D3 visualization dashboard hosted in a browser - The following language specific parameter, &Local=[language-code], must manually be added to the dashboardconfig.JSON file URL as follows, for example: Dashboardconfig.JSON&local=fr-CA

Key-Value Pair JSON File

String parameters in a dashboard’s configuration file are mapped to a “key” in an associated Key-Value Pair (KVP) language-specific JSON file. In the language file, the key is bound to a “value”. When the configuration file comes across a valid key entry, the value of that key is applied to the parameter and displayed in the dashboard. KVP files are saved as JSON files, using Language-Culture-Name conventions, such as en-US.JSON or fr-CA.JSON, etc.

For example, you have a dashboard and want to localize the chart titles for a French-Canadian user:

In the D3 visualization dashboard’s configuration file, in the Style section, the following ChartTitle parameter for a bar chart is mapped as:
ChartTitle = “BARChartTitle”
In an existing KVP file, fr-CA.JSON, the key (“BARChartTitle”) is bound to the value (“Barre vertical Chart”):
“BarChartTitle”: “Barre Verticale Chart”

The result is that the dashboard displays the bar chart title for the user in French: Barre Verticale Chart.

If the website is hosted in Desigo CC, the logged in user’s country selection is automatically selected for all string parameters.

Location of the KVP Files

Several default KVP language files are provided for the most commonly used string parameters. If a specific language file is missing, a language specific key-value pair file must be created.

In SMC, each dashboard application has a file structure that is deployed on the website, and all KVP files must be located in the following dashboard i18n resource file:

Project> [Project Name] > Websites> [Website Name] > [Dashboard Name]> i18n > [Language-Culture-Name.JSON]

Linking a KVP File to a Dashboard Configuration File

In Desigo CC, the default language-culture setting of the logged in user is applied. For dashboards displayed in a browser, the &Local=[language-code] parameter specifying the language code, must be manually added to the URL of the dashboardconfig.JSON file.

For example:

Dashboardconfig.JSON&local=fr-CA

Sample Key-Value File

In the i18n folder, two sample Key-Value files are provided that can be used for localizing the string properties for a dashboard.

Copy the text from the sample Key-Value file and paste it in a text file to create another country-specific JSON file.