D3 Visualization Overview

About Bar Charts

The following are some details regarding bar chart controls:

• Vertical and horizontal charts options available.
• The dashboard GMS Projects > Websites > Website > [dashboard name] > Configs contains the following files related to bar chart controls:
• Example bar configuration files: Horizontal_dashboardconfig.JSON and Vertical_dashboardconfig.JSON
• In the > Styles folder, the VerticalBarChartStyle.JSON and HorizontalBarChartStyle.JSON files contains all the styles related to bar charts.
• Single Y and X-axis supported.
• Legend and Title visibility can be turned on (True) or off (False).

About Gauge Controls

The gauge control supports live, dynamic data updates from the cloud or the Web Service Interface. Some of the parameters for customizing the gauge include start and end values of the gauge range, the major and minor interval values, and the arc (size) of the control.

The following are some details regarding gauge controls:

• If a gauge is composed of five sections, and only three colors are provided, the last two segments use the last color specified.
• A color value must be assigned for each sector.
• The dataProvider values define the placement of the gauge needle.
• The parameter for the privateConfig value must either be a concrete value or substitution key:
• Concrete value: "privateConfig": {"pointName": "Analog_Input_1"}
• Substitution value: "privateConfig": {"pointName": "$pName$"}
• Controls are dynamic using Signal-R^TM or poll based depending on the data provider. The polling rate is configurable per gauge. The polling interval is: Time Interval.
• The dashboard GMS Projects > Websites > Website > [dashboard name] > Configs contains the following files related to gauge controls:
• An example gauge configuration file: gauge_dashboard
• In the … > Styles folder, the GaugeStyle.JSON file contains all the styles related to a gauge.
• Positive and negative values are supported.
• The Config parameter is unique to the gauge control. It allows you to set the start and end values of the gauge’s value range, as well as value ranges to associated with colors:
• "startValue": "0", - Enter the starting value of the gauge control. In this example, the start is “0”.
• "endValue": "100", - Enter an ending value of the gauge control. In this example, the end value is “100”.
• "colorlimits": - Specify colors and their value ranges. For each color you want on the gauge, tpye the Color and the value Threshold. See the gauge_dashboardconfig file for an example.
• The following layout values are unique to the gauge control:
• value-visible – Set to True or False.
• value-position - Set to middle.

About Grouped Bar Charts

The following are some details regarding grouped bar chart controls:

• dataProvider values determine the bar chart levels.
• Controls are dynamic, unless the data provider source does not support dynamic updates. If poll based, the polling rate is configurable per bar chart.
• The bar chart is available in two layouts:
• Vertical Bar Chart: Bars are drawn vertically parallel to Y-axis
• Horizontal Bar Chart: Bars are drawn horizontally parallel to X- axis
• Single Y and X-axis are supported.
• Legend and Title visibility can be turned on (True) or off (False).
• Any field in a report can be represented in the bar chart.
• Bars for the bar chart are grouped based on the category.

About Pie Charts

A pie chart allows you to represent data with multiple sections. In order to obtain different colors for each section, a start and end color are defined and the colors between the two ranges are calculated. Each section, therefore, is a gradation of the two defined start and colors.

The following are some details regarding pie chart control:

• The data provider values determine the section sizes.
• Controls are dynamic (Signal-R^TM) or poll based depending on the data provider. The polling rate is configurable per pie chart.
• Values that are too large to fit in a section of the pie are displayed outside the pie section.
• The dashboard GMS Projects > Websites > Website > [dashboard name] > Configs contains the following files related to pie chart controls:
• An example gauge configuration file: pie_dashboard
• In the Styles folder, the PieChartStyle.JSON file contains all the styles related to a pie chart.
• The section colors are based on the Chart-startColor and the chart-endColor.
• Legend and Title visibility can be turned on (True) or off (False).

About Trend Series Charts

A trend series allows you to use an X and Y-axis to plot data. The following are some details regarding trend series chart controls.

• The dataProvider values determine the trend series lines.
• The parameter for the privateConfig value must either be a concrete value or substitution key:
• Concrete value: “seriesidparam”:”Point_ID_1”,
• Substitution value: "seriesidsparam":"$trendSeriesIds$",
• If there is no range specified in the Rule Editor’s To and From fields during configuration, the data from the project’s History Database (HDB) is used to populate the trend series.
• The interval displayed on the chart, depend on the interval criteria provided. Each interval displays the Min. and Max of the COV for that interval.
• The navigation chart at the bottom of a trend series allows you to zoom in and out of sections.
• The dashboard GMS Projects > Websites > Website > [D3 dashboard name] > Configs contains the following files related to trend series controls:
• An example trend series configuration file: line_dashboard
• In the Styles folder, the TrendSeriesStyle.JSON file contains all the styles related to a trend series.
• Legend and Title visibility can be turned on (True) or off (False).
• Single X axis and single or multiple Y axis are adjusted according to data provider values. If there is a different value range, multiple Y axis are used. If same or similar value range, single or combined Y axis is used.
• Zooming allows for static and dynamic updates:
• Static Zooming: Zoom in/out on data already present in the chart. Click the slider to zoom in/out. No new data is retrieved.
• Dynamic Zooming: Data is refreshed and new data retrieved, if scrolling out. You can also scroll outside the configured To/From timeline ranges. Click anywhere in the chart, and then press CTRL + mouse wheel to refresh and pull in new data as you zoom in/out of the chart.

About Multiple Trend Series Charts

A multi Y-axis trend series allows you to use the Y-axis to plot data for multiple data ranges. The following are some details regarding multiple trend series chart controls:

• The dataProvider values determine the trend series lines.
• The parameter for the privateConfig value must either be a concrete value or substitution key:
• Concrete value: “seriesidparam”:”Point_ID_1, Point_ID_2”,
• Substitution value: "seriesidsparam":"$trendSeriesIds$",
• The navigation chart at the bottom of a trend series allows you to zoom in and out of sections.
• Legend and Title visibility can be turned on (True) or off (False). Legend positions for this chart are limited to Top and Bottom only.
• The number of Y-axis displayed depends on the number of points and the range in the data’s value:
• If you have multiple points each with a different value range, a Y-axis is drawn for each range.
• If two points have the same data range, they are combined into a single axis.

Default D3 Visualization Properties