Customizing a Dashboard Layout

  1. You have a D3 visualization dashboard URL that you created with the Desigo CC web application.
  2. 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.
  2. Click the appropriate website folder, and then click the folder named after the dashboard application and click configs.
  3. Right-click the dashboardconfig.json file and open it with an XML editor, such as Notepad.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. Config – (Gauge control only) Set the gauge configuration properties (start, end color, and threshold values. For more information see About Gauge Controls.
  9. 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.
  10. 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.
  11. Click Save.