Adding New Chart in Helical Insight

Open Source BI product Helical Insight comes with various kind of charts tables and crosstab (pivot) options for visualizing the data.

Helical Insight also gives you the option of integrating an external JS chart also in case if you are looking for something which is not directly possible. For this, we are using VF/Visualization Framework.

In order to implement VF, a VF file is created which includes charts JS script and can be used directly to create the desired visualization. We pass the data from our application into this VF file and the chart gets rendered. If the chart is requiring data in a specific format then the process of converting the data which we pass into the format which chart will understand is also written in this VF file only. Further this VF file also includes information about the default look and feel and functionalities of the chart.

We can integrate any java script charting engine using this VF.

We are providing the link of the C3 Pie chart which is taken as reference and we are going to integrate this specific JS chart. In a similar way you can integrate any other chart also.

https://c3js.org/samples/chart_pie.html

Steps to create chart using EFWVF (EnterpriseFrameWorkVisualisation) method :

Below we are explaining the steps of integrating the chart using efwvf method

1) Using an IDE create a file with extension .efwvf and place inside the any folder or Subfolder of hi-repository. You can create any folder in fact and save this file there. You can download the sample VF file used in this example here efwvf file here

Path :  ../hi/hi-repository/Pie Chart/Pie Chart.efwvf

Note : In local Helical instance we have created folder named as “Pie Chart”

2) The skeleton of the efwvf file as show below :

<Charts>

	<Chart id="1">
<prop>
<name>Sample Line Chart</name> // we can give the chart name to identify in the frontend
<type>Custom</type> // it should be always custom only
<DataSource></DataSource> // it should be always empty
<script>
<![CDATA[		
				/*write your custom code. This section will include the code that transforms the data into the format that is required by the chart for consumption to generate the visualization. */
				
				]]>
			</script>
		</prop>
	</Chart>
</Charts>

3) In single efwvf file ,we can integrate more than one chart with different types of visualizations also and each one will have a different chartid.

Code of Pie chart :

<Charts>
	<Chart id="1">
<prop>
<name>Pie Chart</name>
<type>Custom</type>
<DataSource></DataSource>
<script>
<![CDATA[		
				
                  if (data.length == 0) {
					$('#chart_1').html("<div><h2 style='text-align:center;color:#927333;'>No Data To Display</h2></div>");
					  } else {
					var array1=[];
					for (var i = 0; i < data.length; i++) {
					var array2=[]; 
					for (var prop in data[i]) { 

					array2.push(data[i][prop]);
					}
					array1[i] = array2;
					}
					var chart = c3.generate({
					bindto: '#chart_1',
					data: {
					columns: array1,
					type : 'pie'
					},
					tooltip: {
					show: true
					 },
					 legend:{
					show: true
					 }
					}); 
					}
				
				]]>
			</script>
		</prop>
	</Chart>
</Charts>

Explanation of code :

1) 

<Charts> //This main tag inside this all the charts will be configured with unique id 

	<Chart id="1">
<prop>
<name>Pie Chart</name> // we can provide the chart name to identify in the frontend while browsing the custom chart
<type>Custom</type> // it should be always custom
<DataSource></DataSource> // it should be always empty
<script>
<![CDATA[		
				
                 //write your custom code
				
				]]>
			</script>
		</prop>
	</Chart>
</Charts>

2) Basically the entire data of selected columns in the frontend will be stored in the object “data” in the format of json.

In the data variable we get all the data present in json array format. We should convert the data and should use in the charts configuration in such a way that it accepts the data to generate respective chart

If the data is not present then we are displaying the message :

if (data.length == 0) {
                        $('#chart_1').html("<div><h2 style='text-align:CENTER;color:#927333;'>No Data To Display</h2></div>");
                    }else{

var array1=[];
					for (var i = 0; i < data.length; i++) {
					var array2=[]; 
					for (var prop in data[i]) { 

					array2.push(data[i][prop]);
					}
					array1[i] = array2;
					}
					var chart = c3.generate({
					bindto: '#chart_1', // chart is binded to this div
					data: {
					columns: array1,
					type : 'pie'
					},
					tooltip: {
					show: true
					 },
					 legend:{
					show: true
					 }
					}); 
					}

Importing external CSS and JS :

By default libraries will be present in Helical Insight for c3 and d3 charts

Incase if a new chart is integrated it requires to import required css and js files. We should create a folder/sub folder inside hi-repository path and those JS and CSS files should be placed there. For example in the below case we have saved all the JS and CSS in the location “Custom_Charts/Libraries/pivot_table/”

CSS and JS should be imported at the beginning of the CDATA section.

This is a sample snippet for importing css :

var link1 = document.createElement("link");
link1.rel = 'stylesheet';

if(window.DashboardGlobals)
link1.href = window.DashboardGlobals.baseUrl+"/getExternalResource.html?path=Custom_Charts/Libraries/pivot_table/material.css";			
else
link1.href = "getExternalResource.html?path=Custom_Charts/Libraries/pivot_table/material.css";

This is a sample snippet for importing js :

var script = document.createElement("script");
if(window.DashboardGlobals)
script.src = window.DashboardGlobals.baseUrl+"/getExternalResource.html?path=Custom_Charts/Libraries/synfusion.js";					
else
script.src = "getExternalResource.html?path=Custom_Charts/Libraries/synfusion.js";							 document.getElementsByTagName("head")[0].appendChild(script);

Use Case of non iframe mode at Dashboard level:

It is recommended that you use the VF in non-iframe mode at dashboard level for better performance. In versions up to 4.0 RC2, if you want to use the VF in non-iframe mode, you need to use vf.js file. Please download this file (vf.js file here) and place it in the folder

...\hi\apache-tomcat-9\webapps\hi-ee\js\adhoc\visualisations

In some cases there are certain APIs, for example API which provided metadata information and this API does not have access at dashboard level when iframe is disabled. In order to access the same APIs even when iframe is disabled, few additional things needs to be done :

Sample 1 :

hi_container
var metadata;	
if(typeof hi_container == 'undefined'){  		
metadata = containerRefs[chartElement]._values.responseData.metadata[0];    
}
else
{
metadata = window.__hi_result.metadata[0];    
}

Sample 2 :  While rendering the chart on particular HTML div at Dashboard level unique render id will be present for every component in order to render same / different visualization multiple times without enabling iframe.

if(typeof hi_container == 'undefined'){  	
var render_id = containerRefs[chartElement]._values.renderId; 
var append_id="#main-"+ render_id;
grid.appendTo(append_id);
							
}
else
{
grid.appendTo('#chart_1');   
}
}

Usage of VF in Helical Insight :

Once you have created the VF file and saved it below mentioned are the steps how you can use the same to create reports.

  1. As we mentioned above newly integrated pie chart is present in the below path :
…\hi\hi-repository\Pie Chart\Pie Chart.efwvf

2. Go to adhoc report create module

http://localhost:8085/hi-ee/adhoc/report-create.html

3. Select the metadata and drag the required field over report pane

4. Now select the “VF” option present in the visualizations

5. Select use VF after that custom chart will be generated as below

6. Save the report and open in new window :

You May Also Like

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