EFW Method for Tabular report Creation

  1. Home
  2. EFW Method for Tabular report Creation

In our earlier blog “EFW for Creating a Report“, we have discussed about how to create a report using EFW and necessary files required to implement it. For creating a Tabular report using EFW method, there are 4 files required to visualize it which are

  1. EFW (.efw) – Entry point of the report. It contains the information required to run the report.
  2. HTML (.html) – Layout of the report.
  3. EFWVF (.efwvf) – Visualization of the data using javascript.
  4. EFWD (.efwd) – Data sources are defined here.

Following are the steps to generate a tabular report using an EFW method



Sample Tabular Report to be shown as output

tabular-view

Step1 : Create an EFW file and define required information to run a report. Save the file with extension .efw .

This file contains the information required to run the report.

<?xml version="1.0" encoding="UTF-8" ?>
<efw>
    <title>Prepare Report</title>
    <author>name of creator</author>
    <description>Stage wise detailed information you can get it from this dashboard</description>
    <icon>images/image.ico</icon>
    <template>display.html</template>
    <visible>true</visible>
    <style>clean</style>
</efw>

Tag Details

  • <title> : This tag holds the name of the report as will be visible in the file browser of the application.
  • <author> : This tag is used to hold the name of the creator.
  • <description> : This tag holds a brief description of the report.
  • <icon> : Path to the icon to be displayed along with the name of the report.
  • <template> : Name of the HTML file which will be invoked by the EFW.
  • <visible> : Boolean value to show or hide the dashboard in the file explorer.

 

Step2 : Create an HTML file where report layout is defined. The HTML page is used to display the visualizations on the screen. This file is where the

  • layout of the report is defined
  • the required JS and CSS files are called
  • CSS is defined
  • scripts are written
  • charting components are defined

Now, Save the file with extension .html.


NOTE: <html>, <head> and <body> tags should not be added in the HTML file.



Charting component:
The charting components are defined as follow –

var genderPieChart = {
    name: "genderPieChart",
    type:  "chart",
    vf : {
        id : 1,
        file : "MedicalRecords.efwvf"   // enter EFWVF file name
    },
    htmlElementId : "#genderPieChart",
    executeAtStart: true
};
  • 'name' : Define the name of the component. The component will be accessed by this name.
  • 'type' : By default set to ‘chart’.
  • 'vf' : Defines the VF file and the VF id in that file is to be used to visualize the data.                                                                     (i) 'id' : Defines the VF id to be used from the said VF file.                                                                                                 (ii) 'file' : Defines the VF file to be used for visualization.
  • 'htmlElementId' : Holds the HTML element ID where the chart will be bound for display.
  • 'executeAtStart' : Boolean value to decide if the component will execute at start or will be triggered on some event.

The charting components are initialized as follows :

var dashboard = Dashboard;
var components = [genderPieChart];
dashboard.init(components);

The Dashboard Variables are set retrieved as follows :

Set - dashboard.setVariable('gender', 'male'); Get - var gender = dashboard.getVariable('gender');

These variables can be used for passing data between different files as parameters or as triggers to be listened to for any change in value.

Example :

<link rel="stylesheet" type="text/css" href="getExternalResource.html?path=resources/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="getExternalResource.html?path=resources/dataTables.jqueryui.css" />
<link rel="stylesheet" type="text/css" href="getExternalResource.html?path=resources/c3.css" />
<link rel="stylesheet" href="getExternalResource.html?path=resources/pivottbl/pivot.css" type="text/css" />

<script src="getExternalResource.html?path=resources/c3.js"></script>
<script src="getExternalResource.html?path=resources/jquery.dataTables.js"></script>
<script src="getExternalResource.html?path=resources/pivottbl/pivot.js"></script>
<script src="getExternalResource.html?path=resources/jquery_pivot.js"></script>
<script src="getExternalResource.html?path=resources/jquery-ui-1.9.2.custom.min.js"></script>

<style type="text/css">
    .heading {
        text-align: center;
    }
</style>

