BPM, Workflow, and Case

Charts are normally used to ease the understanding of large quantities of data and relationships between parts of the data. The main benefit of chart is that it can be read more quickly than the raw dataset.

We have 7 types of Charts in UI toolkit in IBM Business Automation Workflow named as -

• Bar chart SDS
• Pie chart SDS
• Area chart SDS
• Donut chart SDS
• Line chart SDS
• Step chart SDS
• Multi-purpose chart

This solution is to develop and design dynamic Bar Chart (Bar Chart SDS of UI Toolkit) based on the selection of Single Select UI Toolkit component. The template for developing all the chart remains the same, but the chart will vary depending on the use case.

Chart Views are basically for the dashboard in the Process Portal. No doubt it can also be part of process(i.e. Service contained in Process).

Step : 1

Let’s create a Client-Side Human Service of Use as Dashboard (Available in the Process Portal Dashboard menu) as shown in Fig.1

                                                                   Fig.1

Step : 2

In diagram tab (Fig.2), no manipulation is needed – which will have a coach created when created.

                                                           Fig.2

Step : 3

In variable tab(Fig.3), we just need to create only variable(applicationName) of String type as private scope for binding with Single Select. This variable will be bound to a drop-down containing the names of applications which are hard coded in this example, see Fig-6.

                                                                      Fig.3

Step : 4

In Coach tab (Fig 4) we will have Single Select and Bar Chart SDS components of UI toolkit.

                                                                             Fig.4

 Step : 5

The configuration^* for Single Select will be shown in Fig.5 and Fig.6.

                                                                                      Fig.5 

                                                     Fig.6
 Step : 6
The configuration^* for Bar Chart will be as shown in Fig.7 and Fig.8.

                                                     Fig.7

                                                                                      Fig.8

Step : 7

As the chart, we are designing is of dynamic in nature so the Chart data mode will be selected as “From Service” and we must develop and attach service flow of Default Chart Single Data Series Service template type(Fig.9) to Data Service configuration. If we select “From Config Option” it would be static in nature – which we need to hard-code the values in the Data Series property Configuration.

                                                       Fig.9

 The input and output business objects are mapped following the default service template design, the private business objects are for manipulations, later parsing to the output business object for creating the graph.

 Step : 8

Now, we have to develop the service flow(Fig.10), which will be bound to Data Service configuration property of the Bar Chart SDS.

                                                    Fig.10

SQL Query Script

tw.local.sql ="SELECT tt.stage AS label, count(tt.instanceId) AS value FROM DB2INST1.TG_INSTANCETRACKING_TG tt "+

"where tt.worktype ="+"'"+tw.local.input+"'"+

" GROUP BY tt.STAGE "+

"ORDER BY tt.STAGE"

The above query is customized as per the process, which has multiple tracking points (of INSTANCETRACKING_TG tracking group stored in PDWDB) on the activity of the process. We are  counting number of instances in each tracking point that has passed.

**Query/Script has to be manipulated as per the requirement.

Parse Mapping Script

tw.local.dataSeries = {};

tw.local.dataSeries.dataPoints = [];

for(var j=0;j<tw.local.dataPoints.listLength;j++){

tw.local.dataSeries.dataPoints[j] = {};

tw.local.dataSeries.dataPoints[j].value = tw.local.dataPoints[j].value;   //Y-Axis

tw.local.dataSeries.dataPoints[j].label = tw.local.dataPoints[j].label;  //X-Axis

 }

Step : 9

Bar Chart SDS needs to re-query its associated service flow with the same or with new selection  to refresh its content. Fig.11 shows how this is done by calling the setQueryData() command (passing in new input data) and then by calling the refresh() command in the on Change event of Single Select.

                                                   Fig.11

Basically, this event will trigger the input to the service flow associated with Bar Chart.

 ${Bar_Chart_SDS1}.setQueryData(me.getSelectedItem());${Bar_Chart_SDS1}.refresh();

 Where Bar_Chart_SDS1 is the control ID of bar chart SDS component.

 The Service Flow will fetch the result from the database and will parse the data to the required DataSeries  business object to create as the chart as per the data.

 Step : 10

 We have to login to the Process Portal , look for Dashboard menu and run the Instances Count Per Stage dashboard exposed service. On select of the application name Bar Chart will be created

 Below, are few samples Bar Charts -

                                                     Fig.12

                                                    Fig.13

Configurations ^*   of the components will be dependent on result set population and design requirements.