SpagoBIMobileEngine: Bringing Business Intelligence to mobile devices

It is not surprising for Business owners to think of taking business decisions right from their gadgets with which they spend most of their time these days. Be it I-Pads, Tablets or the Smart phones, they are all part of our life now. What if those BI Reports you see in your browsers are made available on your I-Pad!…. I know you must be thinking there are many such applications, but what about an Open Source application which has provision for rich controls.

   

In this Blog, lets have a look at SpagoBIMobileEngine, one of the latest offerings of the new version of SpagoBI 3.4.

Now we can display our BI reports on mobile devices. This new component allows us to deploy the analysis available in SpagoBI suite onto mobile devices, such as smartphones and tablets, using original types of reports, graphs and interactive cockpits.

We have following three features added by SpagoBI for mobile so far:

  1. Mobile Table: gives a tabular layout to data loaded from the associated dataset
  2. Mobile Chart: displays Sencha-Touch charts over dataset data
  3. Mobile Cockpit: composes charts and reports in a single layout, within the possibility for each document to interact with the others, passing them parameters

Here is our first experience in creating different kind of reports provided by SpagoBIMobileEngine.

Develop Mobile Table

Please follow the steps below to develop mobile table:

  1. Create an analytical document with the following required information:
    1. Label: the label of the document
    2. Name: Name of the document.
    3. Type: Mobile Report
    4. Engine: Mobile Report Engine
    5. Data Source: your data source, e.g. foodmart.
    6. Dataset: locate the dataset for which you would like to develop table.Notes: Make sure the engine has been configured. This is configured by default with version 3.4.
  2. Locate and upload the document template (.xml) file.

Details on the document template

<TABLE_WIDGET>

This is the start of the table chart template.

          <TITLE value=”Sales” style=”font-weight:bold; font-family: Verdana; font-size: 16px;”/>

This tag is used to show title on the chart, we can change the style tag to change the visibility of the title on page.

<COLUMNS>

This is start of the table column tag. We can have more than one columns depending upon our requirements.

<COLUMN header=”Product Category” value=”ProdCategory” style=”font-weight: bold; text-align: center;” />

Column header is the header of column and value is the dataset field name.

          Use the following tag in case you would like to link this chart to another document (cross navigation).

<DRILL document=”Mobile_Chart_LC1″>

<PARAM  name=”ProdCategory” type=”SERIE”/>

</DRILL>

Here the document references the target document label and for each parameter, it is necessary to define the name (url) of the target parameter and the type of it.

The type can assume next values:

CATEGORY: pass the category’s value selected.

SERIE: pass the serie’s value selected.

ABSOLUTE: pass the constant defined into the value property.

RELATIVE: pass the value of the parameter presents in the request with the name defined in the same property.

     3. Save and execute the document.

Develop Mobile Chart

Please follow the steps below to develop mobile table:

  1. Create an analytical document with the following required information:
    1. Label: the label of the document.
    2. Name: Name of the document.
    3. Type: Mobile Chart
    4. Engine: Mobile Chart Engine
    5. Data Source: your data source, e.g. foodmart.
    6. Dataset: locate the dataset for which you would like to develop table.Notes: Make sure the engine has been configured. This is configured by default with version 3.4.
  2. Locate and upload the document template (.xml) file.

Details on the document template

 Bar Chart

<CHART_WIDGET  width=’320′ height=’480′>

The width and height of the chart, we can have this value either in pixel or, percentage.

<TITLE value=’Sales and Costs’></TITLE>

Title of the bar chart document.

<LEGEND position=’top’/>

This is for legend where we set the position of the legend, one can comment this line in case they do not want to have legend on the page.

<OPTIONS showValueTip=’true’/>

Display the value of the numeric control as we move the slider or needle.

<ANIMATE easing=’bounceOut’ duration=’750’/>

This is animate configuration tag, which shows motion effect.

Other easing values, but I have no idea if SpagoBI supports all of these:

bounceIn, bounceOut, bounceInOut, elasticIn, elasticOut, elasticInOut, linear, quadIn, quadOut, quadInOut, cubicIn, cubicOut, cubicInOut, easeIn, easeOut, easeInOut, quartIn, quartOut, quartInOut, quintIn, quintOut, quintInOut, sineIn, sineOut, sineInOut, expoIn, expoOut, expoInOut, circIn, circOut and circInOut

<SERIES_LIST>

<SERIE  xField=’X’ yField='[SALES, COSTS]’ type=’bar’ axis=’bottom’ highlight=’true’>

<LABEL field='[SALES,COSTS]’ contrast=’true’ display=’insideEnd’ text-anchor=’middle’/>

</SERIE>

</SERIES_LIST>

<AXES_LIST>

<AXES type=’Numeric’ position=’bottom’ title=’Sales – Cost Amount’>

<FIELDS_LIST>

<FIELDS>SALES</FIELDS>

<FIELDS>COSTS</FIELDS>

</FIELDS_LIST>

</AXES>

<AXES type=’Category’ position=’left’ title=’Product Category’>

<FIELDS_LIST>

<FIELDS>X</FIELDS>

</FIELDS_LIST>

</AXES>

</AXES_LIST>

Configure series and axes to set/display fields on X and Y axis.

<INTERACTIONS_LIST>

<INTERACTIONS type=’panzoom’>

<AXES>

<LEFT></LEFT>

</AXES>

</INTERACTIONS>

</INTERACTIONS_LIST>

Interaction configuration, The PanZoom interaction allows the user to navigate the data for one or more chart axes by panning and/or zooming.

Pie Chart

<CHART_WIDGET width=’80%’ height=’80%’>

Set the width and height of the pie chart.

