Charts LifeCycle and it’s Usage

Till version 4.1 GA Enterprise edition the charting engine provided by default Helical Insight Community Edition is D3 and C3 charts (except table, crosstab, polar, radar and map). We have by default many UI driven customization options. Anyhow, there will be few requirements which cannot be accomplished with help of default properties. In such cases, we can use ‘JS Editor’ and ‘CSS Editor’ options to achieve that requirement. We can go to respective website of C3 and other charts and find out their API, and via JSeditor we can also trigger the default values of these API.

We can use 4 life cycle events for the report to customize the charts depending on the requirement i.e.

1. Pre-Execution
2. Pre-Fetch
3. Post-Execution
4. Post-Fetch

hi_container :

This is Javascript object which contains the all adhoc report information based on different report visualizations like chart,table,crosstab etc.

 To get the value of “hi_container” end user need to firstly generate the report visualization by connecting to metadata and by adding minimum one column to report area whereas “hi_container” values will differ based on the selected report visualization.

To see the hi_container , open browser console write as shown below :

1. Pre-Execution :
   This event will be called before adhoc report starts the actual report operation. It includes the different report configurations/visualization options like row count,sorting etc. It will be executed before report generation for different report configurations.
   Use case : The tabular report changing showing default 50 rows instead of 10

   Apply below Pre-Execution script :

   hi_container.set("preExecution",function(c){
   var viz_Options = c.get("viz_Options");
   viz_Options["rowCount"] = [50,100,150,200,250];
   c.set("viz_Options",viz_Options);
   
   });
   

   After Injecting the code , the default page numer has been changed to 50.

   

2. PreFetch : This event will be called just before adhoc report send the formdata or request data to the backend for fetching the response data.With this event we can prepare formdata as per requirement and using prefetch event we can send the formdata for
   ex. Set the sample value to 5 etc.

   hi_container.set("preFetch",function(c){
     var formData = c.get("requestData");
         formData.sample = 5;
    
     
    console.log(formData); c.set("requestData",formData);
       
   });
   

   

3. PostFetch :This event will be called just after adhoc report receives the reporting data from the backend. On reporting data we can change apply DB function or we can set the data for specific column. With post fetch we can set/change the report configuration , request data and response data can be
   changed.Adding Total ROW for table :

   hi_container.set("postFetch",function(c){   
   var responseData = c.get("responseData");   
   var measure1 = 0;   
   for(var i=0;i<responseData.data.length;i++){ 	
   measure1 += responseData.data[i].emp_age; 	
   var fullSumMeasure1 = measure1;  
    }   
   responseData.data.push({employee_name: "TOTAL", emp_age: fullSumMeasure1});   c.set("responseData",responseData); 
   });
   

   

4. Post Execution : Removing blue band on hover for table
   This event will be called when report is rendered. With postexecution event we can change the visualization of report along with report configuration, request data and response data can be changed.We can change the css and styling of report using postexecution event based on the html component class and id.
   Default table with blue band on hover

   Apply below PostExecution script to remove blue band on hover :

   hi_container.set("postExecution", function () {
   
   const element = document.querySelector('#chart');
     if (element.classList.contains("table-hover")) {
       element.classList.remove("table-hover");
   
     }
       
   });