Components of a D3 Visualization Dashboard Configuration File

JavaScript Object Notation (JSON)

Every dashboard has its own JSON (JavaScript Object Notation) configuration file which specifies the controls the dashboard uses and how they display in runtime. For example, how many rows and columns the dashboard layout contains, and what the margins are. Which controls, bar or pie chart, for example, and what color to display for value ranges.

JSON notation allows you to store and exchange data between a browser and a server. The web server hosts the JSON file. The syntax rules are as follows:

• PropertyName: PropertyValue syntax pairs.
• Data is separated by commas.
• Curley braces contain objects.
• Square brackets contain arrays.

Each JSON configuration file consists of three primary sections: DashboardLayout, Widgets, and the baseURI.

 

DashboardLayout

This section in the configuration file defines the overall layout and the grid of the dashboard, as well as defining where error or exception logging are displayed, and what actions should be logged.

NOTE: There is no limit on the number of rows and columns you can have.

The following parameters are defined in this section:

• Rows – The number of rows the dashboard will have.
• Columns – How many columns the dashboard will have.
• Margins – Sets the margins of the dashboard: Top, Right, Bottom, and Left.
• Logging – Specifies error, informational, or warning messages to log and where to log them. Type True or False to enable or disable the various logging options:
• LoggerName – Display location of the log: AFWLogger enables the log to display in the Trace Viewer. BrowserLogger displays the logged information in the default Browser.
• TurnOnInfoTrace – Logs events such as call backs, data processing, debugging entries, etc.
• TurnOnErrorTrace – Logs exception events.
• TurnOnWarningTrace – Logs code format issues, etc.
• BackgroundColor – The web page background color. The default color is white.

 

Widgets

This is where each control is defined and styled on the dashboard. The data from the provider is displayed according the information in this section. For each control placement, you must provide the following basic widget information:

• Name – A name for the widget. Also used as the chart title.
• Charttype – The type of graphical control:
• PieChart
• RadialGauge
• TrendSeriesChart
• VerticalBarChart
• HorizontalBarChart
• Layout – Defines the placement of the graphical control in the above defined layout of the entire dashboard. Also allows you to specify whether you want a Legend or not.
• StartRow – Enter a value for the row where the control will display in.
• StartColumn – Enter the value for the column where the control will display in.
• Rowspan – Enter a value for how many the rows the control will use.
• Columnspan – Enter a value for how many columns the control will use.
• dataProvider – The data provider is the location responsible for obtaining the data from the web service that hosts the data and representing the data that the control understands. Each widget can have its own data provider and each data provider has its configuration requirements. The following parameters are related to dataProviders:
• Name – Type the name of dataprovider
• PrivateConfig – The control specific parameters required for data provider
• style – This section defines the look of the control. The parameters vary depending on the type of control. String parameters can be customized for multi-language support by use of a key-value pair.
• Config – This section only displays in the gauge control chart. It sets the parameters for the start and end values of the gauge’s value range, as well associating value with colors.

 

BaseURI

Refers to the web service interface path where the data is obtained. This path can point to a local or remote computer.