<div class="row">
    <div class=”heading col-sm-12”> <h2>Pie Chart<h2></div>
    <div id="genderPieChart col-sm-12"></div>
</div>

<script>
    var dashboard = Dashboard;
    dashboard.resetAll();
    dashboard.setVariable('gender', '');
    var genderPieChart = {
        name: "genderPieChart",
        type:  "chart",
        vf : {
            id : 1,
            file : "MedicalRecords.efwvf"
        },
        htmlElementId : "#genderPieChart",
        executeAtStart: true
    };
    var components = [genderPieChart];
    dashboard.init(components);
</script>
<script>
// <![CDATA[
var dashboard = Dashboard; dashboard.resetAll(); dashboard.setVariable('gender', ''); var genderPieChart = { name: "genderPieChart", type: "chart", vf : { id : 1, file : "MedicalRecords.efwvf" }, htmlElementId : "#genderPieChart", executeAtStart: true }; var components = [genderPieChart]; dashboard.init(components);// ]]>
</script>

Step3 : Create an EFWVF file for visualizing a data using Javascript Code. The EFWVF (henceforth referred to as ‘VF’) file is the visualization file used for visualizing the data in the form that is desired. The 'Charting component' in the HTML file points to a VF file and a VF id. Whenever that component is triggered, the specified VF file is accessed by the application and the specified VF id is used to create the visualization.

Now, save the file with extension .efwvf.

Template

<Charts>
  <Chart id ="1">
     <prop>
        <name>Tabular Chart</name>
        <type>Custom</type>
        <DataSource>5</DataSource>
        <script>
           <![CDATA[
             // Insert Javascript code for applying predefined customization in case    
                of Tabular report
           ]]>
        </script>
     </prop>
   </Chart>
 
   <Chart id ="2">
      <prop>
         <name>Pie Chart</name>
         <type>Custom</type>
         <DataSource>6</DataSource>
         <script>
            <![CDATA[ 
               // Insert Javascript code for applying customization
            ]]>
         </script>
       </prop>
    </Chart>
   
   //Similarly more chart customization can be added in a EFWVF file
   
</Charts>
  • <Chart id ="1"> : This id is used by the ‘Charting Component’ of the HTML file to access the desired VF component.
  • <name> : This helps identify what that VF component does. This is for the developers convenience.
  • <type> : Default value is ‘custom’.
  • <DataSource> : This tag defines the id of the query in the EFWD file which will be fired to fetch the resultset to be visualized.
  • <script> : This tag contains <![CDATA[ ]]> tag, which holds the actual javascript to create the chart.

NOTE: The result set from the query is passed as a JSON array variable named ‘data’.



Sample Code for reference

<Charts>
  <Chart id ="1">
     <prop>
        <name>Tabular Chart</name>
        <type>Custom</type>
        <DataSource>5</DataSource>
        <script>
           <![CDATA[
             $(document).ready(function() {
             var table = $('#example').DataTable({
             'ajax': 'https://api.myjson.com/bins/qgcu',
             'responsive': {
             'details': {
                         'type': 'column',
                         'target': 0
                        }
                     },
             'columnDefs': [{
                          'data': null,
                          'defaultContent': '',
                          'className': 'control',
                          'orderable': false,
                          'targets': 0
                           }],
               'columns': [ 
                        { 'data': null }, 
                        { 'data': 0 },
                        { 'data': 1 },
                        { 'data': 2 },
                        { 'data': 3 },
                        { 'data': 4 },
                        { 'data': 5 }
                       ],
            'select': {
                       'style': 'multi',
                       'selector': 'td:not(.control)'
                      },
            'order': [[1, 'asc']]
                      }); 
                   });
             ]]>
        </script>
     </prop>
   </Chart>
  </Charts>

Note: In a single EFWVF file, multiple chart id’s can be created. Here, chart id=1 is defined for Tabular report. Similarly, other chart id’s can be created for other charts/table such as pie chart, donut chart and so on.



Step4 : Then, Create an EFWD file for defining Datasource details. EFWD file is the DataSource file, which contains all the queries required to create a report. Each query is assigned a unique id, which the VF file uses, to fire a specific query and access its result set. Save the file with extension .efwd.


