UF Dashbuilder - Metric visualizations

  A metric is a very useful type of visualization for displaying a single value for a given data property. For example:

• The number of running processes in a server, memory used, CPU load, I/O throughput, etc...
• The number of tweets received last week
• The total travel expenses in a company

   The next screenshot shows a sample dashboard using the new metric visualization recently added to Dashbuilder. 

Sales dashboard example

   The entire dashboard is consuming the same data set, although every displayer has been configured with the proper settings. Next, we are going to see how those metrics indicators can be created using the tooling.

 Metric displayer

   As you can see below, a new "Metric" visualization type has been added to the Displayer Editor.

Displayer editor - Metric visualization type 

   Once the "Metric" option has been selected, next step is to configure the data retrieval (see below, the "Data" tab). From this tab we need to:

1. Select the source data set. In this case we have chosen the "Sales opportunities" example, which is a Java Bean generated data set containing the sales of a virtual company from the last 2 years until 3 years in the future.
2. Select the metric to display. In this case we have selected the total sum of the opportunities closed within the current company's fiscal year. To do so, from the "Filters" section, we have added a filter on the property "closingDate". 

Metric displayer configuration

   After configuring the data retrieval, the last step is to adjust the "Display" settings. First of all, the metric needs a title. Secondly, the metric format can also be adjusted. There are 2 settings involved:

Expression

    It's a mathematical operation applied to the value retrieved from the data set. In our case, we are using "value/1000" as we want to display thousand dollars. Thousands are easier to understand by end users as sales amounts are usually big figures.
 

   We can combine the most common mathematical operators:
   

              *  => Multiply

              /   => Divide

              +  => Add

              -   => Subtract

   For example: 

• "value*1.21"  => Amount plus 21% tax"

   Actually, we can use any valid JavaScript expression. For instance, "Math.sqrt(value)", square root, is also valid.

Pattern

   It's used to format the value obtained after applying the above expression. In our case we want to use the "$" currency symbol together with the "K" suffix as we want to indicate the value displayed is formatted in thousand dollars. f.i: "$ 10,345.23 K".  Pattern expressions are based on the default Java notation format for numbers. Some examples:

• "#,###"            => "10,300"            no decimal part
• "$#,###.##"     => "$10,300.45"     decimal part, currency symbol
• "000000.000"  => "010300.453"    leading and trailing zeros, no commas

   That's all for today. As you can see, in Dashbuilder, has never been so easy to create & configure metrics visualizations on top of your data. Thanks for reading and stay tuned!