Sunburst Clock Chart - Customize to particular data set

Story behind of extension

I received a task from SAP pre-sale team to ask me to create a customize extension for a garage door company to show their particular dataset. The use case is building a viz extension for a 24-hour clock-liked extension for SAP Lumira to display the door status on each door/day.

There are two versions of this extension: one version has the legend of door status and simple version only has the chart. For each garage, the customer will create individual sunburst clock chart in the visualize room with two filters: door name/ID and date. They will then create a story in the compose room of Lumira, including the standard bar chart and all individual clocks. The final story would display when the garage door is opened, alerting the customer to potential fraud related activities, possible energy savings, etc.

Customize Visualization - Combine of basic charts

The extension contains a sunburst chart to display different door status at a particular time in a day corresponds to the same position on a bottom pie chart, which like a clock face representing the 24 hours. Each single contributing pieces of sunburst chart would use the different color to represent door status for five minutes. The white pieces represent the opening of the garage door, and transparent pieces mean closed state of the door during that time. The top pie chart includes two semi-circles that display the analysis results of door closed summary status and door cycles of a day.

Step 1: Covert date to number in Excel and Lumira

In this use case, the raw data including kinds of specific data - date object. In the LocalTime/ LocalTimeStamp columns, the original value includes both date and time in one cell. However, Lumira can automatically detect string with only date or time to the date object.

If you import the Excel file directly into Lumira, you will find when the LocalTime and LocalTimeStamp are imported, they don't transfer to right format with full string (*4). The first solution for this error is to split the date and time in two cell in excel with Data-> Text to Columns.

The second way to solve this problem is to remove the date in each cell. You don't need the date in this column because there is a "Date" column in Excel. You need to select all LocalTime column in Excel, right click -> Format Cells -> Number - > Category: Custom -> Type: h:mm:ss

The second step to deal with the origin dataset is chosen at least one column as the measure. Lumira needs measure object to draw the visualization. You need to convert the "Time_Since_Last_CDO_Activity" from string to number as the measures.

The step to convert a string into number like below:

Choose “Time_Since_Last_CDO” column and click the gear icon. Choose Convert to time/date, and select ”hh: mm: ss” in Time drop-down selector.
The previous operation will create new column “Time_Since_Last_CDO_Activity(2)” with the clock icon. Choose gear icon in this column, and select Create calculated dimensions.
In Edit Calculated Dimension window, input a new name for “DoorStutas_seconds” section. And then copy below string to Formula inputfiled: Second(ToTime({Time_Since_Last_CDO_Activity (2)}, "hh:mi:ss")) + 60 * Minute(ToTime({Time_Since_Last_CDO_Activity (2)}, "hh:mi:ss"))

4. Select the new column that you just create, and click the gear icon. Choose form a measure and use it for SunbrustClock Extension

Now, you can export the data set from Lumira and start to develop your extension in Web IDE.

* In this project, You need to import only one day/one door's data into WebIDE.

Step 2 Data binding and get key name from data.meta

Set up your Web IDE and create new Lumira extension project: SAP Lumira Visualization Extension - Hello World from SAP Web IDE

After you create your extension project and import one day/one door's data in WebIDE, you can create variables to get value for each column.

You can access values in the data object with the key that you get in there.

Nest the data for Legend

Step 3 Defining all elements

Append a "g.sunbrustclock_legend" onto center of screen

Set up the radius for Sunburst chart, analytic pie chart(orange circle in front) and background clock pie chart(blue circle in back).

Step 4 Draw the Sunburst Chart

A sunburst is similar to the treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value.

The partition function creates a new partition layout without sort order; the default value accessor assumes each input data is an object with a numeric value attribute; the default children accessor assumes each input data is an object with a children array; the default size is 1×1.

You may feel confuse if you never use selection.datum() before. It is a function to gets or sets the bound data for each selected element. Unlike the selection.data() method, this method does not compute a join (and thus does not compute enter and exit selections). This method is implemented on top of selection.property.

The argument of data() method is partition.nodes(root) and the root from the .datum() function in the link before. The partitions.nodes() runs the partition layout, returning the array of nodes associated with the specified root node. These layouts follow the same basic structure: the input argument to the layout is the root node of the hierarchy, and the output return value is an array representing the computed positions of all nodes.

The .filter() function will hidden the child nodes in sunburst chart if their data[status] are "Close Limit". Another status will choose different colors using the callback function in the style of "fill".

* sample for .data() vs .datum()

Step 5 Add tooltips to each door status

After we create the sunburst chart, we could work on add tooltip for showing more detail info to each children nodes for it. You need to append "g", "rect" and "text" to SVG.