Template

<EFWD>
    <DataSources>
        <Connection id="1" type="sql.jdbc">
            <Driver>com.mysql.jdbc.Driver</Driver>
            <Url>jdbc:mysql://127.0.0.1:3306/efw_db_POC_DM</Url>
            <User>root</User>
            <Pass>root</Pass>
        </Connection>
    </DataSources>
    <DataMaps>
        <DataMap id="1" connection="1" type="sql" >
            <Name>Sql Query on SampleData - Jdbc</Name>
            <Query>
                <![CDATA[
                    SELECT * FROM table WHERE stage_id IN ${stage_id} AND order_date > ${orderDate}
                ]]>
            </Query>
            <Parameters>
                <Parameter name="stage_id" type="Collection" default="'1','2'"/>
                <Parameter name="orderDate" type="Date" pattern="yyyy-MM-dd" default="2003-03-01"/>
            </Parameters>
        </DataMap>
    </DataMaps>
</EFWD>
  • <DataSources> : This tag defines the data sources being used for the report.
  • <Connection id=”1″ type=”sql.jdbc”> : The connection id is a unique id given to each connection and the type specifies the type of connection it is.
  • <Driver> : Specifies the driver of the database being used.
  • <Url> : URL of the database being used.
  • <User> : Username credential for the database.
  • <Pass> : Password credential for the database.
  • DataMap id=”1″ connection=”1″ type=”sql” > :‘id’ : This Id is used by VF to specify which query to fire.
    ‘connection’ : This specifies which datasource connection is to be used.
  •  <Name> : This is the label, specifying what the query does.
  •  <Query> : Contains the tag containing the query.
  •  <![CDATA[   ]]> : Contains the actual query.
  •  <Parameters> : Contains the parameters to be passed to the query.
  •  <Parameter name=”stage_id” type=”Collection” default=”‘1’,’2′”/> :
    ‘name’ : The name of the variable.
    ‘type’ : The type of the variable (collection/string/date/etc.).
    ‘default’ :  The default value of the variable if nothing passed.

Sample

<EFWD>
    <DataSources>
        <Connection id="1" type="sql.jdbc">
            <Driver>org.postgresql.Driver</Driver>
            <Url>jdbc:postgresql://192.168.2.9:5432/Global_DataBase</Url>
            <User>postgres</User>
            <Pass>postgres</Pass>
        </Connection>
    </DataSources>
 
    <DataMaps>
        <DataMap id="1" connection="1" type="sql" >
            <Name>Gender wise classification</Name>
            <Query>
                <![CDATA[
                    select
                    count(case when gender = 'Male' then 1 end) as "Male",
                    count(case when gender = 'Female' then 1 end) as "Female",
                    count(case when gender is null then 1 end) as "NotSpecified"
                    from medical_records
                ]]>
            </Query>
        </DataMap>
    </DataMaps>
</EFWD>

After creating all the required files, save these file in a single folder. Also, save the folder in Helical Insight repository which can be accessed through Helical Insight Application.



For further assistance, kindly contact us on support@helicalinsight.com or post your queries at forum.helicalinsight.com

You May Also Like

Leave a Reply

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

