InetSoft Product Information: Adding Tooltips to a Table or Chart

A tooltip is a graphical user interface element that provides additional contextual information when a user hovers over or clicks on a specific element, such as a button or icon, within a digital interface.

Typically appearing as a small pop-up box, tooltips offer concise and relevant details about the associated element, aiding users in understanding its function or purpose without the need for navigating to another page or seeking external information.

They serve to enhance the user experience by providing on-the-spot guidance, clarifying ambiguous icons, and contributing to the overall intuitiveness of the interface.

With InetSoft's app, power users can add a tooltip to a chart with a simple GUI. Developers can control them via an API if they are embedding InetSoft's charting technology into their cloud-based vertical solution.

To specify tooltips for individual table cells or chart data, use the following syntax:

 replet.addStatus("ElementID", item, "Tooltip"); 

View a 2-minute demonstration of InetSoft's easy, agile, and robust BI software.

The 'item' parameter specifies the particular table cell or chart data that should display the tooltip. The 'item' parameter is an EventPoint object, [column, row].

For example, consider the following element-level script for a chart with ID 'Chart1'. Note the index order in the 'item' parameter.

for(var i = 0;
 i < dataset.getRowCount(); i++) {
   replet.addStatus("Graph1", [1,i], dataset.getData(1,i));
 } 

The loop iterates through every value in the first chart dataset (index '1'), given by “getData(1,i),” and assigns each value to the tooltip of the corresponding chart graphical element. Use “getData(0,i)” to obtain the X-labels.

To perform a similar assignment of tooltips to individual cells in a table (ID 'Table1'), you can use the following script. Again, note the index order.

for(var i = 1; i < table.length; i++) {
   for(var j = 0; j < table.size; j++) {
      replet.addStatus("Table1",[j,i],table[i][j]);
   }
}

To add a single tooltip to an entire table or chart element, leave the 'item' parameter as 'undefined' or 'null':

 replet.addStatus("Table1",null,"Example table");
 replet.addStatus("Chart1",null,"Example chart");

Read how InetSoft was rated as a top BI vendor in G2 Crowd's user survey-based index.

Specifying a Data Format for Tooltip Text

To specify a data format for the tooltip text, format the 'message' parameter input using the 'formatNumber()' function. In the example below, the tooltips on 'Chart1' are given a particular numeric format:

for(var i = 0; i < dataset.getRowCount(); i++) {
  var fdata = formatNumber(dataset.getData(1,i),"#,###");
  replet.addStatus("Graph1", [1,i], fdata);
}

Text and TextBox

The Text and TextBox elements are the most commonly used elements in a report. They can display static text such as titles, headers, footers, and descriptions, or data retrieved from a query (for example, in a Section element).

You can modify the properties of a Text and TextBox from within script, including font, color, and text contents.

Read what InetSoft customers and partners have said about their selection of Style Report as their production reporting tool.

Text Property

You can access the contents of a Text or TextBox element through the 'text' property. To change the contents, simply assign a new value.

Text1.text = CALC.today(); // display current date/time 

A TextBox element has several properties in addition to those of the Text element. The 'alignment' property controls the alignment of the TextBox within the document flow. The 'textAlignment' property controls the alignment of the text within the TextBox boundaries.

// right align on the page
alignment = StyleReport.H_RIGHT;
 
// center align text inside textbox
textAlignment = StyleReport.H_CENTER; 

Useful Text/String Functions

Two common string operations are changing case and searching for substrings.

Changing a String to Upper/Lower Case

To change a string to uppercase or lowercase, use the 'toUpperCase()' and 'toLowerCase()' functions, respectively. For example:

 var s = 'John Lennon'; 
 Text1.text = s.toLowerCase(); 

For example, to change the header cells of a table to uppercase, add the following lines to the table script:

for(var col = 0; col < table.size; col++) {
  table[0][col] =
    table[0][col].toUpperCase();
}

Read the top 10 reasons for selecting InetSoft as your BI partner.

Searching Within a String

To find one string within another string, use the 'indexOf()' function. The 'indexOf' function returns the starting index of the substring within the parent string. If the substring is not found, the function returns a value of -1. For example:

var state = 'New Jersey';

if(state.indexOf('New') > -1) {
  Text1.text = 'With New';
}
else {
  Text1.text = 'Without New';
}