Visualization Library DELMIA Apriso 2017 Implementation Guide

Transcription

1 Visualization Library DELMIA Apriso 2017 Implementation Guide 2016 Dassault Systèmes. Apriso, 3DEXPERIENCE, the Compass logo and the 3DS logo, CATIA, SOLIDWORKS, ENOVIA, DELMIA, SIMULIA, GEOVIA, EXALEAD, 3D VIA, BIOVIA, NETVIBES, and 3DXCITE are commercial trademarks or registered trademarks of Dassault Systèmes or its subsidiaries in the U.S. and/or other countries. All other trademarks are owned by their respective owners. Use of any Dassault Systèmes or its subsidiaries trademarks is subject to their express written approval.

2 Visualization Library DELMIA Apriso 2017 Implementation Guide 2 Contents 1 Introduction 4 2 Standard Operation Usage Overview Synchronous Operations Asynchronous Operations User-Defined Data Operation Interface Operation Chart Data Standard Operation Parameters 13 3 Standard Operations for Charts and Gauges Area Bar Bubble BubbleLine Bullet Combo Gauges Line Pareto Pie SPC 39 4 Error Handling 41 5 Modifying Advanced Options Using the HTML Layout Editor Axis Chart Color Data Gauge Grid Legend Localization Pareto Pie Region Target / Thresholds Tooltip X-Axis Y2-Axis Y-Axis 57 6 References 60

3 Visualization Library DELMIA Apriso 2017 Implementation Guide 3 Figures Figure 1 Area chart Operation 28 Figure 2 Area chart in runtime 29 Figure 3 Bar chart Operation 29 Figure 4 Bar chart in runtime 30 Figure 5 Bubble chart Operation 31 Figure 6 Bubble chart in runtime 31 Figure 7 BubbleLine chart Operation 32 Figure 8 BubbleLine chart in runtime 32 Figure 9 Bullet chart Operation 33 Figure 10 Bullet chart in runtime 33 Figure 11 Combo chart Operation 34 Figure 12 Combo chart in runtime 34 Figure 13 Circular chart Operation 35 Figure 14 Circular gauge in runtime 35 Figure 15 Linear gauge Operation 35 Figure 16 Linear gauge in runtime 36 Figure 17 State indicator gauge Operation 36 Figure 18 Line chart Operation 37 Figure 19 Line chart in runtime 37 Figure 20 Pareto chart Operation 38 Figure 21 Pareto chart in runtime 38 Figure 22 Pie chart Operation 39 Figure 23 Pie chart in runtime 39 Figure 24 SPC chart Operation 40 Figure 25 SPC chart in runtime 40

4 Visualization Library DELMIA Apriso 2017 Implementation Guide 4 1 Introduction Abstract This document describes the configuration options of the DELMIA Apriso Visualization Library via Standard Operations and HTML Layout Editor in Process Builder. The document s audience is experienced Process Builder Developers and Process Authors who will be working with the visualization Standard Operations as well as with the HTML Layout Editor in order to configure charts and gauges. The scope of the document includes an overview of the Visualization Library, information on the Standard Operations being provided in the solution, and details on using HTML Layout Editor to modify charting behavior. Solution Overview The main features of the DELMIA Apriso Visualization Library are: Once configured, the graphics are available to be embedded within Process Builder flows Charts can be refreshed on the DELMIA Apriso client, and the user can drill through the charts The visualizations are made available through Screen Framework, and the graphics have the configured time validation logic enabled through Screen Framework A line or bar chart can be styled as a Sparkline Exporting to Excel and as a bitmap is enabled When printed, the charts will scale to fit on a single page Solution Configuration Overview There are four methods for configuring the Visualization Library s charts and gauges: Visualization Business Control This is for Plant Engineers who want quick and easy access to visualizations For details on using the Visualization Business Control, see the Process Builder Online Help Standard Operations This is for Process Builder Developers and Process Authors The rest of this Implementation Guide describes this part of the Visualization Library solution For details, start with 3 Standard Operations for Charts and Gauges jquery UI widget This is for a JavaScript Programmer and can be used to extend the existing Standard Operations delivered with this solution or create new Standard Operations For details, start with 5 Modifying Advanced Options Using the HTML Layout Editor For further details, please contact DELMIA Apriso Support

5 Visualization Library DELMIA Apriso 2017 Implementation Guide 5 Self-Service Dashboard A dashboard designer is available within the DELMIA Apriso Desktop Client The data source can be specified, trends can be identified with drilldown and data filtering, and customization can be performed For more information, see the Dashboard Builder Implementation Guide Visualizations configured via the Business Control are bound to data sources in order to ease usability. However, the user can build off of the charts delivered in the product by using the jquery widget and the charting library. Following the jquery UI widget design pattern, an intermediate JavaScript jquery Developer can add additional visualizations (e.g., from the D3 graphics library, with its numerous online examples). Standard Operations provide additional flexibility without the need for strong JavaScript skills.

