CT.11 Changing Chart Labels
When you assign a TextFrame to a chart element to represent data textually, you can modify the labels by using TextFrame.setText(value,text). The following example illustrates how you can construct custom labels for the chart using script. The labels display the names of the companies represented on the chart together with each company's percentage of total sales.
Viewsheet
Follow the steps below if you are creating a Viewsheet. (For a report, skip to the next set of steps below.)
1. Create a new Viewsheet based on the 'All Sales' query. (See Creating a Dashboard in Getting Started for details.)
2. Drag a Chart component from the Component panel into the Viewsheet grid. Click the 'Edit' button on the chart to open the Chart Editor.
3. From the Data Source panel of the Chart Editor, drag the 'Company' field to the 'X' region of the Data panel.
4. From the Data Source panel of the Chart Editor, drag the 'Total' field to the 'Y' region of the Data panel.
5. Press the 'Edit Dimension' button next to the 'Company' field. From the 'Ranking' menu, select “Top 5 of Sum(Total)” and press the 'Apply' button.
6. Right-click the chart and select 'Properties' from the context menu. This opens the 'Chart Properties' dialog box.
7. Select the Script tab to access the Script Editor.
8. Enter the script shown below.
Report
Follow the steps below if you are creating a a report:
1. Create a new report. (See Creating a Report in Getting Started for details.)
2. Drag a Chart element from the Toolbox panel into the report. This adds the chart to the report and opens the Chart Binding panel.
3. In the Data panel, expand the 'Orders' node and expand the 'All Sales' node.
4. Drag the 'Company' field from the 'All Sales' query to the 'X' region of the Binding panel.
5. Drag the 'Total' field from the 'All Sales' query to the 'Y' region of the Binding panel.
6. Press the 'Edit Dimension' button next to the 'Company' field. From the 'Ranking' menu, select “Top 5 of Sum(Total)” and press the 'Apply' button.
7. Right-click the chart and select 'Script'. This opens the Script Editor.
8. Enter the script shown below.
Viewsheet and Report
Enter the script shown below.
Note: Script that modifies 'graph' should be placed at the element level. See Adding Element-Level Script in Report Scripting and Adding Component Script in Dashboard Scripting for more information.
// Create new TextFrame based on 'Company' field:
var tframe = new DefaultTextFrame('Company');
// Get a handle to the graph element (bars):
var elem = graph.getElement(0);
// Assign the TextFrame to the element. This adds the
// category names above the bars (text-coding).
elem.setTextFrame(tframe)
// Compute the total amount of all companies:
var sumTotal = sum(table['Sum(Total)']);
// Loop through companies on chart:
for(i=1;i<table.length;i++) {
// Get the original label (company):
var oldLabel = table[i][0];
// Compute the fractional value of corresponding 'Total':
var barFraction = table[i][1]/sumTotal;
// Format the fraction as a percent:
var barPercent = formatNumber(barFraction,'##.00%');
// Compose the new label, with form 'Company:Percent':
var newLabel = oldLabel + ':\n' + barPercent;
// Assign the new label in place of the old label:
tframe.setText(oldLabel,newLabel);
}
The above script uses a customized TextFrame to display the company name together with the percentage of total represented by each company. The TextFrame.setText(value,text) function is the key to replacing one set of labels by a different set of labels.

In this example you created a completely new TextFrame to display the data, but you can use the same technique to modify an existing TextFrame. For example, to modify the existing X-axis labels, you would first get a handle to the existing X-axis TextFrame. For example.
var tframe = graph.getCoordinate().getXScale().getAxisSpec().getTextFrame();
Because this TextFrame is already associated with the X-axis labels, there is no need to assign the TextFrame to the axis. The only thing you need to do is to swap in the new labels. Here is the revised script in its entirety:
// Get a handle to the existing X-axis TextFrame:
var tframe = graph.getCoordinate().getXScale().getAxisSpec().getTextFrame();
// Get a handle to the graph element (bars):
var elem = graph.getElement(0);
// Compute the total amount of all companies:
var sumTotal = sum(table['Sum(Total)']);
// Loop through companies on chart:
for(i=1;i<table.length;i++) {
// Get the original label (company):
var oldLabel = table[i][0];
// Compute the fractional value of corresponding 'Total':
var barFraction = table[i][1]/sumTotal;
// Format the fraction as a percent:
var barPercent = formatNumber(barFraction,'##.00%');
// Compose the new label, with form 'Company:Percent':
var newLabel = oldLabel + ':\n' + barPercent;
// Assign the new label in place of the old label:
tframe.setText(oldLabel,newLabel);
}

| << CT.10 Changing Legend Properties | © 1996-2013 InetSoft Technology Corporation (v11.4) | CT.12 Changing the Chart Coordinates >> |