Hiding & Unhiding Fields

In this article you will learn about how to Hide and Show the Fields of a Chart.

First, Login to the Helical Insight application with the required credentials. Then, open or create a report using any of the metadata. Also, you can create your own customize report with your data. This can be one or more fields in the charts.

By default when a report is opened and then on opening any chart based on the report, fields are enabled.



Hiding Fields In Charts
There are 2 ways to hide the selected fields :

1. By clicking selected fields : To hide the field click on field Travel Cost (used in the current report). Similarly, field name and number of fields can differ depending on the columns used in the reports.
2. By applying Javascript code externally: Just click on the required fields separately and see the result. Similarly, to hide the selected fields using code, you will require a Javascript. To execute the code, go to Editor tab, click on JS Editor,  then click on Add to enter the code and then click on Inject to executive the entered code.

There are various code format to follow in order to hide the fields :

1. Hide Single Field
2. Hide Multiple Fields
3. Hide All Fields

Javascript Code:  (Hide Single Field  )

hi_container.set("postExecution", function () {
  Hdi.c3chart.hide("Travel Count");  // here "Travel Count" fields name can vary depending on 
                                    // field/s used in the report 
});

Output







Javascript Code:  (Hide Multiple Fields )

hi_container.set("postExecution", function () {
     Hdi.c3chart.hide("field1", "field2"); // here field name can be customizable 
});

Javascript Code:  (Hide All Fields )

hi_container.set("postExecution", function () {
     Hdi.c3chart.hide(); // here field name can be customizable 
});

Showing Fields In Charts

After hiding the required fields, now you may want to show certain fields. Here also, you can enable the fields in 2 ways :

1. By clicked disabled fields on the chart legend
2. Using Javascript code

As explained previously we have code to show the fields. We can:

1. Show Single Field
2. Show Multiple Fields
3. Show All Fields

Javascript Code:  (Show Single Field  )

hi_container.set("postExecution", function () {
  Hdi.c3chart.hide("Travel Count");  // here "Travel Count" fields name can vary depending on 
                                    // field used in the report 
  Hdi.c3chart.show("Travel Count");  //It will enable the field with the "Travel Count" name
                                     //field name can be customizable
});

Output







Javascript Code:  (Show Multiple Fields )

hi_container.set("postExecution", function () {
     Hdi.c3chart.hide("field1", "field2"); // here field name can be customizable 
     Hdi.c3chart.show("field3", "field2"); // this code used for showing hidden fields
                                          //field3 : already enabled, field2: gets enabled
});

Javascript Code:  (Show Multiple Fields )

hi_container.set("postExecution", function () {
     Hdi.c3chart.hide("field1", "field2"); // here field name can be customizable 
     Hdi.c3chart.show();  // this code will enable all the hidden as well as
                          // already enabled fields
});

In addition to it, you can use more customization using CSS and Javascript code. Please refer our adhoc chart customization articles.



For more info, contact us at support@helicalinsight.com