<TITLE value=’Market Shares by Order Amount Range’> </TITLE>

The title of the document.

<LEGEND>

<POSITION portrait=’right’ landscape=’right’/>

</LEGEND>

Legend configuration.

<INTERACTIONS_LIST>

<INTERACTIONS type=’reset’ confirm=’true’ />

<INTERACTIONS type=’rotate’ />

</INTERACTIONS_LIST>

Configure interactions, type=rotate will rotate the chart with touch.

<ANIMATE>true</ANIMATE>

Set animation as true.

<SERIES_LIST>

<SERIE field=’Sales’ type=’pie’ showInLegend=”true” highlight=”true”>

<LABEL field=’AmountRange’ contrast=’true’ font=’18px Arial’ display=’rotate’/>

</SERIE>

</SERIES_LIST>

Configure series to set/display fields in pie chart.

</CHART_WIDGET>

End of the widget.

Line Chart

 <CHART_WIDGET  width=’80%’ height=’80%’>

Set the width and height of the pie chart.

<TITLE value=’Historical Sales and Costs for $P{ProdCategory}’></TITLE>

Set the title of the document.

<LEGEND position=’bottom’/>

Configure legend position.

<ANIMATE easing=’bounceOut’ duration=’750’/>

Animate configuration same as above.

<SERIES_LIST>

<SERIE  xField=’month’ yField=’value1′ type=’line’ fill=’true’ smooth=’true’ axis=’left’ title=’Sales’>

<HIGHLIGHT size=’7′ radius=’7’/>

</SERIE>

<SERIE  xField=’month’ yField=’value2′ type=’line’ fill=’true’ smooth=’true’ axis=’left’ title=’Costs’>

<HIGHLIGHT size=’7′ radius=’7’/>

</SERIE>

</SERIES_LIST>

<AXES_LIST>

<AXES  type=’Numeric’ position=’left’ title=’Sales-Costs’>

<FIELDS_LIST>

<FIELDS>value1</FIELDS>

<FIELDS>value2</FIELDS>

</FIELDS_LIST>

</AXES>

<AXES  type=’Category’ position=’bottom’ title=’Months’>

<FIELDS_LIST>

<FIELDS>month</FIELDS>

</FIELDS_LIST>

</AXES>

</AXES_LIST>

Configure series and axes to set/display fields on X and Y axis.

<INTERACTIONS_LIST>

<INTERACTIONS type=’panzoom’>

<AXES>

<BOTTOM></BOTTOM>

</AXES>

</INTERACTIONS>

</INTERACTIONS_LIST>

Interaction configuration, The PanZoom interaction allows the user to navigate the data for one or more chart axes by panning and/or zooming.

      3. Save and execute the document.

Develop Mobile Cockpit
Please follow the steps below to develop mobile table:

  1. Create an analytical document with the following required information:
    1. Label: the label of the document.
    2. Name: Name of the document.
    3. Type: Mobile Cockpit
    4. Engine: Mobile Cockpit EngineNotes: Make sure the engine has been configured. This is configured by default with version 3.4.
  2. Locate and upload the document template (.xml) file.

Details on the document template

 <COMPOSED_WIDGET>

<TITLE value=”Composed document over Foodmart” style=”font-weight:bold; font-family: Verdana; font-size: 16px;”/>

Configure the title of the document.

<DOCUMENTS>

This is the start of the document tag. There is a block for every document that we would like to view/present in our cockpit/dashboard. We can add as many document tags as we need depending upon our views requirements. There is no limit and so we can create a composite document with 2,3,4,6, … sub-documents and everyone can shows different layout. The only limit is our common sense, because see too many documents can create confusion rather than help the data analysis.

<DOCUMENT label=”Mobile_Chart_Pie3″ width=”45%” height=”100%”>

Label defines the label  by which the document is saved into SapgoBI.

</DOCUMENT>

<DOCUMENT label=”Mobile_Table2″ width=”45%” height=”100%”>

<IN_PARAMETERS>

<PARAMETER urlName=”ProdCatType” defaultValue=”CATALOG_CATEGORY”/>

<PARAMETER urlName=”ProdCategory” defaultValue=”CPUps”/>

</IN_PARAMETERS>

</DOCUMENT>

This is the configuration of the input parameters, urlName is the label by which the parameter is saved into SpagoBI (the url in detail document section) and defaultValue is a value that the engine pass to the document if is not found explicitly in the url.

      3. Save and execute the document to show the composed view.

Others clarifications:

In case the documents have cross navigation defined separately, the composed document will be shown as interactive, we do not need to define it in Cockpit. This should be defined in separate document with the following tags:

<DRILL document=”Mobile_Chart_LC1″>

<PARAM  name=”ProdCategory” type=”SERIE”/>

</DRILL>

Here the document references the target document label and for each parameter, it is necessary to define the name (url) of the target parameter and the type of it.
The type can assume next values:

CATEGORY: pass the category’s value selected.

SERIE: pass the serie’s value selected.

ABSOLUTE: pass the constant defined into the value property.

RELATIVE: pass the value of the parameter presents in the request with the name defined in the same property.

Attachments  & References

  1. SpagoBIMobile uses Sencha touch chart for rendering the charts, so please refer document on Sencha website i.e. http://www.sencha.com/products/touch/charts for details.
  2. SpagoBI Wiki, http://www.spagoworld.org/xwiki/bin/view/SpagoBI/MobileBI
  3. Enclosed please find sample document template for Mobile Table, Bar chart, Pie Chart, Line Chart and Cockpit at http://paxcel.net/blog/wp-content/uploads/2012/06/SpagoBI.rar

Leave a Reply

Your email address will not be published. Required fields are marked *


nine − = 2

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>