6 Visualization Library DELMIA Apriso 2017 Implementation Guide 6 2 Standard Operation Usage 2.1 Overview The Standard Operations for charts and gauges can be used most easily by leveraging the Sub Operation Function in Process Builder. When adding a Sub Operation, a dialog with a list of available Standard Operations is presented. This list can be filtered to only show the charts and gauges from the Visualization Library by filtering by VIS. : Each chart and gauge type can be used synchronously or inline (for details, see 2.2 Synchronous Operations). Also available for each chart and gauge type is a set of asynchronous Standard Operations (for details, see 2.3 Asynchronous Operations). Standard Operations with names ending in Async and Interface are used together in a client-server fashion. Async Operations are responsible for rendering the user interface. Interface Operations are responsible for passing data to the user interface asynchronously. In addition to configuring the Inputs in chart and gauge Standard Operations in the traditional way in Process Builder, values can also be inputted from other Functions. The runtime

7 Visualization Library DELMIA Apriso 2017 Implementation Guide 7 behavior associated with these configuration settings are described in 3 Standard Operations for Charts and Gauges. 2.2 Synchronous Operations A synchronous chart gets its data inline (or inputted) from a previous Function. This is a typical Process Builder technique, wherein the data is populated on a server and sent to the browser with the Web UI components. For an inline Operation, the Process Builder Developer simply wires in the data (for details, see 2.4 Chart Data), as in this example: The data for the AreaChartSQL Function above looks like this in the SQL Query Editor:

8 Visualization Library DELMIA Apriso 2017 Implementation Guide 8 The DataKey value is used to group the DataX and DataY values in a series. Unique x-axis data can be supplied for each series. However, for the best results, the same x-axis values should be used for each series. Series label values are controlled by the serieskey and the seriesname Inputs. The serieskey Input corresponds to the DataKey value. The seriesname Input is used in the Series Label. This simple configuration and dataset produces the following area chart visualization in the browser:

9 Visualization Library DELMIA Apriso 2017 Implementation Guide Asynchronous Operations Each chart has an asynchronous Standard Operation and associated interface Standard Operation. These two Standard Operations work together with a user-defined data Standard Operation for each chart instance. The result supports an AJAX-style refresh behavior in the browser at runtime. Asynchronous charts do not receive data until after the browser receives and loads the Web components of its Standard Operation. Once this occurs, the browser requests data from the server through use of the interface Standard Operation that executes on the server. The interface Operation in turn calls a user-defined data Operation also hosted on the server that will typically get its dataset from a database. This data is then passed back to the interface Operation, which then passes the data to the Web components of the asynchronous Operation. In addition, asynchronous Operations can be configured to be updated at intervals controlled via the updatetimer Input. All the Standard Operations that end with Async are intended for asynchronous use and are best configured through use of the Sub Operation Function. For asynchronous charts, a reference to an Operation that supplies the data is required. No inline data from the Standard Operation is supplied. The data Operation must have an External Input named operationcontext, which accepts JSON for containing the data filter parameters. In addition, it must supply data to the External Outputs named datax, datay, datakey, serieskey, and seriesname (for more information, see User-Defined Data Operation). The name of the data Operation is provided to the operationcode Input. Non-data Inputs of the Async Operations are configured just like their synchronous counterparts. In the following example, the same chart is rendered in the browser as in the example in 2.2 Synchronous Operations:

