Creating Crosstab Report using Community Reporting of Helical Insight

Introduction : In this blog we are going to explain how to create a cross tabular report which shows the data of source wise, destination wise travel cost with parameters Journey_type (Single Select) and source (Multi Select) using community (CE) reporting method in Helical Insight.

Please make sure you have gone through the blog “Introduction to Community Reporting Interface”

Steps to create create cross tab report using community reporting :

1. Data Source
2. Dashboard Layout
3. Parameter
4. Report

1. Data source :

Create data source connection.

Here we are using connection type : plain jdbc

In the configuration of data source, provide the details as shown below.

<driver>com.mysql.jdbc.Driver</driver>   // sql driver 
<url>jdbc:mysql://192.168.2.51:3306/Travel_Data </url>  // jdbc url
<user>hiuser</user>  // database username
<pass>hiuser</pass>  // database password

Note : You can choose other kind of data sources. The rest of the steps are the same as others.

2. Dashboard Layout :

In the dashboard layout we basically specify the layout of the report, dashboards, input parameters which we are creating. All the divs are specified here within which they get rendered.

Here we are creating 3 divs : client_name, source and client_wise

Input Parameters divs are : client_name and source

Report div is : client_wise

When you click on dashboard layout a layout similar to below will appear: (see the screenshot)

In the above screen shot we find two options (left side)

HTML and CSS.

If you click on HTML/CSS the place holder for respective component will be displayed and highlighted in the Dashboard layout panel.

We can place the code related to layout in HTML and styling in CSS.

Dashboard layout :

HTML :

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/orb/1.0.9/orb.min.js "></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/orb/1.0.9/orb.min.css">
<div class = "col-sm-4 col-md-4 col-xs-4" id="client_name">Select Journey_Type ;</div>
</div>
<div class = "col-sm-4 col-md-4 col-xs-4" id="source">Select Source </div>
</div>
<div class="col-sm-12 col-xs-12 col-md-12" id="client_wise"></div>

CSS:

In CSS place holder we can add the CSS related to Cross Tabular customization as well as report customization like back-ground color , report border , border radius, color etc.

3. Parameters :

Parameters are used to filter the report data. These parameters can be single select, multiple select, date range, slider, date picker etc. We can create multiple parameters for the single report/dashboard.

When you click on add button, the parameter is created with default name parameter1.

Create two parameters and then click on “Pencil” icon and rename this as “Journey_Type” and “Source”.

We should place the code for Parameter configuration, parameter query in their respective place holders.

Click on apply button to save all the configurations.

In this sample we are creating two types of parameters i.e. one single select and one multi select.

A. Journey_Type : (single select)

Choose connection as “connection1”(previously created in data sources)

Here “Journey_Type” is a Single-select input control, so we need to choose input type as “String” as shown in below image. By default it is always “String”.

Note : For all multi select parameters we should select “Collection” irrespective of parameter datatype. If it is single select parameter we choose the type based on datatype of parameters

Configuration :

var dashboard = Dashboard;
dashboard.resetAll();
dashboard.setVariable('Journey_Type','Domestic');
dashboard.setVariable('source',['']);
var Journey_Type = {
    name: "Journey_Type",
    type:  "select",
    parameters:["Journey_Type"],
  options:{
        multiple:false,		//to be kept as false for single select
        value : 'Journey_Type',
        display : 'Journey_Type',
        placeholder: 'Select Journey_Type'
    },
    htmlElementId : "#client_name",
    executeAtStart: true,
   map:1
}; 

SQL :

select distinct Journey_Type as Journey_Type FROM `Travel_Data`.`Traval`

B. Source : (multi select )

Choose connection as “connection1”(previously created in data sources)

Here “Source” is a Multi-select input control, so we need to choose input type as “Collection” as shown in below image. By default it is always “String”.

Note : For all multi select parameters we should select “Collection” irrespective of parameter datatype. If it is single select parameter we choose the type based on datatype of parameters.

Configuration :

For multi-select parameters, you can either select parameter type as Select or Select2 or Checkbox. At the output level, you will see that the different parameter type gives different type of input parameter view.

var source = {
    name: "source",
    type:  "select2",
    parameters:["source"],
  options:{
        multiple:true,	//true for multiselect
        value : 'source',
        display : 'source',
        placeholder: 'Select source'
    },
    htmlElementId : "#source",
    executeAtStart: true,
   map:2
}; 

SQL :

select  `Travel_Data`.`Traval`.`source` as source from `Travel_Data`.`Traval` group by `source`

Note: After placing the configuration , SQL then click on apply or (control+s)

Note: If you do not have any parameters please make sure that you will have to add below code in the “Report” configuration as shown in below.

var dashboard = Dashboard
dashboard.resetAll();

In case if you delete first parameter then also you need to provide above code in “Report” configuration.

Note: The configuration script is added only for the first parameter. For all the remaining parameters, this script should be copied and repeated with the necessary changes.

4. Report :

We can configure different visualizations to render in different divs in the dashboard layout.

When click on add report button (see the screenshot)

In the left panel we find report, SQL, Visualization related options.

Click on configure, on the right side we can see the place holders for report configuration, SQL, Visualization. Place the respective code apply click on apply.

Here we need to choose chart type as “Cross tab”, connection as “connection1” and parameters as “Journey_Type and source”.

Report Configuration :

var CrossTab= {
    name: "CrossTab",
    type:"chart",
	  listeners:["Journey_Type","source"],   //input parameters to which the report is listening
	   requestParameters :{
     Journey_Type : "Journey_Type",
	 source : "source"
		},
    vf : {
      id: "1",
      file: "__efwvf_name__"
    },

htmlElementId : "#client_wise",
    executeAtStart: true,
    map :3
 }; 

SQL :

select 	`Travel_Data`.`Traval`.`source` as `source`,`Travel_Data`.`Traval`.`Destination` as `destination`, sum(cost) as cost  
from `Travel_Data`.`Traval`	where Journey_Type = ${Journey_Type} and ((source in (${source}) or '---All---' in (${source})))
group by `source`,`destination`

Visualization:

In other visualizations we mention measures and dimensions, whereas in case of crosstab we mention rows, columns and measures. Based on that the crosstabular report gets generated. In case if there are going to be multiple fields in Rows or Columns or Measures then the names of all of them should be present comma separated.

<Rows>source</Rows>
<Measures>cost</Measures>
<Columns>destination</Columns>

Note: After placing the configuration , SQL, Visualization then click on apply or (control+s)

After completing all the steps save the report.

In the back end server location :

The following files will be generated

1. Efw (report view in the front end)
2. Efwce (editable file in the front end)
3. Efwvf
4. Html
5. Efwd

In the front end file browser we can see the below kind of files:

When we double click on the report view file (with the extension efw) report opens like below. The other file with the extension EFWCE can be used to edit the created report/dashboard again.

Cross Tab with Report View :

For more details on EFWCE reporting refer the documentation :

EFWCE method of reporting in Helical Insight

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