Ivy Gauge Compnent Example in Pentaho CDE --- How to visualize a singel value ???

Hi ,
This post explains how to use Ivy Gauge component in Pentaho CDE dashboards.

What can be visualized using this component ?
1) To represent single value- High level value on the dashboard.
2) To represent single valued result sets from SQL query or any other data source.


Ivy components are developed using SPARKAL application , which is an application plug-in developed by Pentaho..

This Ivy component is actually, justGage component and you can integrate it in your other applications also.

The Official site for justGage Component is : http://justgage.com/

 This component takes SQL result in below format

column1    value1
--------------------------
TotalSales     345666


i.e., there should be 2 columns  one is of string type and another is of value..


Download the example here and play around : Click Me


Quick Understanding : 

Image 1  type gauge:
1) You can pass parameters on gauge component.
2) For instance, you have 3 different types of sales and on selection of sales in a drop down your gauge has to show the value. (Why 3 gauges for 3 different sales ? Let's save dashboard space for other charts).
3)
1) Create a parameter let's say : param1_sales
2) Create a select and make sure this select is works with param1_sales parameter.
3) for the select give
      arg                 value
unit_sales           Unit Sales
store_sales        Store Sales
store_cost         Store Cost
 
here arg is  the actual column name and value appears on the drop down.
and the htmlObject for this some thing like "select1" (an id of a div or span tag). 

4) Query looks like below.

SELECT
'Sales' AS Sales,
 CASE
        WHEN ${param1_sales}='Unit Sales' THEN sum(unit_sales)
        WHEN ${param1_sales}='Store Sales' THEN sum(store_sales)
        ELSE sum(store_cost)      
END AS "TotalSales"
FROM sales_fact_1997

5) Take the Ivy Gauge component from Components section.

Core points:
a) Download plugin from Market Place & restart the BI server. 
b) On your CDE dashboard Ediotr, find Ivy IS from Components sections and select Gauge Component. 
 
i) Give name (for instance : gaugeexample).
ii) Data source : above query name.
iii) parameters : give the param1_sales parameter.
iv) Label : space in double quotes  gives nothing label (formally gauge title). [In some case we may not need this as we will give the tittle for this on panel title]
 v) Min and Max values depends on your requirement.
    for %, take min=0 and max=100
    for numeric, it depends on your output.
vi) Gauge width Scale = -0.2 ( Decrease the width of gauge and comes as thin ).
vii) Gauge type could be donut or gauge.


Another point ::: If your SQL result is like below you will get multiple gauges in the specified html Object area which is shown in Image 3

sales    sum
--------------------------
Store Sales    565238.1300
Store Cost    225627.2336
Unit Sales    266773.0000


NOTE : For advanced properties you need to set Extension points which you can find at Customize style http://justgage.com/

The same is listed below for quick reference

Here's a list of all parameters you can setup your gauge with:

• id : string container element id
• title : string gauge title text
• titleFontColor : string color title text
• value : int value gauge is showing
• valueFontColor : string color of value text
• min : int minimum value
• max : int maximum value
• showMinMax : bool hide or display min and max values
• gaugeWidthScale : float width of the gauge element
• gaugeColor : string background color of gauge element
• label : string text to show below value
• showInnerShadow : bool whether to display inner shadow
• shadowOpacity : float shadow opacity, values 0 ~ 1
• shadowSize : int inner shadow size
• shadowVerticalOffset : int how much is shadow offset from top
• levelColors : array of strings colors of indicator, from lower to upper, in hex format
• levelColorsGradient : bool use gradual or sector-based color change
• labelFontColor : string color of label showing label under value
• startAnimationTime : int length of initial load animation
• startAnimationType : string type of initial animation (linear, >, <, <>, bounce)
• refreshAnimationTime : int length of refresh animation
• refreshAnimationType : string type of refresh animation (linear, >, <, <>, bounce)

Download the example : Click Me


Have fun with open source... 


Sadakar
BI developer
(Jasper/Pentaho/Talend ETL).