10 Visualization Library DELMIA Apriso 2017 Implementation Guide 10 The first Function in the image above (InputToJSON) is needed to generate the JSON key value pairs. This Function is an EncodeDynamicParameters Business Component, which outputs the following JSON: {"DataKey":"AreaChart". The DataKey Input with the constant value of AreaChart produces the JSON through its EncodedParameters Output: The JSON data makes it to the browser by being passed into the operationcontext Input of the Async Operation.

11 Visualization Library DELMIA Apriso 2017 Implementation Guide 11 The JavaScript in the Async chart Operation sends this JSON key value pair to the server, which ultimately makes it to the Input of the data Operation User-Defined Data Operation The following example illustrates a typical Step in a one-step Async data Operation: The first Function (PassOperationContext) is an Input-to-Output Function with the Input configured as follows: The Async data Operation must accept an External Input of the Text type named operationcontext. The data passed into this Operation could be as simple as the following: {"DataKey":"AreaChart". This is JSON in its simplest form with a single key value pair, and in this example, the key is DataKey and the value is AreaChart. The second Function above (JSONToOutput) is a Decode Dynamic Parameters Business Component that receives the {"DataKey":"AreaChart" JSON string and outputs the AreaChart value on the DataKey Output. This Output is wired to the AreaChartSQL Function, which passes it into SQL statement parameter, as seen in the the SQL Query Editor:

12 Visualization Library DELMIA Apriso 2017 Implementation Guide 12 The SQL Function generates the data shown above, which is then passed to the OperationOutput Function. Finally, the data from the user-defined data Operation needs to be exposed via External Outputs, which are passed to the interface Operation Interface Operation Every Async Operation is delivered with an associated interface Operation. For example, the interface Operation for the area chart is VIS.AreaChartInterface, and this image presents the one Step in this Operation: This Operation gets called from the browser across the network and receives the name of the user-defined data Operation and the operationalcontext JSON. Finally, the CallDataOperations Function invokes the data Operation and returns its values to the browser asynchronously.

13 Visualization Library DELMIA Apriso 2017 Implementation Guide Chart Data All the Standard Operations receive their data through three Inputs: DataX, DataY, and DataKey. All three of these Inputs are List of [Type] Inputs, wherein [Type] is a Process Builder data type. Values sharing the same ordinal position on these three "List of" Inputs make up a single record. Records with the same DataKey will be used as a single series. The DataX values of each series are typically identical. This is a small result set which will produce two series in XY type charts: 2.5 Standard Operation Parameters The Standard Operations are delivered with a predefined set of Inputs specific to the chart type. The Standard Operation Functions have Inputs and Outputs added in pairs. The parameters below are available for configuration in various Standard Operations. Parameter axisdescription Description This is an optional Input. If used, it must be an array of length 3. Each item in the array is the name, title, or description of the corresponding axis (X, Y, Z). Bubble inline/async BubbleLine inline Async bulletbarwidth The width of the bar. A valid value is a decimal from 0 to 1 (with 1 being 100% and 0 being 0%). Bullet inline/async bulletmax bulletmin bullettarget The maximum value for the quantitative scale. Bullet inline/async The minimum value for the quantitative scale. Bullet inline/async The target value for the bar. Bullet inline/async

14 Visualization Library DELMIA Apriso 2017 Implementation Guide 14 bulletvalue category charttitle colorpattern colorthresholds colorthresholdformat The value of the bar. This Input is a single value. Bullet inline Each item is a bar on the Pareto chart. This Input must be an array. Pareto inline The title of the chart. Area inline/async Bar inline/async Bubble inline/async BubbleLine inline/async Bullet inline/async Combo inline/async Circular Gauge inline/async Linear Gauge inline/async State Indicator inline/async Line inline/async Pareto inline/async Pie inline/async SPC inline/async A list of color for defining the color of the bar and the region for the corresponding colorthresholds. Bullet inline/async Circular Gauge inline/async Linear Gauge inline/async A list of decimal for defining the value at which the bar will change color to the corresponding colorpattern. Bullet inline/async Circular Gauge inline/async Linear Gauge inline/async Determines if the threshold value for the gauge is an absolute value or a percentage. The valid values are: Value Percentage Circular Gauge inline/async Linear Gauge inline/async

15 Visualization Library DELMIA Apriso 2017 Implementation Guide 15 cutoff datadescription datakey datavalue datax The cutoff for vital few. This must be a number between 0 and 100. If left blank, the default of 80 will be used. The unit for this Input is percentage. Pareto inline The description, name, or title of the data point (formed from items in datax, datay, and dataz of the same index). Must be an array matching the length of the datax, datay, dataz, and datakey keys. This Input is optional. If it is used, the description will show in place of the seriesname on the tooltips. Bubble inline BubbleLine inline Designates the series to which the data point (which is formed by datax and datay of the same index) belongs. This Input is required when the data contains multiple series, and it is optional if the data is single series. Area inline Bar inline Bubble inline BubbleLine inline Combo inline Line inline Each item in the value for the corresponding slice in serieskey. This Input must be an array. Pie inline The X value of the data points. Must be an array. Every item in datax forms a data point with items of the same index in datay and the optional datakey. Area inline Bar inline Bubble inline BubbleLine inline Combo inline Line inline

16 Visualization Library DELMIA Apriso 2017 Implementation Guide 16 datay dataz digitprecision drilldownname The Y value of the data points. Must be an array. Every item in datay forms a data point with items of same index in datax and the optional datakey. Area inline Bar inline Bubble inline BubbleLine inline Combo inline Line inline The Z value of the data points, which represents the area of a bubble. Must be an array. Bubble inline BubbleLine inline Determines the number of digits after the decimal point that will be shown. SPC inline/async This optional input enables the drill-down button to appear inside of the pop-up that is launched when clicking on a chart point. If the input is populated with a string value that value will be used as the button label literal. If no string value is provided the button will not appear on the pop-up. SPC inline/async

17 Visualization Library DELMIA Apriso 2017 Implementation Guide 17 enableprint gaugebarwidth gaugemax gaugemin gaugeunits gaugevalue This Input determines if the print menu is accessible or not. The valid values are: True False (this is the default) Area inline/async Bar inline/async Bubble inline/async BubbleLine inline/async Bullet inline/async Combo inline/async Circular Gauge inline/async Linear Gauge inline/async Line inline/async Pareto inline/async Pie inline/async SPC inline/async The width of the gauge bar in pixels. The valid values are decimals greater than or equal to 0. Circular Gauge inline/async The maximum value for the gauge. Circular Gauge inline/async Linear Gauge inline/async The minimum value for the gauge. Circular Gauge inline/async Linear Gauge inline/async The unit of gaugevalue. Circular Gauge inline/async Linear Gauge inline/async The value to be displayed on the gauge. Circular Gauge inline Linear Gauge inline

18 Visualization Library DELMIA Apriso 2017 Implementation Guide 18 isstacked linetype linetypes maxradius Determines if a stacked area chart will be generated or not. The valid values are: True False (this is the default) Area inline/async Bar inline/async Combo inline/async This Input tells the chart what type of line to use. The valid options are: Line a standard point-to-point straight line Spline a curve Step a stepwise graph This Input is optional. Line inline/async This is an array that tells the chart what type of line to use for series in SeriesKey of the same index. The valid options are: Line a standard point to point straight line Spline a curve Step a stepwise graph This Input is optional. Area inline The radius of the largest bubble on the chart. Any data point calculated to have a bigger radius than maxradius will be lowered to maxradius. If undefined, a default value will be used. Bubble inline/async BubbleLine inline/async

19 Visualization Library DELMIA Apriso 2017 Implementation Guide 19 maxvalue minradius minvalue operationcode This is an optional Input that defines the upper limit on the data value. A data point that has a value equal to maxvalue will automatically show up on the chart with a radius equal to maxradius. A data point that has a higher value than maxvalue will have its radius lowered to maxradius. If maxvalue is undefined, the largest data point will automatically be chosen for maxvalue. Bubble inline/ Async BubbleLine inline/ Async The radius of the smallest bubble on the chart. Any data point calculated to have a radius smaller than minradius will be increased to minradius. If undefined, a default value will be used. Bubble inline/async BubbleLine inline/async This is an optional Input that defines the lower limit on the data value. A data point that matches minvalue will automatically be scaled to a radius equal to minradius. A data point with a value smaller than minvalue will have its radius increased to minradius. If minvalue is left undefined, the default value of 0 will be used. Bubble inline/async BubbleLine inline/async The name of the Operation that supplies data for the chart. Area Async Bubble Async BubbleLine Async Bullet Async Circular Gauge Async Combo Async Line Async Linear Gauge Async Pareto Async Pie Async SPC Async

20 Visualization Library DELMIA Apriso 2017 Implementation Guide 20 operationcontext operationrevision regiontickfit rotated Takes a JSON object and passes that to the data Operation. This Input is optional. Area Async Bubble Async BubbleLine Async Bullet Async Circular Gauge Async Combo Async Line Async Linear Gauge Async Pareto Async Pie Async The revision number of the Operation that supplies data for the chart. Area Async Bubble Async BubbleLine Async Bullet Async Circular Gauge Async Combo Async Line Async Linear Gauge Async Pareto Async Pie Async SPC Async The default value is False. Bullet inline/async Determines if the bar runs horizontally or vertically. The valid values are: True False (this is the default) Linear Gauge inline/async

21 Visualization Library DELMIA Apriso 2017 Implementation Guide 21 serieskey This is the list of unique datakeys. It tells the chart how many series are in the data and the designation of each series. serieskey does not accept special characters, but seriesname does. seriesname Area inline Bar inline/async Bubble inline BubbleLine inline Combo inline Line inline This Input also appears in the pie chart (inline). In this case, the Input must be an array, and each item is a slice on the pie chart. This is an optional Input that is the display name of the series designated by the item of the same index in serieskey. If seriesname is left empty, serieskey will be shown in the tooltip and the legend instead. seriesname accepts special characters, while serieskey does not. Area inline Bar inline/async Bubble inline BubbleLine inline Combo inline Line inline Pie inline

22 Visualization Library DELMIA Apriso 2017 Implementation Guide 22 seriestype showdatalabels showlabel This tells the chart whether the corresponding series uses a bubble or line. Must be an array. The valid options are: Line Spline Step Area Area-Spline Area-Step Bar Scatter Area-Line BubbleLine inline Combo inline This Input will determine whether labels showing the y-value of the corresponding data point will appear on the point. The valid values are: True False (this is the default) Area inline/async Bar inline/async Combo inline/async Line inline/async Pareto inline/async The default value is False. Circular Gauge inline/async

23 Visualization Library DELMIA Apriso 2017 Implementation Guide 23 showlegend ShowSliceLabelThreshold showspeclimits showtooltip showtooltips SPCChartID This Input will determine if the legend is visible or not. The valid values are: True False Area inline/async Bar inline/async Bubble inline/async BubbleLine inline/async Combo inline/async Line inline/async Pareto inline/async SPC inline/async Must be a decimal value between 0 and 1. Any slices on the pie chart that have a slice value to total ratio higher than the threshold will get a label shown on the slice. Pie inline/async Determines if the specification limits will be shown on the chart or not. The valid values are True and False (False is the default). SPC inline/async The default value is False. Bullet inline/async Circular Gauge inline/async Linear Gauge inline/async Determines if a tooltip will show up when the user hovers the mouse pointer over a data point. The valid values are True and False (this is the default). Area inline/async Bubble inline/async BubbleLine inline/async Combo inline/async Line inline/async The ID of the desired SPC chart in the database. SPC inline/async

24 Visualization Library DELMIA Apriso 2017 Implementation Guide 24 stateindicators statenames statevalues timedisplayformat toptrivialmany The list of image locations. The image will be shown for the corresponding statevalue. State Indicator inline/async This Input is a list of display names for the statevalues. State Indicator inline/async Defines the list of states. State Indicator inline/async Determines how the chart will display the date labels on the x-axis. The valid formats are: L l LL ll LLL lll LLLL llll LT LTS Any custom variation involving M, D, Y, h, m, and s (for example, YYYY-MMM [e.g., 2015-Sep], MM- DD hh:mm [e.g., :05]) Area inline/async Bar inline/async Bubble inline/async BubbleLine inline/async Combo inline/async Line inline/async SPC inline/async The purpose of this optional Input is to reduce clutter on the chart by only showing a fixed number of the trivial many. The Input must be an integer greater than or equal to 0 (e.g., if a value of 5 is used, then only the largest 5 trivial many will be shown alongside the vital few ).\ Pareto inline/async

25 Visualization Library DELMIA Apriso 2017 Implementation Guide 25 updatemode updatetimer value xaxisdateformat This Input determines the kind of update. The valid values are: Clear clears the chart of all data points Flow merges new data with the old data Default new data overwrites the old data Area Async BubbleLine Async Combo Async This Input determines how often the chart refreshes the data. The value is in seconds. Area Async BubbleLine Async Bullet Async Circular Gauge Async Combo Async Linear Gauge Async Line Async Pie Async SPC Async Each item is the value for the corresponding bar in the category Input. This Input must be an array. Pareto inline This is a required Input if the value of xaxistype is DateTime. This needs to describe the time format of xaxistype, so the chart can parse datax correctly (e.g., a value of %Y-%m-%d describes a format such as ). Area inline/async Bar inline/async Bubble inline/async BubbleLine inline/async Combo inline/async Line inline/async SPC inline/async xaxislabel This is an optional Input that will enable a title for x- axis. SPC inline/async

26 Visualization Library DELMIA Apriso 2017 Implementation Guide 26 xaxistickfit xaxistitle xaxistype yaxislabel Determines how the tick marks on the x-axis are placed. The valid values are: True the ticks will only be placed where a data point exists for the x value False the graph will space tick marks out evenly (this is the default) Area inline/async Bar inline/async Bubble inline/async BubbbleLine inline/async Combo inline/async Line inline/async Pareto inline/async This is an optional Input which will enable a title for the x-axis to appear on the chart. Area inline/async Bar inline/async Bubble inline/async BubbleLine inline/async Combo inline/async Line inline/async Describes the data type of the x-axis. The valid values are: numeric categories datetime Area inline/async Bar inline/async Bubble inline/async BubbleLine inline/async Combo inline/async Line inline/async SPC inline/async This is an optional Input that will enable a title for the y-axis. SPC inline/async

27 Visualization Library DELMIA Apriso 2017 Implementation Guide 27 yaxistitle y2axistitle This an optional Input which will enable a title for the y-axis to appear on the chart. Area inline/async Bar inline/async Bubble inline/async BubbleLine inline/async Combo inline/async Line inline/async This is an optional Input which will enable a title for the y2-axis to appear on the chart. Area Async Bar Async Bubble Async BubbleLine Async Combo Async Line Async

28 Visualization Library DELMIA Apriso 2017 Implementation Guide 28 3 Standard Operations for Charts and Gauges 3.1 Area Area charts are line charts that display a shaded region between the line and x-axis. Area charts are configured with use of the following Standard Operations: VIS.AreaChart VIS.AreaChartAsync VIS.AreaChartInterface Figure 1 Area chart Operation

29 Visualization Library DELMIA Apriso 2017 Implementation Guide 29 Figure 2 Area chart in runtime 3.2 Bar Bar charts present rectangular bars. The heights of these bars are proportional to the values being represented. Bar charts are configured with use of the following Standard Operations: VIS.BarChart VIS.BarChartAsync VIS.BarChartInterface Figure 3 Bar chart Operation

30 Visualization Library DELMIA Apriso 2017 Implementation Guide 30 Figure 4 Bar chart in runtime 3.3 Bubble Bubble charts display two to three dimensions (as in, coordinates, color, and size) of data. Bubble charts are configured with use of the following Standard Operations: VIS.BubbleChart VIS.BubbleChartAsync VIS.BubbleChartInterface

31 Visualization Library DELMIA Apriso 2017 Implementation Guide 31 Figure 5 Bubble chart Operation Figure 6 Bubble chart in runtime 3.4 BubbleLine BubbleLine charts are similar to combo charts but support only bubble and line charts. BubbleLine charts are configured with use of the following Standard Operations: VIS.BubbleLineChart VIS.BubbleLineChartAsync

32 Visualization Library DELMIA Apriso 2017 Implementation Guide 32 VIS.BubbleLineChartInterface Figure 7 BubbleLine chart Operation Figure 8 BubbleLine chart in runtime 3.5 Bullet Bullet charts present a single bar with a target value and quantitative regions.

33 Visualization Library DELMIA Apriso 2017 Implementation Guide 33 Bullet charts are configured with use of the following Standard Operations: VIS.BulletChart VIS.BulletChartAsync VIS.BulletChartInterface Figure 9 Bullet chart Operation Figure 10 Bullet chart in runtime 3.6 Combo Combo charts combine the features of bar charts and line charts, and they enable displaying data series in different ways (e.g., with columns, lines, area lines). Combo charts are configured with use of the following Standard Operations: VIS.ComboChart VIS.ComboChartInterface VIS.ComboChartAsync

34 Visualization Library DELMIA Apriso 2017 Implementation Guide 34 Figure 11 Combo chart Operation Figure 12 Combo chart in runtime 3.7 Gauges There are different types of gauges: Circular gauges display values on a circular scale Linear gauges display values on a linear scale (like a thermometer) State indicator gauges display the predefined state of a value Gauges are configured with use of the following Standard Operations: VIS.CircularGauge VIS.CircularGaugeAsync VIS.LinearGaugeAsync

35 Visualization Library DELMIA Apriso 2017 Implementation Guide 35 VIS.LinearGaugeInterface VIS.StateIndicator VIS.StateIndicatorAsync VIS.StateIndicatorInterface Figure 13 Circular chart Operation Figure 14 Circular gauge in runtime Figure 15 Linear gauge Operation

36 Visualization Library DELMIA Apriso 2017 Implementation Guide 36 Figure 16 Linear gauge in runtime Figure 17 State indicator gauge Operation 3.8 Line Line charts display values connected by line segments. Line charts are configured with use of the following Standard Operations: VIS.LineChart VIS.LineChartAsync VIS.LineChartInterface

37 Visualization Library DELMIA Apriso 2017 Implementation Guide 37 Figure 18 Line chart Operation Figure 19 Line chart in runtime 3.9 Pareto Pareto charts contain both bars (representing values in a descending order) and lines with the values (representing the cumulative total). The bars are sorted in descending order, and the value for all the bars is summed to create a total for the entire data set being shown. Iterating over each bar, a running total of the values is kept. If the running total is less than a certain percentage (the cutoff value) of the grand total, then that bar belongs to the vital few. Otherwise, the bar is in the trivial many. Pareto charts are configured with use of the following Standard Operations: VIS.ParetoChart VIS.ParetoChartAsync

38 Visualization Library DELMIA Apriso 2017 Implementation Guide 38 VIS.ParetoChartInterface Figure 20 Pareto chart Operation Figure 21 Pareto chart in runtime 3.10 Pie Pie charts divide data values into slices. Pie charts are configured with use of the following Standard Operations: VIS.PieChart VIS.PieChartAsync VIS.PieChartInterface

39 Visualization Library DELMIA Apriso 2017 Implementation Guide 39 Figure 22 Pie chart Operation Figure 23 Pie chart in runtime 3.11 SPC Statistical process control (SPC) charts present measurements from variations of process map points. With the Standard Operation below, the user can visualize the SPC data structures. There can be one chart on one page or two charts on one page (in which case the x-axis is synchronized for both charts). SPC charts are configured with use of the following Standard Operations: VIS.SPCAddNote VIS.SPCChart VIS.SPCChartAsync VIS.SPCChartData VIS.SPCChartInterface VIS.SPCRemoveNote

40 Visualization Library DELMIA Apriso 2017 Implementation Guide 40 Figure 24 SPC chart Operation Figure 25 SPC chart in runtime

41 Visualization Library DELMIA Apriso 2017 Implementation Guide 41 4 Error Handling After configuring a chart, any errors in the configuration will cause this symbol to be presented at runtime:. Clicking this symbol will invoke the Error dialog with specific details on the issue, as can be seen in this example: The user should receive enough information to fix the issue within the configuration of the chart or gauge. Clicking Ok takes the user back to the visualization with the error symbol:

42 Visualization Library DELMIA Apriso 2017 Implementation Guide 42 5 Modifying Advanced Options Using the HTML Layout Editor Advanced visualization options can be overridden and even exposed as a Standard Operation Input from within the HTML Layout Editor. It is recommended that all changes to Visualization Standard Operations be made on duplicated Operations. This will ensure the integrity of the Operations shipped within the DELMIA Apriso standard product. To access one or more advanced options, open a duplicated visualization Operation, drill down into the Step containing the ScreenInterface Function, and click the HTML Layout Editor tab. For this example, modify a duplicated VIS.AreaChart Operation and set the Tick Label Rotate option (for details, see Tick Label Rotate): x: { tick: { rotate: 0 This shows that the rotate option needs to be placed within tick of x found in axis. In the HTML Layout Editor, a <Script> tag can be found. The contents of the script tag begins with the following JavaScript: $(function() { $('.visualization', '.' + $Context.name).areaChart( The JSON comes next. In the Tick Label Rotate example, you can see that the rotate option needs to be under axis.x.tick of the JSON. An inspection of the existing JSON of VIS.AreaChart will reveal that an axis.x.tick hierarchy already exists: x: {,, y: {, tick: { fit: $Context.inputs.xAxisTickFit, type: $Context.inputs.xAxisType, label : { text: $Context.inputs.xAxisLabel, label: { text: $Context.inputs.yAxisLabel, For this example, the rotate: 45 configuration needs to be added into the existing axis.x.tick section:

43 Visualization Library DELMIA Apriso 2017 Implementation Guide 43 x: {,, y: {, tick: { fit: $Context.inputs.xAxisTickFit, rotate: 45, type: $Context.inputs.xAxisType, label : { text: $Context.inputs.xAxisLabel, label: { text: $Context.inputs.yAxisLabel, Note that the text rotate: 45 has been added. A value of 45 will rotate the x-axis tick label 45 degrees. Also note the comma on the previous line that is used to separate the previous entry of fit from the new entry. For options that do not already have a section defined in the JSON, the Process Builder Developer will need to add the appropriate JSON hierarchy. Using the $Context.inputs syntax, the value can be exposed through an Input onto the Standard Operation. 5.1 Axis X-Axis Description The description of the x-axis values. bubble: { x: { Y-Axis Description description: 'Data-X' The description of the y-axis values. bubble: { y: { Z-Axis Description description: 'Data-Y' The description of the z-axis values. bubble: {

44 Visualization Library DELMIA Apriso 2017 Implementation Guide 44 z: { description: 'Data-Z' 5.2 Chart Animation Duration The duration (in milliseconds) of the animations. chart: { animation: { duration: 350 Chart Title The title of the chart. chart: { title: Chart Title Chart Title Position The position for the title of the chart. The values can be: center, left, right. Colors chart: { titleposition: center The colors for each series. These can be names of hex values. The set of names is available here: chart: { colors: ['color1', 'color2',...] Focus Points Expands the data points upon hovering or focusing. chart: { points: { focus: true

45 Visualization Library DELMIA Apriso 2017 Implementation Guide 45 Printing and Exporting Enables a print and export button at the top-right corner of the chart. This is applicable to all the charts. chart: { printing: { enabled: true Show Points Data points are visible between line segments. chart: { points: { visible: true Sub-Chart The visibility of a sub-chart directly below the main chart with the ability to zoom and pan. Zoom chart: { subchart: false Allows for the ability to zoom and pan the chart. chart: { zoom: false 5.3 Color Background Color Pattern The background color of each segment created by the thresholds. color: { backgroundpattern: ['#9BB5ED', '#ACC1F0', '#C9D6F6'] Bar Color Pattern The bar color when its value corresponds to a particular segment created by the thresholds. color: { barpattern: ['#CC092F', '#FEE050', '#6FBC4B']

46 Visualization Library DELMIA Apriso 2017 Implementation Guide 46 Threshold Unit Threshold values are a percentage of the data range or static values. The values can be: percentage value color: { threshold: { unit: 'percentage' 5.4 Data Flow Points The number of data points kept on the screen when flowing data. Logging data: { flow: { points: 10 Enables debug logging for data sources. Precision data: { source: { logging: false The floating point precision of the data. Stacked data: { precision: 2 Stack each category of data. Throttle series: { stacked: false The number of milliseconds before the repeated data source updates can affect the visualization. Setting this value makes it possible to limit the chart updates so that equipment can send data as far as possible (and the chart will not update with all the data sent). data: {

47 Visualization Library DELMIA Apriso 2017 Implementation Guide 47 source: { throttle: Gauge Bar Width The width of the bar. bar: { width:{ ratio: 1.0 Indicators The URLs or CSS classes specifying the indicators for state values. Labels gauge: { indicators: [] The label that appears when hovering over a state indicator. gauge: { labels: [] Maximum The maximum values of the gauge chart. gauge: { max: 100 Minimum The minimum values of the gauge chart. gauge: { min: 0 Min/Max Label Show labels for the minimum and maximum values at the ends of the gauge. gauge: { label: { show: true

48 Visualization Library DELMIA Apriso 2017 Implementation Guide 48 Orientation The orientation of the gauge. rotated: false Printing and Exporting Enables a print and export button at the top-right corner of the gauge. This is applicable to all gauges except state indicator gauges. gauge: { printing: { enabled: true Units Label The label displayed under the value of the gauge. The expected type is string. gauge: { units: undefined 5.6 Grid Horizontal Axis Lines The horizontal lines shown at specific y-axis values. The property takes an array of objects. This property is optional when defining grid lines. grid: { y: { lines: [{ value: 10, text: 'Target', class: 'target-line' ] Target Line The target line demarcating the target value. The expected type is decimal. grid: { y: { targetline: undefined

49 Visualization Library DELMIA Apriso 2017 Implementation Guide 49 Vertical Axis Lines The vertical lines shown at specific x-axis values. The property takes an array of objects. This property is optional when defining grid lines. grid: { x: { lines: [{ value: 10, text: 'The label', class: 'css-class' ] X-Axis Grid Lines Show the grid lines parallel to the x-axis for each y-axis tick. grid: { y: { visible: true Y-Axis Grid Lines Show the grid lines parallel to the y-axis for each x-axis tick. grid: { x: { visible: true 5.7 Legend Inset The legend that appears inside the chart area or outside of the chart area. legend: { position: { inset: false Inset Location The legend position inside of the chart area. The possible values are: bottom right legend: { position: { location: 'bottom'

50 Visualization Library DELMIA Apriso 2017 Implementation Guide 50 Outset Location The legend position outside of the chart area. The possible values are: top-left top-right bottom-left bottom-right legend: { position: { location: 'top-left' 5.8 Localization Date Label Format The text format dates will have in the chart. localization: { timedisplayformat: 'L' Localization Forces the chart to display in a particular language. localization: { languageid: Pareto Number of Trivial Many The number of trivial many categories to display in the chart. This only applies to Pareto charts. pareto: { topn: Pie Expand Slice Expand the slices when interacting. pie: { expand: true

51 Visualization Library DELMIA Apriso 2017 Implementation Guide 51 Label Visibility Show labels for the slices. For other visibility configurations, it is possible to use visible instead of show. pie: { label: { show: true Slice Label Threshold The threshold percentage value below which the slice labels are hidden. pie: { label: { threshold: Region Regions The shaded areas of the chart. The property takes an array of objects The possible values for axis are: x y y2 The start or end property may be omitted: If only start is used, the region begins at the start value and goes into infinity If only end is used, the region starts at negative infinity and ends at the end value The color value can be a hex value or a named color. regions: [{ axis: 'x', start: 0, end: 10, class: 'css-class', color: 'color' ] The property start or end is optional. If there is only start, the region begins at the start value specified and goes into infinity. If there is only end, the region begins at negative infinity and ends at the end value specified.

52 Visualization Library DELMIA Apriso 2017 Implementation Guide Target / Thresholds The Background Color Pattern, Bar Color Pattern, and Threshold Unit properties are defined in 5.3 Color. Target Line The line demarcating the target value for the gauge. There is no default value for targetline for a linear gauge. grid: { y: { targetline: Tooltip Grouped Group the tooltips with the same x-value. Visible tooltip: { grouped: true Show the detailed tooltips when hovering over a data point. tooltip: { visible: true 5.14 X-Axis Date Format The format of the data if the axis type is DateTime. Label data: { format: { x: '%Y-%m-%d' The label for the axis. The expected type is string. x: { label: { text: undefined

53 Visualization Library DELMIA Apriso 2017 Implementation Guide 53 Label Position The position for the axis label. The possible values are a combination of: outer inner and left center right x: { label: { position: 'outer-center' Label Visibility The visibility for the axis label. x: { label: { visible: true Left Padding The padding to the left of the axis. x: { padding: { left: 0 Max Axis Values The maximum values of the axis. The expected type is decimal. x: { max: undefined

54 Visualization Library DELMIA Apriso 2017 Implementation Guide 54 Min Axis Values The minimum values of the axis. The expected type is decimal. x: { min: undefined Right Padding The padding to the right of the axis. x: { padding: { right: 0 Tick Culling The maximum number of axis ticks to show. It is possible to set the culling for ticks: x: { tick: { culling: 10 If set to true, the ticks will be culled and only the limited tick text will be shown Please note that this option does not hide the tick lines By default culling will be applied to the indexed axis and timeseries axis If set to false, all of the ticks will be shown and by default culling will be applied to the category axis Tick Fitting Make the x-axis ticks fit the data points or make them evenly distributed along the axis. x: { tick: { fit: true

55 Visualization Library DELMIA Apriso 2017 Implementation Guide 55 Tick Label Rotate The rotation of the x-axis tick labels. x: { tick: { rotate: 0 Tick Label Wrap Wrap the axis label text. Visibility x: { tick: { wrap: true Show or hide the entire axis. x: { visible: true 5.15 Y2-Axis Bottom Padding The padding to the bottom of the axis. Label y2: { padding: { bottom: 0 The label for the axis. The expected type is string. y2: { label: { text: undefined

56 Visualization Library DELMIA Apriso 2017 Implementation Guide 56 Label Position The position for the axis label. y2: { label: { position: 'outer-center' Label Visibility The visibility for the axis label. y2: { label: { visible: true Max Axis Values The maximum values of the axis. The expected type is decimal. y2: { max: undefined Min Axis Values The minimum values of the axis. The expected type is decimal. Range y2: { min: undefined The default range of the axis if there is no data to show. The expected type is array of two integers. y2: { defaultrange: undefined

57 Visualization Library DELMIA Apriso 2017 Implementation Guide 57 Top Padding The padding to the top of the axis. Visibility y2: { padding: { top: 0 Show or hide the entire axis. y2: { visible: true 5.16 Y-Axis Bottom Padding The padding to the bottom of the axis. Label y: { padding: { bottom: 0 The label for the axis. The expected type is string. y: { label: { text: undefined Label Position The position for the axis label. y: { label: { position: 'outer-center'

58 Visualization Library DELMIA Apriso 2017 Implementation Guide 58 Label Visibility The visibility for the axis label. y: { label: { visible: true Max Axis Values The maximum values of the axis. The expected type is decimal. y: { max: undefined Min Axis Values The minimum values of the axis. The expected type is decimal. Range y: { min: undefined The default range of the axis if there is no data to show. The expected type is array of two integers. y: { defaultrange: undefined Top Padding The padding to the top of the axis. y: { padding: { top: 0

59 Visualization Library DELMIA Apriso 2017 Implementation Guide 59 Visibility Show or hide the entire axis. y: { visible: true

60 Visualization Library DELMIA Apriso 2017 Implementation Guide 60 6 References All the documents referenced below are available from the DELMIA Apriso Start page, which can be accessed on your DELMIA Apriso server (<server name>/apriso/start). The newest versions of all the documents are available from the 3DS Support. 1 Dassault Systèmes, Process Builder Online Help This Online Help explains how to carry out the main encountered in the day-to-day operation of Process Builder. 2 Dassault Systèmes, Dashboard Builder Implementation Guide This document explains how to configure and use the Dashboard Designer and Dashboard Viewer.