Helical Insight’s self-service capabilities is one to reckon with. It allows you to simply drag and drop columns, add filters, apply aggregate functions if required, and create reports and dashboards on the fly. For advanced users, the self-service component has ability to add javascript, HTML, HTML5, CSS, CSS3 and AJAX. These customizations allow you to create dynamic reports and dashboards. You can also add new charts inside the self-service component, add new kind of aggregate functions and customize it using our APIs.
Helical Insight’s self-service capabilities is one to reckon with. It allows you to simply drag and drop columns, add filters, apply aggregate functions if required, and create reports and dashboards on the fly. For advanced users, the self-service component has ability to add javascript, HTML, HTML5, CSS, CSS3 and AJAX. These customizations allow you to create dynamic reports and dashboards. You can also add new charts inside the self-service component, add new kind of aggregate functions and customize it using our APIs.
Helical Insight, via simple browser based interface of Canned Reporting module, also allows to create pixel perfect printer friendly document kind of reports also like Invoice, P&L Statement, Balance sheet etc.
Helical Insight, via simple browser based interface of Canned Reporting module, also allows to create pixel perfect printer friendly document kind of reports also like Invoice, P&L Statement, Balance sheet etc.
If you have a product, built on any platform like Dot Net or Java or PHP or Ruby, you can easily embed Helical Insight within it using iFrames or webservices, for quick value add through instant visualization of data.
If you have a product, built on any platform like Dot Net or Java or PHP or Ruby, you can easily embed Helical Insight within it using iFrames or webservices, for quick value add through instant visualization of data.
Being a 100% browser-based BI tool, you can connect with your database and analyse across any location and device. There is no need to download or install heavy memory-consuming developer tools – All you need is a Browser application! We are battle-tested on most of the commonly used browsers.
Being a 100% browser-based BI tool, you can connect with your database and analyse across any location and device. There is no need to download or install heavy memory-consuming developer tools – All you need is a Browser application! We are battle-tested on most of the commonly used browsers.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
A first-of-its-kind Open-Source BI framework, Helical Insight is completely API-driven. This allows you to add functionalities, including but not limited to adding a new exporting type, new datasource type, core functionality expansion, new charting in adhoc etc., at any place whenever you wish, using your own in-house developers.
A first-of-its-kind Open-Source BI framework, Helical Insight is completely API-driven. This allows you to add functionalities, including but not limited to adding a new exporting type, new datasource type, core functionality expansion, new charting in adhoc etc., at any place whenever you wish, using your own in-house developers.
It handles huge volumes of data effectively. Caching, Pagination, Load-Balancing and In-Memory not only provides you with amazing experience, but also and does not burden the database server more than required. Further effective use of computing power gives best performance and complex calculations even on the big data even with smaller machines for your personal use. Filtering, Sorting, Cube Analysis, Inter Panel Communication on the dashboards all at lightning speed. Thereby, making best open-source Business Intelligence solution in the market.
It handles huge volumes of data effectively. Caching, Pagination, Load-Balancing and In-Memory not only provides you with amazing experience, but also and does not burden the database server more than required. Further effective use of computing power gives best performance and complex calculations even on the big data even with smaller machines for your personal use. Filtering, Sorting, Cube Analysis, Inter Panel Communication on the dashboards all at lightning speed. Thereby, making best open-source Business Intelligence solution in the market.
With advance NLP algorithm, business users simply ask questions like, “show me sales of last quarter”, “average monthly sales of my products”. Let the application give the power to users without knowledge of query language or underlying data architecture
With advance NLP algorithm, business users simply ask questions like, “show me sales of last quarter”, “average monthly sales of my products”. Let the application give the power to users without knowledge of query language or underlying data architecture
Our application is compatible with almost all databases, be it RDBMS, or columnar database, or even flat files like spreadsheets or csv files. You can even connect to your own custom database via JDBC connection. Further, our database connection can be switched dynamically based on logged in users or its organization or other parameters. So, all your clients can use the same reports and dashboards without worrying about any data security breech.
Our application is compatible with almost all databases, be it RDBMS, or columnar database, or even flat files like spreadsheets or csv files. You can even connect to your own custom database via JDBC connection. Further, our database connection can be switched dynamically based on logged in users or its organization or other parameters. So, all your clients can use the same reports and dashboards without worrying about any data security breech.
Our application can be installed on an in-house server where you have full control of your data and its security. Or on cloud where it is accessible to larger audience without overheads and maintenance of the servers. One solution that works for all.
Our application can be installed on an in-house server where you have full control of your data and its security. Or on cloud where it is accessible to larger audience without overheads and maintenance of the servers. One solution that works for all.
Different companies have different business processes that the existing BI tools do not encompass. Helical Insight permits you to design your own workflows and specify what functional module of BI gets triggered
Different companies have different business processes that the existing BI tools do not encompass. Helical Insight permits you to design your own workflows and specify what functional module of BI gets triggered